Optimize images

[crackofdusk]

eleventy-img uses the sharp image processor to resize the images to the configured sizes. The configuration code is adapted from the eleventy-img documentation.

Each image is made available in 3 variants: 400px, 850px, 1200px. The srcset image attribute declares the variants and the sizes attribute gives a hint about which one to download and display.

Advantages

• Automatic resizing and compression. We can preserve high quality images in the source and not worry about accidentally serving, say, a 4 megabyte image.
• Smaller file sizes. Most phones would download the 400px wide images
• Preserved aspect ratio. The plugin returns the dimensions of the processed image. We can include that in the image markup. The browser can use this information to calculate the aspect ratio and reserve space for the image, avoiding "jumps" when the image loads.

Quality comparison

The screenshots (in PNG format) below are of the desktop version of a blog post, where the images are are scaled down to the content width, which is 840px.

I left out the 400px wide image which would normally only be served on smaller screens.

850px wide, 124 kB

This is the "medium" quality that is served as a fallback to browsers without support for srcset and sizes attributes. I originally planned this to be the highest quality version, but it looks really blurry on a Macbook Pro.

1200px wide, 220 kB

This is the one I picked as a compromise between file size and perceived quality. It amounts to around 1.4x pixel density (1200px wide image downscaled to 840px). That makes the text in the sample image blurry, but reasonably readable on higher density displays. Also note that it's a photo and the text is not the most important part. Screenshots of user interfaces would usually be in the PNG format and those look good at this pixel density, even on a Macbook Pro.

1600px wide, 355 kB

This the same size as the original image, but processed with the default compression parameters. The ~2x density would be optimal, but I find the transfer size (355 kB) too large.

Original/1600px wide, 476 kB

The original image as served on the blog up until now.

WebP and AVIF

I considered adding those using as enhancements (using the <picture> element).

WebP looked bad in my experiments.

AVIF is not supported out of the box yet. See lovell/sharp#2289

Lazy loading

I switched to native lazy loading because of conflict with the LazyImages plugin. The plugin only worked properly on individual blog post pages anyway. On the index page, where it would be most beneficial, it could not resolve the relative paths because of the pagination.

References

• https://github.com/11ty/eleventy-img
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/simplificator/simplificator-blog/g8mjjeyf0
✅ Preview: https://simplificator-blog-git-eleventy-img.simplificator.vercel.app