Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
#2348255: Provide option to use srcset and/or sizes attributes on img tag instead of the picture element allowed responsive images to use the img element when an entire picture element is not needed. However the source code generated through this solution leaves the src element on the img in addition to the sizes and srcset attributes. Because of this in older browsers that do not understand sizes and srcset without the use of Picturefill, the img defined in the src attribute will be downloaded as well as the file selected from srcset by Picturefill. This is bad for performance.
Proposed resolution
While the responsive image standard does require the src element, the Responsive Images Community Group and Picturefill both recommend leaving off the src element in order to avoid this double download. When support for responsive images in browsers is overwhelming, and Picturefill is no longer needed, it would be fine to have src there. We are not there yet in terms of browser support, and the src should be removed for now.
Remaining tasks
Fix code so src is not generated.
User interface changes
None.
API changes
None.
Data model changes
None.
Beta phase evaluation
| Issue category | Task because this is something that should be done for performance, but it was a known choice made in another issue, not necessarily a bug. |
|---|---|
| Issue priority | Major because this causes front-end performance problems. |
| Unfrozen changes | Unfrozen because it only changes markup |
| Prioritized changes | The main goal of this issue is performance. |
| Disruption | Not disruptive. |
| Comment | File | Size | Author |
|---|---|---|---|
| #21 | i2580695-21.patch | 2.29 KB | Jelle_S |
| #8 | Screen Shot 2015-10-05 at 11.57.00 PM.png | 365.69 KB | RainbowArray |
Comments
Comment #2
RainbowArrayQuick fix to prevent double downloads.
Comment #3
attiks CreditAttribution: attiks at Attiks commentedOne important point, if we output an image tag with a srcset attribute, we need a place to store the fallback, if we don't use the src attribute, where are we going to store it?
To quote the picturefill explanation, emphasis is mine. My experience is that most requests get cancelled, before they download anything.
Another reason not to do this is that the current output allows you to disable the picturefill library completely, will still being compatible with all devices. Global support is now at 65%, which will increase a lot because of the roll-out of both Win10 (Edge) and IOS9
Updated: typo, quote added
Comment #4
Wim LeersComment #6
RainbowArrayIn order to avoid the double download, we need to skip having the fallback image when we are only using the img element. The fallback only gets used in older browsers with JS disabled, and in that case, the fallback is alt text, as stated in the Picturefill gotchas: http://scottjehl.github.io/picturefill/#gotchas.
If we get to the point where we feel Picturefill can be disabled, then we should address the consequences of that when we do so. 65% is a lot, but definitely not enough to remove Picturefill or to optimize for the absence of Picturefill.
Comment #8
RainbowArrayManually tested this. Indeed this does create the right markup with srcset and sizes, but no src element.
Comment #9
joelpittetThis approach looks reasonable. I think the tests need some improvement because the fallback tests should have failed with this change. And we need to ensure the alt tag on the fallback is being explicitly tested for.
Screenshots to prove it's working wouldn't hurt.
Comment #10
joelpittetBeat me to the screenshots.
Comment #11
nhoizey CreditAttribution: nhoizey commentedI didn’t see anything about images SEO in the thread, sorry if I’m wrong.
If you remove the src, what will GoogleBot find for Google Images, for example?
Comment #12
attiks CreditAttribution: attiks at Attiks commented#11 It depends on the bot, googleBot evaluates javascript, but there are others that will only look at the html, and they will not see the src. Same problem is with HTML validators, they will complain about the missing src attribute.
Comment #13
nhoizey CreditAttribution: nhoizey commentedI know about the validator issue, but it bothers me much less.
I don't know how Googlebot reacts when it executes JS polyfills, that's my main concern. Do you know any good resource on this?
Comment #14
attiks CreditAttribution: attiks at Attiks commentedAFAIK the google bot will use the polyfill and wil be able to fetch the right image, see http://webmasters.stackexchange.com/questions/83251/does-google-index-im... on how to test this
Comment #15
RainbowArrayMaybe 8.1?
Comment #17
Wim LeersComment #19
Jelle_SSame as I said in #2481637: Use src in fallback image:
We have come to a point where all browsers that don't support the
<picture>tag also don't support srcset (http://caniuse.com/#search=srcset and http://caniuse.com/#search=picture).Which means that if #2343351: Make picture polyfill optional gets in, people can choose what to do with older browsers:
Leave picturefill on, might cause double downloads in browsers without support (might, because when picturefill kicks in it cancels the download).
Turn picturefill off, which will not cause double downloads.
Any thoughts on this? Maybe this is a good point to get this issue going again?
Comment #20
attiks CreditAttribution: attiks at Attiks commented#19 You're right, now is a good time to fix this and follow the standards and output the src on the image, not really sure what needs to be done
Comment #21
Jelle_SNot sure if we should do this in this issue or create an other one. Because #19 and #20 basically say the opposite of what this issue is about.
This issue was about removing the src attribute when we output only an
<img>tag instead of a<picture>tag.What #19 and #20 propose is replacing the srcset attribute with the src attribute for the fallback image in the
<picture>tag.Either way, the two issues cannot co-exits because they would contradict each other. We should be consistent whether we output an
<img>tag as a responsive image or a<picture>tag.Here's a patch that implements the changes in #19 and #20:
Comment #22
Jelle_SNvm my previous comment. the separate issue I was talking about acually already exists: #2481637: Use src in fallback image. I'll upload the patch there.
But what I said is still valid: These two issues cannot both be fixed. We either use the src attribute for responsive image fallbacks or we don't.
Comment #23
RainbowArrayLet's close this issue in favor of #2481637: Use src in fallback image. Yes, I raised concerns about the double downloads in the past. Right now that would only be a potential issue in IE11 and Opera Mini. That's certainly important, but since we are looking at the very least providing an option to disable Picturefill, I think it makes sense to move forward with going with src instead of srcset for the fallback at this time.