Should the width be the pixel width of the original source image (in my case mostly 3240px – but not always), or the max-width the images will be used at (in my case 2112px)?
Does it matter that not all my images are the same physical width? Does it matter that not all y images have the same width/height ratio?
The height of my images varies. It is never the same as the width. But in all the example in the above Cookbook the height is given the same as the width. Why is this? My images are not square.
Okay, you wrote: No, the thumb resulting from resize(2112) is not square, but keeps the original ratio.
But that doesn’t answer:
Should the width be the pixel width of the original source image (in my case mostly 3240px – but not always), or the max-width the images will be used at (in my case 2112px)?
Does it matter that not all my images are the same physical width?
Does it matter that not all my images have the same width/height ratio?
Out of curiosity why is the height given as the same as the width? Should I do the same (even though most of my images are 2:1, but not all)
Is the width and height setting the src image or is this something to do with the srcset images?
What should I put as the width? The pixel width of the original source image (in my case mostly 3240px – but not always), or the max-width the images will be used at (in my case 2112px)? Or the width of the biggest thumbnail generated by the srcset? or does it not matter? Does it make any difference what the width is?
This doesn’t make sense, because this will result in a wrong ratio of width and height.
width() and height() are methods that return the width and height of the file version that results from $file->resize(2112).
The important part of adding width and height is not the absolute numbers but the right ratio of width and height. I already mentioned this in the other thread, please read up on this in the Google docs: Optimize Cumulative Layout Shift
And to make a long story short, I’d do it like this:
<?php
// call this method only once, store result in variable
$thumb = $file->resize(1000);
?>
<img
alt="<?= $file->alt() ?>"
class="<?= $file->border() ?>"
src="<?= $thumb->url() ?>"
srcset="<?= $file->srcset('casestudyimages') ?>"
sizes="(max-width: 2112px) 100vw,
2112px"
width="<?= $thumb->width() ?>"
height="<?= $thumb->height() ?>"
>
Thanks for the link to the Google docs. So this is about ensuring “that the browser can allocate the correct amount of space in the document while the image is loading.” “Knowing the aspect ratio allows the browser to calculate and reserve sufficient space for the height and associated area.”
Is the resize figure always the width measurement?
So in effect this code is saying if the image width is resized to 2112px work out the width.
And if the width is resized to 2112px work out the height (from the aspect ratio of the original source file)?
What numbers should we put in the width and height? The width we want the fallback src, the width of the original source image, the width of the largest thumbnail?
Presumably what ever number we put in the width and height, they should be the same?
This is getting a bit repetitive, I must really ask you to read the documentation, otherwise I end up repeating everything here all over again. There is a lot to learn and its not always easy, but this forum is not a replacement for the documentation.
The first argument you pass to the resize method is the width of the resulting thumbnail (or Fileversion object), see examples above. You can also resize by height, if you want, for example this $file->resize(null, 500), or by width and height, read the documentation of the resize method! But a file resized with resize()` will always preserve its aspect ratio.
You can also use the width and height of the original image, it doesn’t matter, again, the important thing here is to get the aspect ratio right. You cannot use the dimensions of the original image, though, if your thumbnail has other dimensions than the original image, in case of a cropped image, e.g. $file->crop(500, 500).
This is not resizing the width to 1800px AND the height to 1800px (i.e. changing the aspect ratio).
This is saying:
width= if the image is resized to width 1800px work out the width (= 1800px)
height= if the image is resized to width 1800px work out the height (maintaining the aspect ratio of the image)
The numbers in the code could be anything. They could be 10 or 100000000. It doesn’t matter. This bit of code is simply there to ensure “that the browser can allocate the correct amount of space in the document while the image is loading.” “Knowing the aspect ratio allows the browser to calculate and reserve sufficient space for the height and associated area.”
I’m still unsure why we are using the resize method to provide width and height of our images to the browser. Can’t we just do the following – and then the browser has less to process (it doesn’t have to calculate the resize)?