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?

Answer 1

1. You can only abort image downloading in chrome and ie, not in ff or safari.
2. 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.