3

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.

Sylvareth
  • 135
  • 2
  • 8

3 Answers3

1

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/

Adam Hughes
  • 2,197
  • 20
  • 31
  • Thanks! That's pretty much the same reasoning I've had for a few months, but I was looking for a clear confirmation of this. Great articles as well! – Sylvareth Sep 03 '15 at 10:28
  • Yeah I've ran it though the validator and found no issues with it. I can't see any reason not to use it. It falls back really simply with no javascript help. – Adam Hughes Sep 03 '15 at 10:53
1

Yes it is, you should look at it as if it was the second (Default) font you use 'in case a browser does not support/find the font'.

Evert Arends
  • 142
  • 1
  • 11
1

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

Yes, it is. But picturefill doesn't recommend this, because it can result in a double download. (For more explanation see below.)

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.

Basically you don't have to worry about this. The googlebot is similar to an old headless webkit browser and executes JavaScript. Therefore googlebot is also polyfilled by picturefill. This means, if you don't use the src, but you have picturefill included your images will be indexed. (see also: https://github.com/scottjehl/picturefill/issues/549#issuecomment-122538689)

As far as I have tested this, I haven't found the browser sending double HTTP-requests.

I assume, that you have tested on iOS 8 or Chrome/Firefox for Android. These browser do support srcset. Or you have only tested with non supporting browsers on 1x devices. However the Android 4.x Stockbrowser does not support this feature and will result in a double download (see: http://caniuse.com/#search=srcset), if a 2x device is used.

My advice: Either use src, but do not include picturefill or omit src and use picturefill. In case you are only using srcset with x descriptor and not picture and no w descriptor, I would simply not include picturefill and only use src.

alexander farkas
  • 13,754
  • 4
  • 40
  • 41