Responsive images and SVG images

The CMS Questions
1

I think I have followed this cookbook on responsive images Responsive images | Kirby CMS

HTML:

<picture>
	<source
	srcset="<?= $image->srcset('folio-thumbnails-webp') ?>"
	sizes="(max-width: 1023px) 100vw, (max-width: 2240px) 25vw, 480px"
	type="image/webp"
	>

	<img
	loading="lazy"
	alt="<?= $image->alt() ?>"
	src="<?= $image->resize(1120)->url() ?>"
	width="<?= $image->width() ?>"
	height="<?= $image->height() ?>"
	>
</picture>

And my config code

	'thumbs' => [
		'srcsets' => [
			'folio-thumbnails-webp' => [
				'560w'  => ['width' => 560, 'format' => 'webp'],
				'1120w'  => ['width' => 1120, 'format' => 'webp'],
				'2046w' => ['width' => 2046, 'format' => 'webp']
			],
		]
	]

But how does this work with SVG images? I can see that only one size of SVG is in the media folder, so that’s good. But type="image/webp" is the wrong type.

This is the resulting source code for an SVG image

<picture>
	<source
	srcset="http://localhost:8888/current-site/media/pages/portfolio/xyz/8063f4bf33-1717576771/xyz-logo.svg 560w, http://localhost:8888/current-site/media/pages/portfolio/xyz/8063f4bf33-1717576771/xyz-logo.svg 1120w, http://localhost:8888/current-site/media/pages/portfolio/xyz/8063f4bf33-1717576771/xyz-logo.svg 2046w"
	sizes="(max-width: 1023px) 100vw, (max-width: 2240px) 25vw, 480px"
	type="image/webp"
	>

	<img
	loading="lazy"
	alt="XYZ logo"
	src="http://localhost:8888/current-site/media/pages/portfolio/xyz/8063f4bf33-1717576771/xyz-logo.svg"
	width="3240"
	height="1620"
	>
</picture>

So it looks like it will serve up different sizes of SVG and the type is webp – neither of which are true. For SVG images, do browsers ignore everything in the <source>?

2

SVG files are scalable by nature. Personally i would not feed thouse into srcset, but rather use something like SVGO to optimise them before uploading. Your thumbs rules in the config are set to webp, so what ever image type you feed into that, its going to try and convert it to webp.

You could use in if else statement based on the extension so that for all images except SVG, it runs them through src set, and if its an SVG just output an image tag in in there with a class on it to contol the SVGs scaling.

3

Hm, I’ve got case studies with lots of images. Some are png, jpg and svg. I was hoping to deal with them all together in the same way. (especially as I don’t understand what $file->extension() is or does)

srcset seems to work. I think browsers ignore srcset when the image is a SVG. I’ve run it through Total Validator and it hasn’t come back with any issues, but Chat GPT didn’t like the code.

4

$file→extension() literally just checks the image file extension in the content folder. So you can lean on that to do a php if else statement so if extension svg do this, if not do that.

It just makes no sense to try ratesterise a Vector image because by design it is already scalable.

With the picture tag and the source set entries, the first source tag inside the picture tag the browser can understand, the browser will render. The image tag at the bottom is a fallback for older browsers that dont understand the source tags. If all all fails the browser will spit that image tag at the bottom into the browser window.

5

I wonder if the responsive images code (Responsive images | Kirby CMS) is actually quite clever – at dealing with bitmap and scalable vector graphics:

The code doesn’t generate resized and renamed SVG images. So browsers ignore the <source> and serve up the SVG image defined in the <img>.

So, we don’t need to check file extensions and do different code for different image types.

6

You will see in the examples that it always checks for a specific image which is a JPG in this case:

if ($image = $page->image('sunflower-field.jpg'))
7

I believe we can use Responsive images | Kirby CMS for all image types without having to exclude SVG images from the responsive image code.

Texnixe wrote in 2023 that Kirby does not resize SVG files

So when the browser gets to the <source> code and can’t find the resized SVG images, it will ignore it and move on to the <img> code, which will contain the SVG.

I think ChatGPT’s linting is wrong – there is nothing incorrect about with my original code.