Responsive images - Media folder - some images not resized

I’m following the Responsive images cookbook

Looking at the images in the Media folder, I can see that they have all been resized and Webp images made.

But some images are being resized, webp versions made – AND are in the Media folder the original size, untouched. See screen grab and last file.

I don’t know why this is happening and it makes me nervous that these original large files might be used on the website.

Any ideas? Here’s my code

<ul class="portfolio">
	<?php foreach (page('portfolio')->children()->listed() as $project): ?>
	<li>
		<a href="<?= $project->url() ?>">
			<?php if ($image = $project->portfolio_thumbnail()->toFile()): ?>

				<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() ?>"
						srcset="<?= $image->srcset('folio-thumbnails') ?>"
						sizes="(max-width: 1023px) 100vw, (max-width: 2240px) 25vw, 480px"
						width="<?= $image->width() ?>"
						height="<?= $image->height() ?>"
					>
				</picture>

			<?php endif ?>
			<p><?= $project->heading() ?><br><span class="project-title"><?= $project->subheading() ?></span></p>
		</a>
	</li>
	<?php endforeach ?>
</ul>
<?php

return [
	'debug'  => false,


	'thumbs' => [
		'srcsets' => [
			'case-study-images' => [
				'800w'  => ['width' => 800],
				'1200w'  => ['width' => 1200],
				'1600w'  => ['width' => 1600],
				'2112w' => ['width' => 2112],
				'3168w' => ['width' => 3168],
				'4224w' => ['width' => 4224]
			],

			'case-study-images-webp' => [
				'800w'  => ['width' => 800, 'format' => 'webp'],
				'1200w'  => ['width' => 1200, 'format' => 'webp'],
				'1600w'  => ['width' => 1600, 'format' => 'webp'],
				'2112w' => ['width' => 2112, 'format' => 'webp'],
				'3168w' => ['width' => 3168, 'format' => 'webp'],
				'4224w' => ['width' => 4224, 'format' => 'webp']
			],

			'folio-thumbnails' => [
				'560w'  => ['width' => 560],
				'1120w'  => ['width' => 1120],
				'2046w'  => ['width' => 2046]
			],

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

Thanks for any help!

Okay, I’ve deleted the contents of the media folder and remade all the responsive images – and everything is fine.

Not sure what happened but it has been resolved.

Having checked the Media folder again, again there is the occasional image that is not being resized. The original image, from the Contents folder, is appearing in the Media folder.

I’m not sure why this is happening. Even if the visitors browser doesn’t support srcset, the image should be resized. It’s also odd, that it might just be one image on a page, with the other images being resized.

<picture>
	<source
		srcset="<?= $file->srcset('case-study-images-webp') ?>"
		sizes="(max-width: 2240px) 100vw, 2112px"
		type="image/webp"
	>
	
	<img
		loading="lazy"
		alt="<?= $file->alt() ?>"
		class="<?= $file->border() ?>"
		src="<?= $file->resize(2112)->url() ?>"
		srcset="<?= $file->srcset('case-study-images') ?>"
		sizes="(max-width: 2240px) 100vw, 2112px"
		width="<?= $file->width() ?>"
		height="<?= $file->height() ?>"
	>
</picture>
<?php

return [
	'debug'  => false,


	'thumbs' => [
		'srcsets' => [
			'case-study-images' => [
				'800w'  => ['width' => 800],
				'1200w'  => ['width' => 1200],
				'1600w'  => ['width' => 1600],
				'2112w' => ['width' => 2112],
				'3168w' => ['width' => 3168],
				'4224w' => ['width' => 4224]
			],

			'case-study-images-webp' => [
				'800w'  => ['width' => 800, 'format' => 'webp'],
				'1200w'  => ['width' => 1200, 'format' => 'webp'],
				'1600w'  => ['width' => 1600, 'format' => 'webp'],
				'2112w' => ['width' => 2112, 'format' => 'webp'],
				'3168w' => ['width' => 3168, 'format' => 'webp'],
				'4224w' => ['width' => 4224, 'format' => 'webp']
			],

			'folio-thumbnails' => [
				'560w'  => ['width' => 560],
				'1120w'  => ['width' => 1120],
				'2046w'  => ['width' => 2046]
			],

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

See last file:

Screenshot 2024-06-10 at 11.07.35 AM

Whenever you upload a file to a page via the Panel, the file is uploaded to the content folder. However, as soon as the URL of the file is called in the browser, the file is copied to the media folder.

But why is this file/image being called in the browser (and therefore appearing in the media folder)?

If the browser supports srcset then a resized file will be called. And if the browser doesn’t support srcset then the image should be resized to 2112px and have 2112x in the file name.

Could it be that it used in some other context, or that you tested something? In any case, it doesn’t really matter if it just sits there?

Hi. I’m concerned there is something going wrong.

I used the Total Validator app to create all the images, in the media folder: responsive sizes and webp formats (Create all thumbnails in one go (not on fly)?). I can see that all the images were created at the same time.

But the handful of original images copied into the media folder that have not been resized were created at different later times. Which suggests a visitors browser was calling these images and ignoring the Kirby thumbs?

What’s strange is that this might just be one or two images on a page that has ten images.

Sorting the files into date order, the first nine images have been created at a different time and are unsized, original, large, files:

I’ve just looked at the visitor analytics. It reports that no one has visited the two pages, since the 9 June, that have the original images in the media folder. Which if true leads to the question, what event is occurring for these original images to be copied into the media folder? A bot crawling around?

Sure you never clicked the open icon in an image view in the panel? There is always a reason…

No, I don’t really use the panel, and I know I didn’t use it today at 1:43 in the morning. or yesterday at 2:55am.

I don’t see the problem, maybe you have old links to the full version lying around somewhere on the web.

I’d be very surprised if there are any old links to the full images anywhere on the web.

It seems that some visitors are calling the original, large files, rather than the resized, smaller files? And that’s a problem because the performance/speed will be slow for them.

Thanks for your help, I’ll keep my eye on it and see if there is pattern, cos’ at the moment it doesn’t make sense.

Hi Mark,

Have you checked that there are sufficient resources allocated for resizing (e.g. max_execution_time, memory_limit)?

It can be pretty resource intensive to produce a lot of different images, especially if there are some large sizes in there and the original is large too. Perhaps worth a look?

Hi Mike

I’ve already created all the different images (sizes and formats) in one go, using the Total Validator tool. Create all thumbnails in one go (not on fly)?

As these resources already exist, in the media folder, there shouldn’t be any need for any visitor to have to produce the images? Hence I don’t think this could be an issue with max_execution_time, memory_limit?

The issue is continuing.

I’ve already made all of the resized images and Webp images, and they are in the media folder on the server. For example this one particular image:

But today, the original un-resized image has been call and copied into the media folder (see last file).

The odd thing is, according to Plausible Analytics no one has visited the website today.

I obviously don’t want visitors browsers to be displaying the original, uncompressed, large images.

Is my responsive image code not working?

<ul class="portfolio">
	<?php foreach ($page->services_projects()->toPages() as $project): ?>
	<li>
		<a href="<?= $project->url() ?>">
			<?php if ($image = $project->portfolio_thumbnail()->toFile()): ?>

				<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() ?>"
						srcset="<?= $image->srcset('folio-thumbnails') ?>"
						sizes="(max-width: 1023px) 100vw, (max-width: 2240px) 25vw, 480px"
						width="<?= $image->width() ?>"
						height="<?= $image->height() ?>"
					>
				</picture>
				
			<?php endif ?>
			<p><?= $project->heading() ?><br><span class="project-title"><?= $project->subheading() ?></span></p>
		</a>
	</li>
	<?php endforeach ?>
</ul>
<?php

return [
	'debug'  => false,


	'thumbs' => [
		'srcsets' => [
			'case-study-images' => [
				'800w'  => ['width' => 800],
				'1200w'  => ['width' => 1200],
				'1600w'  => ['width' => 1600],
				'2112w' => ['width' => 2112],
				'3168w' => ['width' => 3168],
				'4224w' => ['width' => 4224]
			],

			'case-study-images-webp' => [
				'800w'  => ['width' => 800, 'format' => 'webp'],
				'1200w'  => ['width' => 1200, 'format' => 'webp'],
				'1600w'  => ['width' => 1600, 'format' => 'webp'],
				'2112w' => ['width' => 2112, 'format' => 'webp'],
				'3168w' => ['width' => 3168, 'format' => 'webp'],
				'4224w' => ['width' => 4224, 'format' => 'webp']
			],

			'folio-thumbnails' => [
				'560w'  => ['width' => 560],
				'1120w'  => ['width' => 1120],
				'2046w'  => ['width' => 2046]
			],

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

Ah ok - sorry I misunderstood, I thought non-resized images were appearing in your media folder as part of the thumb creation process.

Non-resized images are appearing in the media folder. Despite the resized images/thumbs already being in the media folder.

Non-resized images are appearing in the media folder – presumably this means a visitors browser is using these non-resized, non-compressed, large files. Which presumably means my thumb creation code is wrong, or not working for all visitors?

I keep staring at the code, but can’t see what it wrong with it.

There is nothing wrong with your code. However, anyone can get at the full-size image by modifying the url to the image, say you have

https://your-website.com/media/pages/parent/child/8ac4c0c084-1717517006/culture-crisis-services-2112x.jpg

And I remove the -2112x bit, I get the original image.

Okay… not sure why anyone would want to do that? … are you suggesting that another website is hotlinking to my images?

Access does not have to come from a physical visitor. If the media folder is accessible to search engines, the images can also be crawled without visiting the website. You can use Google’s image search to do this.

In this example, an image is displayed in high resolution:

… but scaled when the website is visited:

That’s for sure, but the website in questions doesn’t have any links to the full-size images (at least SEO-Spider didn’t find any), and that’s why @Mark_E is wondering why the images end up in that folder in the first place.

As I already explained above, the full-size images are copied from the content folder to the media folder when you open a link to that image, which can happen when

  1. You link to the full-size image anywhere in your code (and only then can crawlers get to them)
  2. You open the full-size image via the image view in the Panel
  3. The content folder is accessible (shouldn’t be the case if the standard .htaccess that comes with the kits is used), this is not the case for the website in question
  4. Outdated links to the full-size images are used anywhere on the web
  5. You manipulate the thumb links as outlined above

Not aware of any other ways this can happen.

If the thumb’s engine doesn’t work or is not available, in former versions of Kirby you would end up with the full-sized image in the media folder, but it would still have the thumb marker in the filename. Since Kirby 4 you should now get an error instead and no thumbs created.