Summary: This guide explains why images and logos on Sites may appear blurry on high-resolution (4K/Retina) displays—due to pixel stretching—and provides solutions such as uploading the highest resolution images possible and using optimization tools to maintain visual clarity.
Before You Begin
- The issue is caused by the browser stretching lower-resolution images to fill the significantly higher pixel density of 4K/Retina displays.
- Sites is optimized primarily for HD displays to ensure fast page load speeds.
Step-by-Step Instructions
1. Locate the original, highest quality version of the image or logo file. [High-resolution files provide the browser with more pixel data.]
2. Upload the High-Resolution Images to your Site. [This helps counteract the effects of pixel stretching on 4K/Retina screens.]
3. Use an image optimization tool (optional). [Compress the image without losing too much quality to balance file size and visual clarity.]
Understanding Display Resolutions
- Full HD (1080p): pixels.
- 4K/Retina: Typically pixels (four times the pixel density).
- Blurriness Cause: The browser stretches a lower-resolution (HD) image to fit the higher pixel count of a 4K display, resulting in a blurry appearance.