Add an 'empty image' option for responsive image

This has the potential to have massive, huge, epic performance impact for Drupal on mobile devices. Many saved requests, kilobytes or even megabytes… means that this patch can potentially bring a site from loading in 20 seconds on a mobile device to 2 seconds. It depends on the site of course.

Increasing priority — even though that's likely to be contentious. This issue deserves more attention.

Pretty sweet, huh. Attiks is the man.

Back in March, I presented this base64 empty image idea to him and by the next day it was in 7.x-dev. Tested it and worked perfectly from the start. I'd be more than happy to test it on D8 if it gets patched in.

On mobile, there are times when certain images are just not necessary and using this method saves an http request as well as the image download. I've used this method in production and it does work as you'd imagine for increasing performance.

I'm sure the front-end geniuses will come up with an answer on whether or not there's a better way to handle this.

+1 to that as well.

Patch applied fine. Added picture mapping for 1x mobile and 1x narrow and large image style for 1x wide. Image replacement occurred with no issues/console errors. (see screenshots). Tested in Chrome/Firefox on Mac

#5: i1999312-5.patch queued for re-testing.

Nice idea. Not really a feature, this is a straight performance improvement.

Does this need a reroll?

After seeing #9 could someone clarify if the display:none; CSS code remains, or is it removed in favour of displaying a 1px x 1px empty image?

If it remains then good.

But if it is removed then not so good because this is more the expected behaviour of visibility:hidden; rather than display:none;.

Modification of the patch #5.
Modification of the image_cache functions.

I also saw that in patch #5 picture tag was converted to span. Not sure why this was done, but i used the picture tag in this patch.

We should be using span elements, not picture elements. The picture element has not yet been standardized and implemented in browsers. It looks highly likely that will happen, but at this point we should be using a polyfill based on spans rather than picture elements. Otherwise if the picture element changes, then we have code written against the old version of the standard, which is bad.

As the issue linked in #5 explains, if picture is standardized and implemented prior to d8 launch, we can switch to the picture element. Otherwise that's a switch that could be considered for 8.1 or beyond.

Removing 'revisit' tag - could happen any time I think?

Rerolled. Renamed the define and _picture_image_style_url() to _responsive_image_image_style_url().

21: 1999312-21.patch queued for re-testing.

1. +++ b/core/modules/responsive_image/lib/Drupal/responsive_image/ResponsiveImageMappingFormController.php
   @@ -71,6 +71,7 @@ public function form(array $form, array &$form_state) {
   +    $image_styles[RESPONSIVE_IMAGE_EMPTY_IMAGE] = t('- empty image -');
   

   $this->t()

2. +++ b/core/modules/responsive_image/responsive_image.module
   @@ -8,6 +8,8 @@
   +define('RESPONSIVE_IMAGE_EMPTY_IMAGE', '_empty image_');
   

   Why are we using define() and not const?

3. +++ b/core/modules/responsive_image/responsive_image.module
   @@ -353,7 +355,25 @@ function responsive_image_get_image_dimensions($variables) {
   +    return 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
   

   This could probably use a comment.

Re-rolled patch with tim.plunket's feedback incorporated

Committed to 8.x. Thank you.