Picturefill without src attribute?

Question

Just some beginner's questions around the Picturefill polyfill:

I've noticed a short flicker in Firefox (33) and Safari (7.1) when I use a src attribute. These Browsers make an extra HTTP request. This is my code:

<img src="images/300x180-1.jpg"
    alt="My alt text"
    sizes="(min-width: 768px) 364px, 100vw"
    srcset="images/364x220@2x-1.jpg 728w, images/364x220-1.jpg 364w" />

Shouldn't Picturefill prevent the browser from downloading unnecessary images?
Are there any downsides from removing the src attribute? (I'm aware that people with JS turned off or a browser without native responsive images won't see any image at all, just the alt text)
What impact does a missing src attribute have on SEO?

If you do not need an image, than do not use `` tag, use something else or add content after dom load. — skobaljic, Nov 10 '14 at 12:58
But you said you wanted to remove img `src` attribute? Why do you need an image than? — skobaljic, Nov 10 '14 at 16:25

alexander farkas · Accepted Answer · 2015-07-28T14:02:19.753

You can only abort image downloading in chrome and ie, not in ff or safari.
The image without src isn't seen by the preload parser, the src attribute is required by spec (you mentioned JS off already)

About your image markup in general. The difference between the 300 and the 364 is quite small. Don't think it actually gives you that big difference. However in case you want to keep it, it would be also great to add it to the srcset, so that the browser knows its properties (and work with it, if screen is very small or bandwidth is low).

<img src="images/300x180-1.jpg"
    alt="My alt text"
    sizes="(min-width: 768px) 364px, 100vw"
    srcset="images/364x220@2x-1.jpg 728w, images/364x220-1.jpg 364w, images/300x180-1.jpg 300w" />

You can also try to use respimage, which trys to abort image downloads in IE, and waits a little bit longer to change source in safari/firefox (implementing the low quality image placeholder technique). Additionally it trys to save bandwidth by using a smarter resource selection.

Thanks for your answer. I've found a nice blog post after posting my question here: http://www.filamentgroup.com/lab/to-picturefill.html There is good roundup on `src` as fallback: see the "Any drawbacks?" section. — gregory, Nov 12 '14 at 16:02

score 0 · Answer 2 · edited Apr 13 '17 at 12:33

0

What impact does a missing src attribute have on SEO?

Testing using Google's Fetch As Google tool, it can be seen that although by default, Google will not index files referenced in the srcset attribute, it does index them if Picturefill is used.

I've written a more comprehensive answer on Stack Exchange Webmasters here

edited Apr 13 '17 at 12:33

Community

1
1

answered Jul 17 '15 at 11:32

Undistraction

42,754
56
195
331

This has changed since 2013/2014. See: https://github.com/scottjehl/picturefill/issues/549 Please change or delete your answer. – alexander farkas Jul 28 '15 at 14:03
@alexanderfarkas Updated. – Undistraction Jul 28 '15 at 16:52

Picturefill without src attribute?

2 Answers2