When using a responsive image set with <img>
without breakpoints (i.e. without the sizes
attribute) you typically provide several versions of the same image in different resolution which you then define in the srcset
attribute using the pixel-density syntax, e.g. 1x
, 2x
, 3x
However, usually the 1x
version of the image is just the same image that is already defined in the src
attribute, so it's a bit redundant. Thus I am wondering - is defining the 1x
version of an <img>
in the srcset
parameter really necessary/mandatory?
When using only
<img src="http://placehold.it/350x150" srcset="http://placehold.it/700x300 2x">
instead of
<img src="http://placehold.it/350x150" srcset="http://placehold.it/350x150 1x, http://placehold.it/700x300 2x">
then at least FireFox will properly display the 350x150
image and as soon as the zoom level/dppx is > 1
it will use the 700x300
image.
Omitting the 1x definition in the srcset
would save a few bytes, especially on a page with a large thumbnail gallery for example.