Optimise image delivery

[axeltlarsson]

Progressively load images

Use something like medium.com's progressive image loading, so first load a super-low-res and super-small version of each thumbnail - this should feel instant. But display it with a good blur filter so that it looks good. These images should probably be pre-process so on the server so that they are available without any image processing required on the server side.
Then, in parallel request the "full" resolution of the image (full resolution as in the perfect size for the particular view port), optionally lazily as you scroll down the list. These "full" resolution images can be dynamically requested and thus could trigger a server-side image processing step, that should be ok as it will only be done once on the server - then they'll be saved in the cache on disk.
Then smoothly transition into the full-res images as they downloaded.

Use responsive images

Basically serve the correct image resolution for each device. One alternative is to use srcset
and provide 1x, 2x, 3x etc resolutions, see https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Or perhaps use devicePixelRatio directly in Elm/js?

https://developer.mozilla.org/en-US/docs/Web/CSS/image-set

Resources

• https://dev.opera.com/articles/native-responsive-images/
• https://blurha.sh/ and https://package.elm-lang.org/packages/WhileTruu/elm-blurhash/latest/
• https://jmperezperez.com/medium-image-progressive-loading-placeholder/
• https://medium.com/front-end-weekly/progressive-image-loading-and-intersectionobserver-d0359b5d90cd
• https://www.sitepoint.com/how-to-build-your-own-progressive-image-loader/
• https://speckyboy.com/introduction-progressive-image-rendering/
• https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Todo

• Progressively load images on Page.RecipeList (and Page.Recipe) with an initial blurred image:
  • either with blurhash,
  • or using vips gaussian blur...
• Serve responsive images
• lazy-load Page.RecipeList