My website has several case studies. The case studies have a lot of images. They appear full width, in a single column. The column has a max-width of 2112px.
I have a snippet called image.php
<img alt="<?= $file->alt() ?>" class="<?= $file->border() ?>" src="<?= $file->url() ?>" srcset="<?= $file->srcset( [ '600w' => ['width' => 600], '1024w' => ['width' => 1024], '2112w' => ['width' => 2112], ] )?>" width="<?= $file->resize(2112)->width() ?>" height="<?= $file->resize(2112)->height() ?>" > <?php if ($file->caption()->isNotEmpty()): ?> <p class="caption"><?= $file->caption() ?></p> <?php endif ?>
I can see in the browsers Dev Tools that at viewport 600px and 1024px that different, smaller file size, images are being used. So it works! But…
My original files are 3240px wide. Taking one file as an example. The original file size is 179kb. But the 2112px version is considerably larger at 461kb. This can’t be right?
On a large monitor, with a high Device Pixel Ratio, like a 24 inch iMac, the most appropriate image file would be the original images 3240px wide. The 2112 images won’t look so good on a screen with a DPR of 2. But how do I call in my 3240 images?
What does this bit of the code do?
width="<?= $file->resize(2112)->width() ?>" height="<?= $file->resize(2112)->height() ?>"