Product images look pixelated on Retina displays—best workflow for high-res screens?

Question

Hi everyone,We are currently updating the product images on our website https://www.daltaios.com/, but we noticed they look quite pixelated on Retina displays and newer mobile screens.Should I be exporting all image assets at 2x resolution directly from Photoshop, or is there a better modern workflow to ensure crisp visuals while keeping the file sizes small for fast loading times?Any advice on compression tools or responsive image practices would be greatly appreciated!

D Fosse · Answer

The web browser automatically scales images up 2xwhen it detects a retina/4k screen,so that they display at roughly the same screen size as they would on a standard HD screen. Otherwise it would be really small.However, it's possible to code websites so that you can upload two images, one for 4k/retina and one for HD, and the browser chooses which one to show according to the display it detects. Or you can upload onehigh resolution image that is downsampled for standard HD screens.The point is, the website needs to be coded for this. If not, you just get the default 2x upscaling, which uses 4 screen pixels to display one image pixel. That's why it looks pixelated, especially compared to vector content which is always rendered at full screen resolution.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.