What Is an Srcset Attribute in Img Tag and How to Use It

How to use srcset image attribute?

According to the w3c, the srcset attribute is still in draft status. That means that it is not yet recommended to use it because the specification can still change and web browsers are not expected to implement it already.

The scrset attribute is now supported by most browsers. But low-bandwidth and high-bandwidth are not part of the specification. Likely because it's hard to find an objective definition of "low" and "high" bandwidth which will still be reasonable in ten years. So you can not expect these to have any effect at all.

Img srcset and sizes attributes

The image is 1152 pixels wide, but you tell the browser it is 1500 pixels wide (1500w).
The browser then determines the image's density based on what you told it, and corrects the image's intrinsic dimensions accordingly, but since it used the wrong value for the density calculations, the image occupies 76.8% of the viewport width rather than 100% of it.

To change that, you can provide the browser with a larger resource, or tell it that the resource is 1152w.

Is it valid to use both src and srcset on an image-tag with picturefill?

Yes it's valid. The src is used as a fallback if the browser doesn't support srcset.

However if you are using it just for retina stuff you don't really need to use picturefill. I tend to just let it degrade back to the normal src if the browser doesn't support srcset.

The srcset should just be providing alternative sizes and resolutions to the src image which is why google won't read it.

I've been using it like this for a few months and haven't noticed any issues.

On a side note if you have a larger image cached it will use that instead of the smaller one. It's pretty clever and cool.

Here's a few good articles on srcset.

https://ericportis.com/posts/2014/srcset-sizes/

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

---

Related Topics