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).