Why do optimized images look blurry on mobile?

Optimized images can look blurry on mobile for a few common reasons:

1. The image is too small for the screen

   • If you compress or resize an image too aggressively, it may not have enough pixels for high-density mobile displays.
   • Phones often have retina/high-DPI screens, so an image that looks fine on desktop can look soft on mobile.

2. The wrong image size is being served

   • The browser may be displaying a larger image in a smaller space, or a smaller image stretched larger.
   • If the image’s actual dimensions are less than the display size, it will appear blurry.

3. Over-compression

   • If optimization uses too much JPEG/WebP/AVIF compression, details and edges can get smeared.
   • This is especially noticeable on text, logos, and screenshots.

4. CSS is scaling it up

   • Using CSS like width: 100% on a lower-resolution image can stretch it.
   • The displayed size should match the image’s intrinsic resolution closely enough, ideally with srcset for responsive images.

5. Mobile browser rendering differences

   • Some browsers apply additional scaling or interpolation that can soften images a bit, especially when zoomed or transformed.

How to fix it

• Provide responsive images using srcset and sizes.
• Export images at 2x or 3x the display size for high-DPI screens.
• Reduce compression quality loss, especially for images with text or sharp edges.
• Avoid scaling images up in CSS beyond their natural resolution.
• Use the right format:
  • WebP/AVIF for photos
  • PNG/SVG for logos, icons, and sharp graphics

If you want, I can also help you diagnose a specific image setup or HTML/CSS snippet.