[firefoxd]

When it comes to images, developers tend to look for automation to resolve the format. But the optimization should come at creation time. Yes, it's a good idea to have multiple resolution to have the browser select the best size, but the image on the screenshot clearly should have been a jpeg or webp.

I commented a couple days ago about how I taught my team about image formats [0], and just published a blog post this morning [1].

[0]: https://news.ycombinator.com/item?id=44683506

[1]: https://idiallo.com/blog/react-and-image-format

[zerocrates]

The "mistake" of all PNG has its advantages: you can convert to JPEG (or whatever else) after the fact with equivalent results to if you had done it that way in the first place; not the case the other way around.

[arclight_]

Thanks for sharing, those are good points.

Another aspect of image optimization that I'm aware of, but haven't even bothered with yet, is handling the art direction problem of responsive images.

Like "pan and scan" conversions of widescreen movies to the old 4:3 TV size, if you're serving a narrower image to mobile devices than say a desktop browser, the ideal image to serve is probably not a generic resize, or center-cropped version of the image. Mozilla has a nice page on responsive images that explains it better than I could: https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Res...

[exiguus]

If i see it correctly it is avif with webp and png fallback. My browser load the screenshots in avif.