Performance6 min read·Updated

Improve Mobile Page Speed by Shrinking Images First

Mobile PageSpeed looks worse because the connection is slower and the CPU is weaker. Decoding a 4000 px PNG on a phone is expensive even if you CSS-scale it. Convert to WebP at ~1000–1200 px for content images and you usually win more than a CSS refactor.

Phones download, then decode

Weight is the download. Pixels are the decode. WebP plus a sane max width fixes both. Third-party scripts are the next boss, not the first.

Why it matters

  • CrUX is mobile-weighted.
  • Users on LTE abandon heavy galleries.
  • Your desktop-only hero is a mobile LCP trap.

How to do it

  1. Test the URL in PageSpeed with Mobile.
  2. Convert LCP + above-the-fold images first.
  3. Then convert the gallery that loads on scroll.

Settings that work

Content 1200 px / 80%. Full-bleed 1600 / 75% is enough for most phones including 3×.

Convert a batch in your browser. Nothing is uploaded.
Open the converter

Put it into practice

Convert your images to WebP right now, free and privately in your browser.

Open the converter

Frequently asked questions

CSS width is ~390–430. 1600 px is already 4×. You do not need 4000.

srcset is ideal. A single 1200–1600 WebP is a strong first step.

Keep reading

Performance6 min read

Retina and WebP

How to handle 2× and 3× displays with WebP without shipping 3× PNG screenshots.

Read more
Performance6 min read

Fix image LCP

If LCP is a photo or PNG, convert it to WebP at the rendered width, preload it, and stop lazy-loading the hero.

Read more
Performance6 min read

Recommended image sizes

Practical max widths for heroes, content, thumbnails and retina — then convert those files to WebP.

Read more