I choose an image (size: 1920 x 1280 px) from media-library. I hit update and look at the front, the image appears. Ok. Now I go back to edit and choose the thumbnail medium size (300 x 200 px). It does not show up in the backend and after update the document it does not show up at front. The source tells me
I hope I’m understanding this correctly.
Basically, when you change the thumbnail size, you are not seeing those changes applied to the image?
This is because we’ve chosen to use the thumbnail size property as a way of specifying which file size you want to force on a user.
It doesn’t modify the width and height properties (which are applied through the Size tab).
The width and height attributes you see on the img element have no effect on the image itself (unless you remove the css height and width properties), they are solely used to indicate the ratio of the image so that CLS doesn’t occur.
This way, an image can keep its 100% width property and not affect the layout when loading.
The picture shows the behavior of a WP-image (everyone knows). I choose my custom image size and the dimensions are filled automatic in. No more to do here. The image, which the editor shows, is the one, witch dimensions I choose (480 x 320 px).
Here I also choose my custom image size in the third tab and activate remove SRCSET. But then I need to fill the size by hand in the second tab. The picture shown in the editor is not the one I choose, it is the fullsized version (1920 x 1280 px). Where to enter the caption?
In summary (for me), the first attempt is more intuitive, more streamlined, easier to use.
Sorry I made a mistake, images dont’ have 100% width if CSS width is not set, they have the width set in img’s width attribute (on my laptop they were 100% width because attribute width was larger than my screen):
So why not set width and height attributes with the correct values (the one specified by the selected file size)? So that we don’t need to set corresponding CSS width each time?
There’s no point in having a bigger image than selected file size, except in specific cases where you need bigger image and don’t care about quality/blur (like some dim abstract background image), then you can set CSS width to 100% if you will.
I understand this is what is advised in this article:
If so, it seems obvious to me that we don’t want pixelated images by default.
I know that HTML best practices recommand to always set width and height to avoid flicker at image load time, but I think a failsafe with the width associated to selected file size should be added so that we don’t have to systematically “protect” all images.
Well for me ratio is a (useful) bonus, but the real use of width/height attributes is defining displayed image size and reserving the final area (or space) occupied by the image when loaded to avoid content shift.
Exactly my point: the calculated ratio (using width/height) is what is used by the browser to reserve the right space, as the image itself is basically responsive (classes override). The width property in this specific case acts as a max-width.
It does not define the displayed image size (or it wouldn’t be responsive).