2

I'm asking this because in my Mac Retina and Google Chrome Developer Tools, I can't see the other images in my srcset.

<img srcset="image-415.jpg 415w,
             image-768.jpg 768w,
             image-992.jpg 992w,
             image-1440.jpg 1440w"
     src="image-1440.jpg" alt="Image">

It always brings the bigger image.

The tests that I'm doing are: - open the developer tools - resize my window near to the images resolution - refresh the page

UPDATE

Online example: Srcset

Italo Borges
  • 2,355
  • 5
  • 34
  • 45
  • This is the problem I am having too - did you find a solution? I seem to think it might be a caching issue... but I'm not sure and so am looking for a set method for checking if srcset/sizes is working. – Daniel Oct 03 '16 at 23:59
  • @Daniel, didn't find nothing. I started to think that the algorithm works fine, because the retina display everything looks like a mess hehe – Italo Borges Oct 08 '16 at 16:02

1 Answers1

2

Your page is unfortunately not online anymore…

First, your code misses a sizes attribute, which would tell the browser which width it should render the image. This is (now) a mandatory attribute when you use the w descriptor in srcset.

Browsers will however default to 100vw if the attribute is missing, which means the full width of the viewport.

On your Retina display, did you try to load the page in a browser with a viewport less than 700px wide, AFTER clearing the cache?

Nicolas Hoizey
  • 1,954
  • 1
  • 17
  • 24
  • Thanks for your answer Nicolas. I solve this, but don't remember anymore because was a long time ago! hehe. I could understand what you said very clear! – Italo Borges Apr 18 '17 at 18:17