3

I'm using angular with material and using img srcset to handle responsive image for header.

This is what I'm doing so far: 

<img srcset="../../assets/mtn-bg_600.jpg 600w,
      ../../assets/mtn-bg_960.jpg 960w,
      ../../assets/mtn-bg_1280.jpg 1280w,
      ../../assets/mtn-bg_1600.jpg 1600w"
 sizes="100vw"
 src="../../assets/mtn-bg_1600.jpg" alt="Header image">

I'm confused about how to handle high resolution images with srcset. I have seen examples of srcset only having images with resolution like 1x 2x or with media queries. But want to be clear how can I handle images for high resolutions along with media queries.

Do I need to add high resolution images with their sizes as well in the srcset and img element will automatically handle it.

I'm using default breakpoints that flex-layout for material provides for my application as well as for srcset. Please also suggest if I would need to consider any other breakpoints for srcset.

Thanks!

Imad
  • 179
  • 3
  • 12

1 Answers1

2

For an in depth look into srcset and responsive images, the MDN web doc "Responsive Images" is a great resource. And there are several other articles out there just a short search away.

Using x-descriptors makes it convenient to serve images at consistent physical sizes on screens of different screen resolutions.

For example, if you have a 900 pixel wide photo loading on a standard screen, you will want a 1350px wide photo loading on a 1.5x screen, 1800px wide on 2x etc, in order for them to look physically the same to the viewer.

The code will look something like this:

<img srcset="my-image-900w.jpg,
             my-image-1350w.jpg 1.5x,
             my-image-1800w.jpg 2x"
     src="my-image-900w.jpg" alt="how would you describe it?">

If I had a device with a 2x pixel density screen, it would load only my-image-1800w.jpg and ignore the others.

For deciding what widths to choose I would match the css media-queries. Then so long as you have an option for small screens (say 300w) you should be all set. Personally I use boostrap as a framework, so I use the same widths to load my responsive images, plus a portfolio size for screens larger than 2000 pixels.

Hope this helps!

f.khantsis
  • 3,256
  • 5
  • 50
  • 67
Riley Thornton
  • 21
  • 3
  • And how could I make it loading the 1280.jpg (from the question) for a device width of 1280 pixels on 2x pixel AND 1x pixel divices as well ? I found no way to combine the width AND the pixel density condition. – Radon8472 Oct 15 '21 at 15:53