HTML5 srcset: 1x required?

When using an adaptive image with an <img> without breakpoints (i.e., without the sizes attribute), you usually provide several versions of the same image in different resolutions, which you then define in the srcset attribute using the pixel density syntax, for example 1x , 2x , 3x

However, usually the 1x version of an image is the same image that is already defined in the src attribute, so it is a bit redundant. So, I am wondering - does the 1x version of the <img> parameter in the srcset parameter really be srcset / required?

When using only

 <img src="http://placehold.it/350x150" srcset="http://placehold.it/700x300 2x"> 

instead

 <img src="http://placehold.it/350x150" srcset="http://placehold.it/350x150 1x, http://placehold.it/700x300 2x"> 

then at least FireFox will correctly display the 350x150 image, and as soon as the zoom level / dppx is > 1 , it will use the 700x300 image.

srcset 1x definition in srcset save several bytes, especially on a page with a large thumbnail gallery, for example.

+6
source share
1 answer

The specification says:

If the child has an src attribute whose value is not an empty string, and the source set does not contain an image source with a density descriptor value of 1 and without an image source with a width descriptor, add the child attribute src value to the original set.

This means that you can omit the 1x source if it matches the src attribute, but you cannot do this if you use width descriptors.

+7
source

All Articles