Placing images on websites is incredibly simple, yes? Actually, yes, it is. You use
<img> and Link it to a valid source
href attribute and you are done. Except that there are (counting fingers) 927 things you could do (and some you should really do) are often overlooked. Wait and see…
- Make sure you use the sentence format
altpicture in picture to describe what the picture describes.
- Wrap it a
<figure>and use a
<figcaption>if you want to see the text associated with it.
<picture>element with different
<source>elements if you want to either …
- You have different source images for different sizes and other conditions.
- Provide a variety of formatted images to take advantage of next-generation image formats.
- Know enough about image format bats so you can use SVG-like formats appropriately.
- Know enough about your audience to use the most modern format possible by default.
sizesattributes to serve images of different sizes to enhance bandwidth on differentnet devices. Note that creating these image variations is as efficient as possible depending on the image itself, not the predefined sizes.
- Optimize the image and all its variations. Try a lot of image optimization software because they all produce different results. Choose the best. Make sure that the optimized versions are not accidentally larger or of lower quality than the original, as this can happen.
- Lazy uploads images so users don’t have to upload images they can’t see. Usually we have
loading="lazy"but this is so important that it is probably worth polyfillating.
- Be sure to include
heightattributes so that the image takes up the right amount of space in the layout before loading (even if the image is liquid).
- Host your photos quickly, without cookies, with a global CDN. Likely
<link rel="dns-prefetch">CDN domains. But don’t do any CDN material in development, just staging or production. The primary source of your images should be your own servers, so you can transfer CDN files as needed.
- The largest image on the page can be preloaded completely, such as
<link rel="preload" as="image">to achieve the best possible LCP.
- Try to figure out when you should exercise
decoding="async"(I have no idea).
- Keep the backup formatting in place when / if the image is not loaded.
- Consider more pleasing images before uploading or failing, such as small blurry versions of images.
- Keep performance monitoring in place to ensure that rogue states ’giant images don’t slip and mess with your performance budget and that they can monitor for broken image errors.
I’m sure I’ll forget some. Makes you sweat, doesn’t it?
If you ask me, it can’t be done. At the very least, not all together, while practical time. Fortunately: computers. I know both Eleven pictures and Gatsby plugin image are highly regarded for how well they automate these things and deliver as many of these best practices as they can.
The second reality is sometimes just to do some of these things, perhaps the biggest gains, while being practical over time. Jakessa “Half the image size by optimizing for high-density displays” he writes:
Here’s the technique I use in most of the images in this blog: I take the maximum size of an image that can be displayed as CSS pixels, multiply it by two, and code it as lower quality because it’s always displayed at 2x density or higher. Yup. That’s it.
Resemble Dave’s 2013 1.5✕ start.