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='http://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 🙂

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.

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

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=’http://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

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

Thanks!