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.
The Specification says:
If child has a
src
attribute whose value is not the empty string and source set does not contain an image source with a density descriptor value of 1, and no image source with a width descriptor, append child'ssrc
attribute value to source set.
Which means you can omit the 1x
source if it’s the same as the src
attribute, but you can not do that if you are using width descriptors.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With