Responsive image breakpoints generator

PHP
1

Hi Sitepoint

I’m searching for a PHP library which handles response image breakpoints. The idea behind this is to auto generate the srcset attribute for any image.

I’d like this library to accept an image (an uploaded or existing file), and render different variations of this image. I expect this library being smart enough to know how to create these variations for each individual image. Possibly with some configuration options like: maximum amount of variations, the steps in which file sizes may vary, etc.

Does such a library exist? Does an algorithm to determine how many image variations should be rendered exist?

Thanks for you input.

2

I’m not sure you need s PHP library even if one exists. If you apply max-width and width: 100% height: auto to your images they should be responsive without any PHP at all.

3

It’s not about the images being responsive. It’s about an image with the correct (or close to correct) size being loaded, to minimise unused bandwidth usage. (You could load an 1920x1080 image on a 560 wide display, but that’s wasted bandwidth). See the srcset spec for more info: http://responsiveimages.org/

4

I don’t understand exactly what you’re after.

srcset can list different width images and depending on the browser (eg. IE does not support srcset) will choose to download the image that is the closest match to fit in the view-port with the minimal amount of enlarging / shrinking.

When you say “library to handle breakpoints” I’m guessing you mean something like GD or ImageMagick to dynamically create images sized according to the view-port width of the browser calling the page.

Depending on the image, I think you would be better off creating the images yourself. At least it would be easier to have more control over artistic decisions such as resizing, cropping, quality etc.

When it comes to how many images there should be, I don’t think that much bandwidth would be saved by having sizes in small(ish) steps.

That is, I think a “small”, “medium” and “large” or maybe “small”, “sm-med”, “medium”, “med-lrg” and “large” versions of each image should be enough.

5

This project I am working on at the moment could be helpful.

AmpHtml SrcSet Demo has been adapted to:

  1. create ten different thumbnail sizes from the images in “./pixtale-net/” folder
  2. uses ImageMagick to slice the images to correct width
  3. for demo purposes, shrinking browser displays 10 resized images

PHP image functions could have been used but it is far simpler to use ImageMagick :slight_smile:

Edit:
AmpHtml web-pages are ideal for every mobile, tablet and desktop browsing - as long as JavaScript is enabled. Otherwise a canonical link selects the normal web-page.

AmpHtml web-pages fail W3.org validation :frowning:

Loading the Chrome Validator Extension displays a green icon when valid or a red icon. The latter can be clicked to show the errors.

Alternatively appending ?development=1 to the URL will show errors in FireFox → Tools → Developer → Debugger. Far easier to use the Chrome Extension :slight_smile:

Edit 2:
I am curious to know if the site works satisfactorily using a mobile or a tablet with a small screen. I have only tested it by shrinking the browser.

6

Hi Mittineague

Thanks for replying. It might be a good idea to clarify what kind of project I’m working on. See I’m not building a PHP application which serves HTML on a request. Your solution, caching the image when a request is received; would be a good idea in that case.

But I am using PHP as a build tool to create static HTML pages. Website visitors never trigger PHP scripts, they just download the rendered HTML which was “compiled” by PHP beforehand. It is during this compile phase that I want to generate different versions of every image on the website.

Predefining sets of sizes is not a good enough solution. Say you have a JPEG image with a width of 1000 pixels with only three colors in it. Scaling this image down won’t actually reduce the size that much. A complex image might need ten variants, while a more simple image could do with three. Its this problem I want to be solved by a library or an algorithm:

  • I don’t want a predefined set of sizes for all images.
  • I don’t want to specify all sizes for each individual image.

While I know I can scale images with Imagick or GD; I still need smart code to decide how every image should be scaled.

The goal of this is of course to let the browser decide which image variation is the best for its case. This is what the srcset and sizes attributes were designed for.

7

Hi John

Anywhere I can find the sourcecode on how you scale images?

1 Like
8

Do either of these help, @brentroose?

9

Hi Techno

Seems like the responsive breakpoints generator is written in JS and some kind of backend API (I suppose Ruby): https://github.com/cloudinary/responsive_breakpoints_generator

Also: https://github.com/MattWilcox/Adaptive-Images looks a bit outdated (the guy himself says the project is no longer maintained). It is also poorly written.

Thanks for looking into it though!

10

Open the supplied link and the the top-left hand menu link.

Links to the generated image creator and source are listed.

Please note the page works and was knocked up in a hurry.

11

Have you heard of Pug? https://pugjs.org/

If you are only using PHP as a build tool with no run time scripting then you will really like Pug. It has a far simpler syntax than PHP.

Try using the Yeogurt framework to see how to best optimise the use of Pug in your templates.

I’m guessing you are using some sort of NPM set up to turn the PHP into HTML? If so then you would be better off trying to find an NPM solution to the image size problem than a PHP solution.

12

Hi Dan

I’m actually using PHP as the build tool, not just for template rendering. Also, I couldn’t find a library which did what I was looking for, so I wrote something which fit my use case: https://github.com/brendt/responsive-images.

2 Likes
13

Was this function that uses glob(*.*) to extract all the images in a directory and generate resized images?

http://www.johns-jokes.com/downloads/sp-h/amp-img-srcset/source-index-002.txt

To view the srcset images the following html image display was used:

<!-- uses amp-img but can easily be adapted to HTML im src='''> format -->
 
<amp-img src="<?= $imgSrc ?>0.jpg" 
	 srcset="<?= $imgSrc ?>1080/0.jpg 1080w, 
	 <?= $imgSrc ?>1024/1.jpg 1024w, 
	 <?= $imgSrc ?>900/2.jpg 900w, 
	 <?= $imgSrc ?>800/3.jpg 800w, 
	 <?= $imgSrc ?>700/4.jpg 700w, 
	 <?= $imgSrc ?>600/5.jpg 600w, 
	 <?= $imgSrc ?>500/6.jpg 500w, 
	 <?= $imgSrc ?>400/7.jpg 400w, 
	 <?= $imgSrc ?>300/8.jpg 300w, 
	 <?= $imgSrc ?>200/9.jpg 200w, 
	 <?= $imgSrc ?>100/10.jpg 100w"
      width="1080"
      height="610"
      layout="responsive"
      alt="an image"></amp-img>

Page Source:

http://www.johns-jokes.com/downloads/sp-h/amp-img-srcset/source-index-002.txt

14

Hi John

Not really sure what you meant with your post. As I posted in a previous reply, I don’t want to specify a fixed set of widths per image, but want the library to figure out optimal image widths for me. This enables me to write the same markup for all images, and being relatively sure the browser will load an optimal image for that screen.

{* Smarty syntax *}
<img src="{$image.src}" srcset="{$image.srcset}"/>
1 Like
15

I glanced at your GitHub repository and it seemed remarkably complicated compared to the function and sample image script I supplied.

If the Smarty syntax is as simple as <imgs src="{$image.src}" srcset="{$image.srcset}"/> then it seems well worth the effort.

I will put it on my Todo list :slight_smile:

Many thanks.

1 Like
16

Responsive images done well is a complicated matter, no? :smile:

I’d highly appreciate it if you found the time to take a closer look at the code and share your feedback for sure!

1 Like
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.