Revisiting post-thumbnails / image size settings

[hanneslsm]

Post Thumbnails introduced in WP 2.9 (and quickly renamed to "Feature images") are a long-time essential part of Wordpress.
Different "Thumbnail Sizes" made it possible to select automatically generated different variants of a uploaded image, which differ in dimension and file size. (e.g. Thumbnail (150x150px) or Large (1024x1024px) )

Please note: This issue is not about the functionality of "featured images" on a post or page but about the underlying post-thumbnails function.

What problem does this address?

The image size controls causes confusion

Now with having the editor in place, users get confused when they have to option to chose between different image variations, especially when the title of the setting is "Image size". See:

• Media & Text block image settings are not working properly. #48395

Users want (rightfully) the best quality of the image and the fastest loading time.

Why only focusing on the wording of the title is not a long term solution and not ideal

• Changing the title of the controls from "image size" to "file size" is also not ideal, because with modern file compression a image with "large" dimensions can have nearly the same KB as a image with "small" dimensions. And, of course, no user wants to load a "large-sized-file" if the can chose between large and small and expect the smaller one to load faster.
• Changing the title to "image resolution" could be a quick fix. An image with, let's say 4k resolution displayed as a 200px image can look bad though. A user might still chose the "full size" resolution because in their mind is "bigger resolution" = "best quality". Full size images can be huge, as pointed out in the comment below:
  Revisiting post-thumbnails / image size settings #48618 (comment)
• PR regarding description / wording:
  • Changes image size description, as it causes confusion #48478

What is your proposed solution?

To really solve the problem in its core best fitting image / post-thumbnail should be used automatically.
The image size controls could be removed or moved to the advanced tab.
Related issue:

• Media & Text block: Remove Image Size controls from image settings. #49020

Things to consider

Affected blocks:

• image block
• image block in a gallery
• Media & Text block
• Post featured image

Developer experience

While solving the confusion problem to the user by choosing the best image automatically, future developer can be confused by how the functions are named:

• the_post_thumbnail
• add_image_size

Overall

• The settings screen Settings → Media might get obsolete?

• In the Media & Text block the dimensions of the image are controlled under the title of "Media width". This is rightfully so, just keep in mind we might have variations.

CC @tomdevisser @richtabor @jasmussen

[jasmussen]

If I read this right, you're suggesting that ultimately we can use smarts to retire the Image Size dropdown entirely, and serve sufficient resolution automatically based on context. Is that right? If so, I tend to agree on the longer timescale: it's a headache you shouldn't need to worry about.

I also think it's likely going to be a tricky effort to get just right, both UI wise and functionally. So it seems like many of your good observations here can be addressed in the mean time with interim fixes.

For example, I'd be drawn to the following wording for the size selector:

• Instead of "Image Size", it says "Resolution".
• Help text says "Select the size of the source image.".

Here's a quick mockup. Note how it also includes an explicit resolution in the dropdown:

Whether those 25/50/75/100 shortcut toggles are actually necessary, I don't have a strong opinion on. Consider that separate for now.

What do you think?

[hanneslsm]

If I read this right, you're suggesting that ultimately we can use smarts to retire the Image Size dropdown entirely, and serve sufficient resolution automatically based on context. Is that right? If so, I tend to agree on the longer timescale: it's a headache you shouldn't need to worry about.

Yes, correct

For example, I'd be drawn to the following wording for the size selector:
Instead of "Image Size", it says "Resolution".
Help text says "Select the size of the source image.".
Here's a quick mockup. Note how it also includes an explicit resolution in the dropdown:

Amazing! This would be a direct and ultimate a solution for the discussion in #48478

Whether those 25/50/75/100 shortcut toggles are actually necessary, I don't have a strong opinion on. Consider that separate for now.

I agree, this is separate. There are things do consider, like that the Media & Text Block has a slider and images have input fields. But let's focus on this later.

[tomdevisser]

Thanks for following up with this issue @hanneslsm.

Whether those 25/50/75/100 shortcut toggles are actually necessary, I don't have a strong opinion on.

I think these are unnecessary, if someone wants to play with these settings they most likely know what resolution they need. Otherwise they probably won't bother.

I love showing the actual resolution next to the size in your mockup! @jasmussen

[hanneslsm]

I think these are unnecessary, if someone wants to play with these settings they most likely know what resolution they need. Otherwise they probably won't bother.

We're talking about 25/50/75/100 below the dimensions, right? Sorry if I didn't go in detail about this in my previous comment.
In that case, for now, I think they are necessary. I just had a client who "just wanted to make the image smaller". I showed her how to do it with the 25/50/75/100 controls and that was easy and fast (well, after I figured out why I didn't work as described in #48375).

[tomdevisser]

that was easy and fast

I'd say telling them to change the width or height to a lower number would be just as fast and easy, especially if the aspect ratio is locked. But just like @jasmussen not a very strong opinion on this.

[jasmussen]

Oh keep or remove those, as noted, no strong opinion. I included them in the mockup, but used the new componentry, simply to show all existing pieces in context. We can keep those shortcuts a separate discussion from the Resolution selector 👍 👍

[hanneslsm]

I'd say telling them to change the width or height to a lower number would be just as fast and easy

I would like to agree, but do not underestimate the user. I know that if I had told her to use 200px, the next time she wanted to change a picture she'd message me because she wants to know what value she should put in there again…

We can keep those shortcuts a separate discussion from the Resolution selector 👍 👍

Agreed. Sorry for digressing

[paaljoachim]

Resolution might help with people who actually understand what it means. In general all images used should use the highest resolution possible. So instead of needing to select Full Size image the highest resolution should be automatically used.

Removing the Image Size controls and replacing these with Dimension controls (where it is natural to do so) would be a much better replacement and should be done in all the places where images are used.

[jasmussen]

In general all images used should use the highest resolution possible. So instead of needing to select Full Size image the highest resolution should be automatically used.

While this is good practice in many cases, it forgets the motivation for why "Large" is the default, and not "Full Size", namely that images, especially PNGs, can be huge. And so for folks on a paid plan or generally slow connection, forcing an 8mb image on them is not going to be a good experience. For that reason, I see the dropdown conversation as a separate challenge. One to solve, to be sure, and I'd agree that no choice necessary is ideal — but we have to be smart about it.

[hanneslsm]

Info: I restructured the text of the original issue to make it easier to understand. Same issue, just better formatting.

[Thelmachido]

Just adding here a request from forums to have the same option to reduce the image size for the featured image block.

[Mamaduka]

Can we close this issue?

I think most of the media blocks switched and are using Resolution tools.

Screenshot