[5.x]: Assets image preview blows up

[KarelJanVanHaute]

What happened?

Description

Preview of an image asset gets blown up when previewed.

Steps to reproduce

1. When you click the preview button on the thumbnail, you get a larger version in some kind of popup.
2. The popup takes the entire width of the screen. This is often larger than the image provided (max width of 1000px) for the preview.

Expected behavior

That the popup doesn't blow up the image. So that the popup will never be larger than the max size of the image.

Actual behavior

The popup is shown 100vw and the image scales with it. So the image is often shown larger than its maximum resolution. Resulting in a blown up image.

Craft CMS version

5.4.2

PHP version

8.2

Operating system and version

MacOS 15.0.1

Database type and version

mysql 8.0

Image driver and version

No response

Installed plugins and versions

[i-just]

Hi, thanks for getting in touch!

Could you please confirm if I got this right?

• you go to the control panel > assets and edit an image type asset
• you click on the “Preview” button that shows when hovering over the thumbnail on the right-hand side (or click the 3 dots menu > “Preview file”)
• the popup that shows is larger than 1000px wide and larger than the original image

Do you see any errors in the console when this happens? What browser are you on?

[KarelJanVanHaute]

Hey @i-just

That is correct. I'm using chrome 130.0.6723.117 on Mac. And as far as I can see, no errors.
And it's doing the same on firefox and safari. It's not due to an error. It's just how the preview popup is implemented I guess.

[realjoshharrison]

I think I'm experiencing the same issue on a build using Craft Pro 4.10.7.

When clicking 'Preview' in admin on an image asset, to see the modal image overlay, the intrinsic width of the previewed image is 1000px which is usually less than a monitor width. So the preview image is being upscaled by the browser to screen width, and can appear very blurry.

I've just had a client understandably confused by this, thinking that all their images are blurring on upload, when in actual fact they will appear sharp when used on the front end.

When I inspect the image you can see the intrinsic size is considerably less than the rendered size: