Compress an image for mobile

Mobile-specific challenges

Variable connections: 4G/5G isn't available everywhere. Your images must load even on 3G or with a weak signal.

Limited data plans: heavy images consume your visitors' data, creating a bad experience.

Less powerful processors: decoding heavy images can slow rendering on entry-level devices.

High-resolution screens: Retina screens require more detailed images, but not necessarily heavier ones.

Optimal dimensions for mobile

Maximum width: 1080-1200px is enough for the widest mobile screens (tablets included).

Content images: 600-800px wide covers the majority of smartphones.

Thumbnails: 200-400px depending on your design.

Use srcset to automatically serve the right size based on device.

Recommended compression level

Smaller mobile screens forgive more aggressive compression.

JPG quality: 70-75% for mobile versus 80-85% for desktop.

WebP lossy with 65-75% quality offers excellent results on mobile.

Retina images (2x, 3x) can use even lower quality because high resolution compensates.

Responsive images with srcset

Define multiple image sizes and let the browser choose the most appropriate.

Example: srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"

The browser will download only the necessary size, saving bandwidth on mobile.

Lazy loading on mobile

Even more crucial on mobile where bandwidth is precious.

Use native loading='lazy' or Intersection Observer for fine control.

Prioritize above-the-fold images with loading='eager' or fetchpriority='high'.

How to do it in 3 steps

Frequently asked questions