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!