Note from 27 May 2022

Be careful if you use Chrome's device emulation to test responsive images, there's a bug on DPR emulation!

Star the issue!

• Older: Note from 24 May 2022
• Newer: Note from 3 June 2022

Related contents with similar topics

1. 

   Eric Portis

   Sizes="auto" pretty much requires width and height attributes

   • Nicolas Hoizey
   • 5 December 2023
   • image, responsive, WebPerf
   • 6 reactions

   sizes="auto" is a great new feature of HTML for lazy loaded responsive images. are we dealing with an with sizes=auto? Then its natural dimensions…

2. 

   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…

3. Note from 24 May 2023

   • Nicolas Hoizey
   • 24 May 2023
   • CSS, image, responsive, WebPerf
   • 2 reactions

   Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

   Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?

4. 

   Jason Grigsby

   On Container Queries, Responsive Images, and JPEG-XL

   • Nicolas Hoizey
   • 7 April 2023
   • image, CSS, responsive, JPEG XL, WebPerf, container queries
   • 8 reactions

   It is natural to think that the problem with images in container queries is a mere oversight. We used to only have media queries to design with. Now…

5. 

   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…