Fixing Background Images That Are Blurry on Mobile

Mobile images look blurry? Increase the mobile image width.

If images look soft only on mobile, they’re likely used as CSS background images. Browsers don’t expose a reliable display size for backgrounds, so Adaptive can’t always pick the perfect size automatically.

Quick fix (about 2 minutes)

Go to WP Compress → Image Optimization.
Under Adaptive Images, open Resize by Incoming Device (click the gear ⚙️).
Set Minimum mobile image width to 800 px.
Click Save, then clear any caches and hard-refresh the page.

✅ You can leave the big “Exclude from Adaptive” field empty — nothing is required there.

Why this helps

CSS background images don’t provide an intrinsic size, so Adaptive can’t reliably identify how large they’ll render on mobile.
Setting a minimum mobile width ensures a sufficiently large variant is served, preventing blur while keeping files lean.
The default is 400px, but for certain image aspect ratios larger may be required.

Tips

Start at 800 px; raise gradually if a specific background still looks soft.
Avoid setting it unnecessarily high to prevent excess mobile bandwidth.
This setting does not affect regular <img> tags — it primarily helps CSS backgrounds.

Updated on: 09/26/2025

Was this article helpful?

Thank you!