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. • Nicolas Hoizey
   • 23 March 2023
   • image, WebPerf
   • 4 reactions
   • permalink

   Seriously, do we need yet another version of Low Quality Image Placeholders?

   Why do some people want to do additional work just to show useless colourful pixels to users, delaying the rendering of the actual image?

   As a user, I hate LQIP. Single colour backgrounds are fine, though.

2. 

   Toni Sagristà

   JPEG XL vs AVIF: A Comparison

   • Nicolas Hoizey
   • 8 March 2023
   • JPEG XL, AVIF, image, WebPerf
   • 7 reactions

   According to the results presented above, we can conclude that JXL is the superior format for both lossy and lossless operations. That is clear by only looking at the results, but we can also have a look at the features of each format. Some of them are very important.

3. • Nicolas Hoizey
   • 13 December 2022
   • image, SVG, WebPerf
   • 14 reactions
   • permalink

   ⚠️ Be carefull if you use SVGO or SVGOMG to optimize #SVG images using <symbol>s.

   There's a bug that might remove them when it shouldn't:
   https://github.com/svg/svgo/issues/1726

   

4. 

   Sia Karamalegos

   Responsive images on Shopify with Liquid

   • Nicolas Hoizey
   • 30 November 2022
   • responsive, image, WebPerf, Shopify, Liquid
   • 8 reactions

   We launched the image_tag and image_url filters to help with generating responsive images. Before we dive in, what do these filters do? What are the differences between them?

5. 

   Jon Sneyers

   The Case for JPEG XL

   • Nicolas Hoizey
   • 2 November 2022
   • image, WebPerf, JPEG XL
   • 6 reactions

   Jon gives a good overview of everything JPEG XL improves over other image formats. This article can be seen by some as biaised, as Jon is part of the team that created the format, but I really think it honestly shows clear advantages, and I hope it will help people understand JPEG XL support in browsers would be great.