Responsive images width and height

Following the instructions on this page

I can see I need to include the width and height. I now have the following code for my responsive image:

<img
	alt="<?= $file->alt() ?>"
	class="<?= $file->border() ?>"
	src="<?= $file->url() ?>" 

	srcset="<?= $file->srcset('casestudyimages') ?>"

	sizes="(max-width: 2112px) 100vw,
		  2112px"

	width="<?= $file->resize(2112)->width() ?>"
	height="<?= $file->resize(2112)->height() ?>"
>

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.

I have already explained this to you in another thread: Responsive images questions - #3 by Mark_E

I think you should just try it out and view the result in dev tools, maybe that makes it clearer.

An original image 5000x4000 that you resize to 2000 px width will have the dimensions 2000x1600. Resize does not crop, but keeps the original ratio.

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)

Thank you

Please just try it out!

As I already said above, given an original image 5000x4000 that you resize

$thumb = $image->resize(2000);
echo $thumb->width(); // 2000
echo $thumb->height(); // 1600

Will have a width of 2000px and a height of 1600px, not a height of 2000px.

Yeah, it all seems to work: the width/height ratios seem to be fine. I just don’t ‘get it’.

width="<?= $file->resize(2112)->width() ?>"
height="<?= $file->resize(2112)->height() ?>"

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?

I’ve just tried

width=<?= $file->resize(200)->width() ?>|
height=<?= $file->resize(2112)->height() ?>|

and it doesn’t appear to make any difference to what is displayed – which begs the question, do we need this bit of code?

Does it matter that not all my images are the same physical width? On first check it doesn’t seem to

Does it matter that not all my images have the same width/height ratio? On first check it doesn’t seem to.

I still can’t fathom out why in the examples, the height is given as the same as the width?

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: Оптимизация совокупного смещения макета  |  Articles  |  web.dev

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.”

width="<?= $file->resize(2112)->width() ?>"
height="<?= $file->resize(2112)->height() ?>"

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)?

Could we simply write:

width="<?= $file->width() ?>"
height="<?= $file->height() ?>"

Why do we have to resize the original source file? Especially as this resized image will not be used by 95% of browsers that support srcset.

or write

width="10"
height="10"

The example Google give is (or is this really for square images?):

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

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?

width=“<?= $file->resize(10)->width() ?>”
height=“<?= $file->resize(10)->height() ?>”

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).

Okay, if it helps anyone else, this is what I think I’ve learnt (but this is equally more of a question than a statement!)

The first example on the Responsive Image Cookbook that uses width and height:

width="<?= $image->resize(1800)->width() ?>"
height="<?= $image->resize(1800)->height() ?>"

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)?

width="<?= $file->width() ?>"
height="<?= $file->height() ?>"

As ever, thank you

Already answered above, quoting myself: