Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 srcset: is 1x mandatory?

Tags:

html

srcset

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.

like image 915
fritzmg Avatar asked Dec 25 '15 21:12

fritzmg


1 Answers

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's src 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.

like image 72
ausi Avatar answered Sep 20 '22 19:09

ausi