"Mozilla splash page" assessment


(Chris Mills) #185

Yes, this is because of the max-width: 100% CSS.

  1. The srcset provides a hint to the browser as to what image would be most suitable to load based on the browser’s viewport width, device resolution, etc. Those “w” values are not exact image dimensions - they are hints as to the likely size of the image slot at different viewports.
  2. The browser then makes a choice and loads the chosen image.
  3. Once loaded, the image will be shown at it’s “true” size, unless some CSS comes into play and changes what the display size ends up being. In this case, max-width is making the images’ width be constrained to 100% of the width of their parent elements, so they are not shown at their true size.

Does that help?


(Csarami) #186

I did the panda image like this:

<picture>
                <source media="(max-width: 599px)" srcset="originals/red-panda-CloseShut.jpg">
                <source media="(min-width: 600px)" srcset="originals/red-panda.jpg">
                <img src="originals/red-panda.jpg" alt="panda">
            </picture>

But I see this one works ( copied from solution)

 <picture>
          <source media="(max-width: 600px)" srcset="red-panda-portrait-small.jpg">
          <img src="red-panda-landscape.jpg" alt="a red panda">
        </picture>

It seems the latter one is more efficient. Isn’t it?


(Chris Mills) #187

Yeah — in this case you don’t really need two <source> elements, as the image referenced in the <img src=""> is loaded by default if the media query test does not pass.

The smaller image is only loaded if the viewport width is 600px or less.