'srcSet attribute usage

Is the img attribute srcSet supported perfectly by Chrome or Firefox?

I have tried to test srcSet, but I found Chrome and Firefox will show different image under the same conditions.

    <img 
        src="./0.png"
        srcSet="./1.png 100w,
                ./2.png 359w,
                ./3.png 600w"
        sizes="(max-width: 576px) 100px,
               (max-width: 768px) 359px,
               600px"
        alt="" 
    />

I tried to resize from small to big width.

  1. Chrome

It will show 1.png when width is smaller than 576px.

After width is more than 576px, it skipped 2.png and directly displayed 3.png.

Why?

  1. Firefox

It will show 2.png when width is smaller than 576px.

After width is more than 576px, it directly show 3.png.

1.png is not displayed anymore.

Why?

htmlresponsive-imagessrcset


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions