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="..." /;
content-visibilityCSS attribute (though this requires some fancy
- A new file format – AVIF – which is more efficient than JPEG or WebP in a lot of situations, particularly for use with the
- Use of the
wselector with a
srcsetattribute (also using the
- 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
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).