Search code examples
htmlimagesrcpicturefillsrcset

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

I have been using the following markup for a while:

<img src="lowresImage.jpg" srcset="lowresImage.jpg, highresImage.jpg 2x" alt="Lorem Ipsum">

This works quite perfectly with picturefill (http://scottjehl.github.io/picturefill/) and doesn't give any cross-client issues.

I was just wondering if anyone can confirm that this is valid markup to support the use of inline retina images. I use this for the following reasons:

  1. The image is part of the content, so no background image can be used.
  2. Google does not index the srcset-attribute, but it does index the src-attribute, which is why I use both. So this is mainly an SEO consideration.
  3. As far as I have tested this, I haven't found the browser sending double HTTP-requests. It requests the src-image on normal desktops and the srcset-retina (2x) image on retina displays.

I can hardly find any info on the use of src together with srcset and picturefill in relation to SEO and retina-display. So if there are no flaws in this markup, then I hope more people can use this approach to responsive and SEO-friendly images.

Solution

  • 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/