Editing an image inserted in a post does not resize correctly

[rachelbilski]

Steps to reproduce

1. Upload a large image to the media library
2. Create a new page
3. Add media and select an image
4. Insert image into page
5. Click on image and edit
6. Change size to Custom and make larger
7. Accept the changes

Expected result: The image should be resized without blurring and pixelation as there is a high resolution version of this image uploaded from which to resize with.

Actual result: The image is resized from the small version that was included, and is therefore poor quality.

[azaozz]

Thanks @rachelbilski for the enhancement idea. Agreed that ideally we should replace the image with a larger version when width or height is edited and exceeds the current value. This should (probably) work also when resizing an image inside the editor (by dragging the corner).

For now this can be done in two steps: first replace the image with a larger size, then add the larger width/height value(s).

[azaozz]

This is somewhat fixed for the front-end by having a srcset and sizes attributes. It is a good idea to also fix it in the image block in the block editor (by adding srcset and sizes in there too). Currently this works much better in the image block as it uses the "large" size by default.

[azaozz]

Looking at this again, it's currently only a problem with the image "preview" in the classic block and editor. It would be a nice touch to replace the image src when the user resizes the image to larger than the current size. However thinking we should probably remove the ability to choose specific image sub-size in the image block. It's just not needed as on the front-end the browser will pick the best size from the srcset anyway.

Closing this as worksforme as:

• On the front-end the browser picks the right image source from the srcset regardless of that is in the image src.
• In the image block the "large" size is always used.
• There is a workaround for the classic block and editor: the user can select larger image size.