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!

Improve this question
2
  • stackoverflow.com/a/28368483/8047253 Commented Jan 17, 2018 at 14:21
  • thanks for the link Dirk but that doesn't provide what I'm looking for. Commented Jan 17, 2018 at 15:13

1 Answer 1

Reset to default
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!

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.