Responsive images aspect ratio

So to answer my own question, I edited the plugin.php file on line 453, inside the check for the aspect ratio and the image having a width and height, and tweaked the image src and srcset to use an svg as follows:

$svg = "data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 {$img_width} {$img_height}'%3E%3C/svg%3E";
				$img->setAttribute( 'src', $svg );
				$img->setAttribute( 'srcset', "$svg {$img_width}w");

I also had to move up line 471 where the src is set, so it doesn’t overwrite the above
$img->setAttribute( 'src', $this->src_placeholder );

Anyway, just wondering if this might be something you would consider adding ??

Hi @lozula,

thanks for suggesting that pointing out that possibility!
Does your modification fix the issue on your site?

Best,
Florian

Hey @florianbrinkmann – it does. Even better, it entirely negates the need for the aspect ratio plugin in my testing. You can browse my site and see.

It will probably need a slightly more robust implementation than what I’ve put in place to handle things like images with no width/height attributes. I’m handling it on my site by using getimagesize, but this only works quickly for locally hosted images.

In addition, I had to tweak the svg slightly to encode it, as the srcset throws errors otherwise. This is detailed in the comments of the url I linked to, but the actual svg should be:

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20{$img_width}%20{$img_height}%22%3E%3C%2Fsvg%3E

Whilst I’m here, I also wondered if it’s possible to have an option to strip the sizes and srcset from the generated noscript tag for images. For sites with a large number of sizes set, on long posts with a lot of image this can add up to a lot of extra bytes for a fallback case.

Hi @lozula,

thanks, that sounds great! I will take a closer look at it.

Whilst I’m here, I also wondered if it’s possible to have an option to strip the sizes and srcset from the generated noscript tag for images. For sites with a large number of sizes set, on long posts with a lot of image this can add up to a lot of extra bytes for a fallback case.

Hm, maybe I can add a filter for that — I would not want to add a dedicated option to the settings.

Best,
Florian

A filter would be great ?? Thanks for your time and a great plugin!

Hi @lozula,

I finally found the time to work on a new release and check the solution you proposed: works great!

Could you try the 7.0.0 beta from GitHub (https://github.com/florianbrinkmann/lazy-loading-responsive-images/releases/tag/v7.0.0-beta.2 – the lazy-loading-responsive-images.zip) and test if it works?

It contains the change with the inline SVG and the new lazy_loader_attrs_to_strip_from_fallback_elem filter that you can pass an array of HTML attributes to. Those attributes will be stripped from the fallback inside the noscript.

Example:

add_filter( 'lazy_loader_attrs_to_strip_from_fallback_elem', function() {
	return [ 'srcset', 'sizes' ];
} );

Thanks!
Florian

Hey Florian!

Thanks for taking the time to implement this. I tried it out, but the srcset svg isn’t using the html tags so the browser doesn’t recognise it. For some reason browsers don’t mind characters in the src tag but don’t like them in the srcset. An example that works is:

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20{$img_width}%20{$img_height}%22%3E%3C%2Fsvg%3E

The difference is that in the current beta it outputs the following svg in the srcset:

data:image/svg+xml,%3Csvg xmlns=’https://www.w3.org/2000/svg’ viewBox=’0 0 800 533’%3E%3C/svg%3E 800w

But to work it needs to look as follows:

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202000%201333%22%3E%3C%2Fsvg%3E 2000w

Hope this helps ??

Laurence

In your code if you just change line 464 of plugin.php from:

$svg_placeholder = "data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 {$img_width} {$img_height}'%3E%3C/svg%3E";

to

$svg_placeholder = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20{$img_width}%20{$img_height}%22%3E%3C%2Fsvg%3E";

that should do it ??

Hi @lozula,

oh, thanks! Changed it to the version you proposed only for srcset to save a few characters in the src ??

I released a beta 3 with that fix, would be great if you could give it a try: https://github.com/florianbrinkmann/lazy-loading-responsive-images/releases/tag/v7.0.0-beta.3

Thanks!
Florian

Hi @lozula,

I released Lazy Loader 7.0.0 that contains the changes. If you experience any issues with that, please feel free to add it to the topic here ?? I will set this to resolved for now.

Best,
Florian

Sorry for the slow response, but can confirm this does seem to work ??

Thanks!

No problem! Happy to hear that it works now ??

Best,
Florian

i`m still getting this error…

and i have the latest versions of WP and this plugin.

any help ?

Hi @alios24,

sorry, I missed your reply. Could you post a link to the website where you have the layout shift, if that is still an issue?

Best,
Florian