Inconsistency of image block with low resolution image in frontend and editor

[Infinite-Null]

Description

The image block with low-resolution images in WordPress is rendering inconsistently between the editor (Gutenberg) and the frontend. While the image appears correctly sized within the editor, it is displayed horizontally smaller on the frontend. This discrepancy affects the visual parity between the editor preview and the actual published page, confusing users.

Step-by-step reproduction instructions

You can use this image for testing:

1. Go to edit site and add an image block.
2. Upload or select a low resolution image from the media library and select any aspect ratio (Example: Portrait - 3:4).
3. Preview the image within the editor and ensure it looks fine.
4. Save the post or page and view it on the frontend.
5. Notice that the image is horizontally smaller on the frontend compared to its display in the editor.

Screenshots, screen recording, code snippet

Screencast:

Screen.Recording.2024-11-18.at.9.19.06.PM.mov

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[ellatrix]

Cc @ajlende (based on #51545).