Responsive Images: Resizing or Dynamic Cropping?

Question

This question is not really about coding, but about choosing the right method for the task. I don't know if this is against SO rules, but here you go.

I once created a small CMS for a local newspaper that gave them the functionality of adding my posts along with a photo. As for the photo, they used to upload one photo, and I saved various versions of this photo for maintenance according to the different templates that they can choose (templates, not screen sizes!)

Now I was asked to upgrade this old system, and I was faced with the dilemma of responsiveness / adaptability.

As for my results on the Internet, the next big thing is the <picture> element. I found a lot of resources, and when I decided to go for it, I came through this site. If you look at the source of any image, you will understand that it has a request, for example width=940&height=320&mode=crop&scale=both&meta=panoramic When I resize the window, it becomes something like width=300&height=200&mode=crop&scale=both&meta=square&anchor=topcenter I believe this website uses the "Image Resizer" , and depending on the screen size, one photo is processed by the server on the fly to display a new image.

I don’t understand which of these methods is actually better, since the picture element still needs several images uploaded to the server, while imageresizer only needs one, and it will drop - it resizes to fit the screen size. But, on the other hand, with the picture element, the server does not get bombarded with requests for resizing images, but serves to save existing photos from processing and time?

Answer 1

The Image Resizer library sounds like your best bet - save yourself the trouble of downloading and managing many different image sizes!

If you are worried about the overhead of resizing the image (although it’s so small), you can always try their DiskCache plugin, which resizes the image once and then saves it to disk - subsequent requests for the same image of the same size will return that.

Answer 2

On the site you are linking to, the src image changes using JavaScript when the browser viewport (and site design) changes.

This means that the browser needs to wait for this JavaScript to execute in order to find out which image needs to be loaded.

With a set of predefined images stored on the server, and modern markup with <img srcset="…"> or <picture> , the browser gets everything that it needs directly when loading HTML, which means that it can start downloading the best image even before CSS or JavaScript is loaded and / or executed. This is indeed much better for performance, and therefore for the user.

In addition, since these standards are now supported by most browsers, it works even if JavaScript is blocked or breaks for any reason.