Images

My go-to local app image optimizer has long been ImageOptim. It’s Mac-only (and free), but they suggest alternatives for other platforms. I reach for ImageOptim usually when I want to optimize a whole bunch of images in a batch. For one-offs, you can’t do much better than Squoosh, a great progressive web app (PWA). I […]

Inset `box-shadow` doesn’t work directly on image elements. There are work-arounds, but this SVG filter can do it directly.

Don’t run! There is powerful stuff to learn here through interactive demos.

You can animate an .svg and it will play even with an `` or `background-image`, making it a viable GIF replacement if you can pull it off!

When an image isn’t “full width”, but you want that caption underneath to wrap at the end of the image.

I’m not the world’s biggest fan of LQIP’s (low quality image placeholders) generally (doing nothing other than handling aspect ratio is… fine), but I really like how much creativity it inspires. I’ve seen a ton of different approaches to it over the years, that all use different technology and all have different advantages and disadvantages. […]

Dries Buytaert: I have 10,000 photos on my website. About 9,000 have no alt-text. I’m not proud of that, and it has bothered me for a long time. Going back and hand-writing alt for 9,000 images isn’t a job that most of us can fit into our lives and I empathize. Are computers up for the task finally? […]

Safari made .mp4 file work in img tags in HTML back in 2017, but no other browser followed suite. Should they have?

There is some low-hanging web performance fruit with images. Serving them in the right format, from a CDN, with the right HTML can be a big perf win.

With CSS’ `image-rendering: pixelated;` we can keep HTML images that have pixelated look anyway quite sharp looking, and possibly more performant to boot.

Good advice: “Write alternative text as if you’re describing the image to a friend.” Or, if it’s helpful, don’t forget to include the emotion in an image.