Width, height

[janez72]

I've installed the latest version - you added image width and height.
I've had them added earlier (html), so now I have doubled data.
No, problem, I need to erase all manually added ones.

But, after checking html, I can see, that numbers don't match.
The numbers created are higher in all cases. But I can't find any patterns.
First, I thought it took the container measures, but this is not the case.

All images are responsive, in layout grids and put to fill or cover mode.
Also, all are limited with max. width attribute.

Some examples:
Added manually, real image numbers: width="560" height="250" - Added by WYSIYWG: width="683" height="305"
Real: width="140" height="50" - Added by WYSIYWG: width="221" height="79"
Real: width="140" height="50" - Added by WYSIYWG: width="218" height="78"

Last two examples show randomness of numbers - these two images are identical and in the same sized containers.

[crispy68]

Are you manipulating the images in any way within WB? I just did a test on a random image and it seems to work correctly.

[janez72]

I don't know, how would I manipulate images?

Full Width: true
Object fit: fill (mostly, sometimes "cover")
Opacity: 100
Lazy loading: yes
Maximum width: 140 (for instance)

Hover transform added: x and y are scaled to 1.1 in 0,5 sec

That''s it. Mostly webp images, but also some png - makes no difference.

Try it and see, if numbers are real. It's working, yes, but adding wrong numbers.

[crispy68]

I've added a couple of images and the size it is generating is based on the size in the default view. I've dragged them onto the workspace, into layout grids and it's working. For example, if you add it to say a photo gallery, there could be a few pixels different due to the fact of padding in the gallery.

Without you giving a step by step on how you inserted the image to get the results you are getting then I can't seem to produce what you are getting.

[janez72]

Yes, I found out the pattern.
It's taking measures out of image size inside program from default view (including empty space inside layout grid).
Even if you put in max. width, it's going over it, if the layout grid is wider.
I guess max. width should indicate real image original value and calculate the height (in responsive mode).

The image does not stretch over max. value, but empty space left and right is counted in image attributes.
This should be corrected, I believe.
Otherwise layout grids must be always the same size as images, which is impossible.

[Pablo]

What is, according to you, the correct size of the width and height attributes and where do I find more information about this?
I believe that the actual size does not matter as long as the aspect ratio is correct.
I have found a lot of conflicting information about this so that is why I decide to use the workspace size.

[janez72]

I also don't know, if there are any certain rules about the size.
But somehow seems logical, image attributes should be in original image sizes. No matter the workspace.
All images width and height numbers in Google image search are shown by their originar measures on pages, not the workspace.

I guess Google could say something on this matter.
But even if workspace is the basic, still, number should not go over max. width (if specified).
Or better - if there is max. width specified, WYSIWYG should calculate the height and take it as default size.

Because right now, numbers depend on my workspace inside a certain page.
I mostly don't work with 1920 px preview pages (to make it 1:1 with live version), so images automatically get wrong numbers.
I work with 1400 px, but the grids have the max values of 1920.

[crispy68]

The reason why the width and height is being added is for 2 reasons.

1. It helps with Cumulative Layout Shifts. It lets the browser reserve space for your image as your page loads to prevent your layout from shifting when the image is finally loaded and shown on the page.

2. It helps modern browsers (except Safari & Opera..apple is always behind it seems) determine the aspect ratio (which also helps with #1).

More info here.

I'm a firm believer that you should resize your images to the biggest size you need them before inserting them into WB.

I believe the width and height should be based on what the original image size is UNLESS you manipulate the image within WB to make it smaller/larger. In other words, if you insert a 500x500 image into WB and resize it down to 300x300, then it should use the 300x300 size as this is the size that will be output.

However, if you place an image into a layout grid, the image may shrink but that is due to it being placed into a smaller container not because the image is smaller. Remember, it's flexible up to the max-width value. When you insert an image, the max-width should reflect the original width of the image. So an image in a layout grid should retain the original width and height unless you change the max width value. But in my mind if you are changing the max-width to be smaller then you should have made your original image smaller. You should not be inserting a 800x800 picture and setting the max-width to 400.

So, for example, if i place a 400x400 image into a grid, in the workspace it may be 300x300 but my max-width is set to 400. The generated width and height I believe should be 400x400 (not 300x300). Why? because at some point that grid may expand to accommodate the original 400x400 image size and the width and height would be inaccurate for CLS (see #1 above). A layout shift could take place.

What Pablo has added thus far is a big step in the right direction.

Real: width="140" height="50" - Added by WYSIYWG: width="221" height="79"

In your example, the aspect ratio is still correct and any CLS should be minimal if at all since the browser knows the aspect ratio.

[janez72]

That's the basic rule, if you ask me.
Never resizing images inside program.
I always optimize everything in all ways before I put it in WYSIWYG.

So, my images are added optimized and in original sizes and max. width is set to it's original size.
The program should only caluclate the other value and put it in.

Sure, the ratio in numbers is always ok, I know that, and browsers are able to calcualte it.
But still, I think sizes should be set to originals the way I described earlier.
Some analytic programs still count wrong sizes as a mistake (even with proper ratio) and with Google, you never know.
They don't give out any specific infos. But it's better to be on the safe side.
I added all size values manually via html and all is ok. No errors in any analysys.

And yes, basically it's all because of CLS.
But "Google image search" also seems to be more an more important and I guess proper info there can only be beneficial.

[Pablo]

The reason why width and height were added is because Google's lighthouse complained about "Cumulative Layout Shifts".
By using the workspace size, the layout will initially look the same as in the workspace so this reduces the chances of Cumulative Layout Shifts.
Your suggestion defeats the original purpose of why these attributes were added.

But if you can point me to official documentation where is states that the original size should be used then I will be happen to implement this in a future update, but for now I follow Google Lighthouse's 'rules'.

[crispy68]

I think where using the original size comes in to play is if you were hand coding your webpage in an html editor, you would probably simply add the original width and height of the image. This way there is no chance that the width and height could differ later on from the original.

In my research today thru several articles within the past 12months or so, I've not found anything that specifically states it HAS to be the original size. Mostly what I'm finding is that the width and height do not have to be the actual size the image is to be displayed, just the correct proportions. The browser will use the width and height to calculate the aspect ratio. So if the width and height give the same aspect ratio as the original image, you should be good.

Keep in mind, sometimes Googles guidelines outpace the current ability of the browsers.

[janez72]

As you may see in my older posts, I've been dealing with optimizatons for years.
I've proposed many things in this forum earlier already.

Since I have to deal with competitive niches, I must know all current info on it.
Of course, CLS has been on my mind for a long time.
I even tried adding width and height to all objects, including layout grids.
Seemed logical, so the proper space is reserved for not yet rendered space.
As it should be.

With many tests on various platforms, I removed these attributes on layout grids, since the results were worse with them.
I left them on images, of course. And my CLS is mostly 0, or very close.
I just hope this change won't affect my results, as these were good by now.
And the new attributes now are added by default, so I need to delete all from my added html.

But it's true, I don't know if the proportions are just as good as the real max. values.
Might be, many articles suggest so, true.
But the easier way would be to specify the max. width and calculate height. And use it as default.
I need to resize my default views for all pages now, to get results as close as possible to originals. But someone with smaller monitor will have a hard time making 1920 pages and getting nautral img attributes.

Then - in "Google Search" you can, of course, filter results by image size, which I personally often do.
If the results will not be correct (showing bigger attributes than the real images), then bounce backs will be bigger, resulting in ranking drops for images ...

This game with Google has no end. And it means a lot to many of us.

[Pablo]

I even tried adding width and height to all objects, including layout grids.

Adding width and height to a layout grid is not correct. Those attributes are only valid for a few tags, like img, video and inline frames.
https://www.w3schools.com/tags/att_width.asp

Again, if you can point me to any official documentation then I will be happy to change it. But for now, this makes more sense.
As long as the aspect ratio is correct, it should not have any affect on your SEO results.

[crispy68]

I don't think the width and height attribute added to the html in any way affects the Google images. The browsers know what the intrinsic (original) size of the photo is regardless of what you set in the html code. You can see this in the chrome Developer tools. It tells you what the original size is versus the rendered size. The code is simply there for the browser to leave the space for the image.