Optimise images

[zarino]

Check images in /assets and /media are at optimum size (700px max?) and quality.

[zarino]

Images from /media are always served 700px wide. Some are currently 1400px wide, and a few are probably some random size between. It would be a shame to lose the 1400px images on HiDPI screens, so maybe <img srcset> is the answer?

There are already a few jekyll responsive image plugins, but they mostly use the <picture> tag, expect to generate the different image resolutions themselves from a single high-res original, and introduce quite a bit of overhead. I wonder whether a quick custom-written plugin that simply takes input like this:

{% img "This is an image" /media/example.jpg /media/example-1400.jpg %}

And outputs HTML like this:

<img alt="This is an image" src="/media/example.jpg" srcset="/media/example-1400.jpg 1400w" sizes="(min-width: 768px) 700px, (min-width: 480px) 420px, 100vw">

Would do the job?

If a second image URL isn't provided, it could just output a standard img tag, no worse than we currently have.

[zarino]

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ https://mattwilcox.net/web-development/keeping-srcset-and-sizes-under-control https://ericportis.com/posts/2014/srcset-sizes/

[zarino]

Using Google’s PageSpeed Insights, it looks like pull request #25 improved the homepage from

• Mobile: 26 / 100
• Desktop: 34 / 100

to

• Mobile: 69 / 100
• Desktop: 82 / 100

and a fairly image-heavy individual post page from

• Mobile: 29 / 100
• Desktop: 70 / 100

to

• Mobile: 69 / 100
• Desktop: 82 / 100

The main things it now complains about are:

• Lack of cache expiration dates on CSS, JS and image files
• "render-blocking JavaScript and CSS in above-the-fold content"