Putting images on websites is incredibly simple, yes? Actually, yes, it is. You use <img>
and link it to a valid source in the src
attribute and you’re done. Except that there are (counts fingers) 927 things you could (and some you really should) do that often go overlooked. Let’s see…
alt
text on the image to describe what the image depicts. <figure>
and use a <figcaption>
if you want visible text that goes with it. <picture>
element with a variety of <source>
elements if you want to either… srcset
and sizes
attributes to serve differently sized images to be bandwidth efficient on differnet devices. Note that to be as efficient as possible, creating these image variations is dependent on the image itself, not pre-determined sizes.loading="lazy"
but this is so important that it’s probably worth polyfilling.width
and height
attributes so that the image reserves the correct amount of space in a layout before it loads (even when the image is of fluid width). <link rel="preconnect">
and <link rel="dns-prefetch">
to the CDN domain(s). But don’t do any CDN stuff in dev, only staging or production. The canonical source for your images should be your own servers, so you can move CDNs as needed.<link rel="preload" as="image">
for the best possible LCP.decoding="async"
(I have no idea).I’m sure I’m forgetting some. Makes you sweat, doesn’t it?
Addy covered a lot of this in more detail in this Smashing Magazine article and has a whole book on the subject.
If you ask me, it can’t be done. At least, not all of it together while being practical with your time. Fortunately: computers. I know both Eleventy Image and gatsby-plugin-image are well-regarded in how well they automate this stuff and deliver as many of these best practices as they can.
Another reality is sometimes just doing some of these things, perhaps the biggest wins, while being practical with time. In Jake’s “Half the size of images by optimising for high density displays” he writes:
Here’s the technique I use for most images on this blog: I take the maximum size the image can be displayed in CSS pixels, and I multiply that by two, and I encode it at a lower quality, as it’ll always be displayed at a 2x density or greater. Yep. That’s it.
Reminiscent of Dave’s 2013 1.5✕ hack.
The post Images are hard. appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
This is the 3rd post in a small series we are doing on form accessibility.…
This is going to be the 2nd post in a small series we are doing…
Hey all you wonderful developers out there! In this post we are going to explore…
Hey all you wonderful developers out there! In this post, I am going to take…
These things called passkeys sure are making the rounds these days. They were a main attraction at W3C…
I spend a lot of time in DevTools, and I’m sure you do too. Sometimes…