HTTP Archive

Media chapter of the 2022 Web Almanac by HTTP Archive

https://almanac.httparchive.org/en/2022/media

I had the honor to review the Media chapter of the 2022 edition of The Web Almanac by HTTP Archive, "a comprehensive report on the state of the web, backed by real data and trusted web experts".

Once again, it shows that many Web pages are full of oversized images, for multiple reasons, including slow adoption of better modern image formats (AVIF, WebP), and wrong usage of srcset and sizes:

19% sizes attribute that were inaccurate enough to affect srcset selection on desktop. On mobile, it’s 14%.

Let's hope it will improve over time, we'll check this next year!

• older link:
  Using :has() as a CSS Parent Selector and much more
• newer link:
  Fallback Font Generator

---

Related contents with similar topics

1. 

   Barry Pollard

   What does the image decoding attribute actually do?

   • Nicolas Hoizey
   • 27 June 2023
   • image, WebPerf
   • 1 reaction

   So use it on your `` elements if you want. It's maybe good that image components for libraries use this, or that platforms like WordPress set it by…

2. 

   Johannes Odland

   Cropping Images with CSS While Keeping a Focal Point in the Center

   • Nicolas Hoizey
   • 22 June 2023
   • image, WebPerf, CSS, Container Queries
   • 13 reactions

   This is a lovely way to deal with image crop and focal point with CSS only! 😍 And I love that Johannes put this warning in the beginning: While client-side…

3. 

   Jason Grigsby

   New Recommendations for Ecommerce Images

   • Nicolas Hoizey
   • 15 June 2023
   • image, responsive, WebPerf, ecommerce
   • 9 reactions

   For ecommerce companies—particularly for those selling apparel—it likely makes sense to prioritize image quality above file size. This is a really…

4. • Nicolas Hoizey
   • 6 June 2023
   • Core Web Vitals, image, LCP, WebPerf
   • 6 reactions
   • permalink

   Apparently, an image whose part above the fold is indeed the largest, but of which only a small part can be seen, can be considered an LCP element, even if another image has a larger part visible... 😭

   You can see this for my photography site in this WebPageTest result:

   https://www.webpagetest.org/vitals.php?test=230606_BiDcN4_4NJ&run=3&cached=0#lcp

   

5. • Nicolas Hoizey
   • 6 June 2023
   • image, JPEG XL, Safari, WebPerf
   • 20 reactions
   • permalink

   Looks like we will soon have JPEG XL in Safari! 🥳

   https://developer.apple.com/videos/play/wwdc2023/10122/