Maximally optimising image loading for the web | Malte Ubl

Malte has put together a brilliant overview of the various techniques that are currently available on the web natively for loading images in the most performant and user-centric ways possible. I'm pretty happy to have heard of most of them, but not all:

  • Using a combination of max-width: 100%; height: auto; with "hard-coded" width and height values e.g. <img height="800" width="1280" src="..." alt="..." /;
  • The content-visibility CSS attribute (though this requires some fancy calc formulae);
  • A new file format – AVIF – which is more efficient than JPEG or WebP in a lot of situations, particularly for use with the <picture> element;
  • Use of the w selector with a srcset attribute (also using the <picture> element);
  • Embedding a hash of the image in the actual image URL (🤯), which can (apparently, though I'll admit this is above my full understanding 😁) also help with cache control;
  • Native lazy loading e.g. <img loading="lazy" ... />;
  • Native async decoding, to make use of more efficient multithreading e.g. <img decoding="async" ... />;
  • Using a "blurry placeholder" (grr shakes fist), though here by applying a background-image set to cover, with optional JS to remove the background once the actual image has loaded (so not as irritating as some more popular, JS-only techniques).

Explore Other Notes

Older

Bean Dad is Twitter's final form

I see Twitter as a sort of necessary evil: a mainstream communication channel that is universally accessible and therefore a generally positive concept on the micro level, that has been abused on the […]
  • Malte has put together a brilliant overview of the various techniques that are currently available on the web natively for loading images in the most performant and user-centric ways possible. I'm […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.