Do you serve scaled images?

The problem

Up to an extent yes, JIG does serve scaled images. But "close enough" is not enough for performance analyzers such as GTmetrix. When you set up a gallery, you have a Target row height value and a Row height deviation (+-) value. The sum of these will give you the largest a thumbnail can appear at normal resolution screens, therefore this size will get generated and served to visitors. If you choose to use no deviation then of course your thumbnails will be shown at the target height, scaled to that exact size and the GTmetrix or other analyzer "errors" will disappear. However, in the world of responsive design, things are not so simple, as your website elements will get moved and scaled depending on many factors...

You could serve perfectly scaled images, but...

Having no deviation means heavy cropping on the sides of thumbnails to make them fit in rows on the screen. You'd rather opt to have slightly larger images served as thumbnails but with some freedom to appear non-cropped, right? Though so. It's possible to serve perfectly scaled images even then, but JIG prefers to avoid that. It would mean a new thumbnail for the same image would be created for just about every other visitor. Even a slightly different screen and resolution can create a differently aligned grid. Which in turn, results in a new row height (within your desired range), for which a new set of thumbnails would be generated. This cannot be done on a cheap shared hosting that the majority of people use.

Images from the cloud

Enter the cloud image resizing services or image CDNs. JIG aims to support solutions where your image resizing and serving tasks are outsourced to 3rd party (instead of being done locally by TimThumb). They have the necessary resources to serve unique and perfectly scaled images to every visitor (often for a price of course). This is not yet a feature but you can expect it sometime in the future. Google Photos already does this, because they have the resources to do so.

Conclusion regarding GTmetrix

In essence, you'll need to disregard "serve scaled images" recommendations of analyzers. It's simply unavoidable unless you have the resources. They have a perfectly valid point to show you this warning though. There is nothing worse than a large image being used as a thumbnail. For example, a 1280*1920 90% quality JPG image shown as 320*480 on non-retina desktop screens. There is no excuse for that, and the warning of GTmetrix would be spot-on.

Bonus: Retina @4x example

But even that scenario can have arguments for it, once you replace "non-retina desktop" with "high resolution mobile device". Take, for example a modern phone which has a 2560*1440 screen. Obviously, things are scaled up (4 times) in order for things like text to be readable. This means that phone still reports 640*360 screen size. Otherwise, a whole website in desktop view could be shown on the screen but elements would be too small to read. Now, imagine that thumbnail (320*480) shown on your site, on these phones. With 20px margins on each side. Perfectly everyday scenario. If the image is in fact served as a 320*480 image (as it would be by blindly following GTmetrix and not caring about retina revolution), it would appear heavily pixelated and downright ugly. Therefore JIG serves 1280*1920 image as thumbnail (silly as it sounds) because these devices actually physically require this. The result is beautiful, even if the image is severely compressed (down to 20-30% quality instead of 60-90%). More info about why this is preferable and how it carries minimal bandwidth cost, can be found at the Retina ready feature demonstration page.

This FAQ entry was posted in Behavior on November 25, 2017