Workflows
How to Optimize Images for Mobile Page Speed
Mobile page speed usually improves when image workflows become smaller, simpler, and closer to the actual layout instead of carrying desktop-sized assumptions everywhere.
What you are really solving
How to Optimize Images for Mobile Page Speed sounds simple, but the real task is keeping mobile pages visually strong without forcing phones to download and decode unnecessary media weight — so the first move is to identify the destination (blog post, online form, CMS, email, ad platform, or messaging app) before touching any settings.
Step by step
Keep the guesses low: inspect the file, decide what the destination actually needs, then resize or compress in small, deliberate steps instead of re-exporting at random until it finally fits.
- Map each image slot to the dimensions the mobile layout actually uses.
- Choose a format that fits the content and modern browser reality.
- Compress only after the dimensions are realistic.
- Review the result on an actual phone or mobile-sized preview, not only on desktop.
Settings that usually work
Right-sized dimensions plus WebP or sensible JPG output is a strong starting point for many mobile pages. Screenshots and graphics may still need sharper formats.
Example scenarios
A blog article with several featured and inline images. A product category page with many photo cards. A landing page hero area that looks sharp on desktop but feels heavy on mobile.
How it affects SEO and page speed
Mobile image optimization is closely tied to page experience and Core Web Vitals because oversized media often dominates the payload.
Developer and workflow notes
Teams should define mobile-first image slot rules and responsive media policies so contributors do not publish desktop-size originals by habit.
Common mistakes to avoid
- Designing image workflows around desktop only.
- Leaving hero images at huge dimensions and then trying to fix everything with compression.
- Using one format policy for photos, screenshots, and transparent graphics alike.
- Skipping real-device review after optimization.
The width math: cap intrinsic pixels at 2x the CSS slot
Most phones report a CSS viewport of 360 to 430 px wide. A full-bleed hero on a 390 px iPhone viewport occupies a 390 CSS-px slot; an inline blog image inside a content column is closer to 343 px after 16 px side gutters. Device pixel ratio is 2 on standard phones and 3 on the densest, but shipping 3x assets wastes 2.25x the bytes for a difference almost no one resolves on a held phone. Cap encoded width at 2x the largest slot the image fills and let the browser downscale the rest.
That gives you concrete decode targets instead of guesses. The list below is the intrinsic pixel width to export for each common slot at a 2x cap, with a realistic WebP weight at quality 75. Set these dimensions in Resize Image first, because compressing a 4000 px original down to 60 KB still forces the phone to decode 4000 px of data into memory before it paints.
- Full-bleed mobile hero: 780 px wide intrinsic (390 slot x2), target 40 to 90 KB WebP.
- In-content blog image: 686 px wide (343 slot x2), target 25 to 60 KB.
- Two-up product grid card: 360 px wide (180 slot x2), target 12 to 25 KB.
- Three-up thumbnail row: 240 px wide (120 slot x2), target 6 to 14 KB.
- Avatar or icon: 80 to 96 px wide at 1x, 160 to 192 px at 2x, target under 8 KB.
- Logo in header: ship SVG when the art is vector; a 2x PNG fallback rarely needs to exceed 200 px wide.
Hit a 2.5-second LCP by budgeting the hero in bytes
On mobile, the Largest Contentful Paint element is the hero image on roughly two of every three article and product pages, so its transfer size sets your LCP score. Google's good threshold is LCP at or under 2.5 seconds at the 75th percentile; needs-improvement runs to 4.0 seconds, and anything past that is poor. A median global mobile connection of about 12 to 20 Mbps moves roughly 1.5 to 2.5 MB per second, so a 150 KB hero transfers in well under 100 ms of network time, while a 1.2 MB hero alone can eat 600 to 800 ms before decode even starts.
Keep the mobile LCP image at or under 150 KB and never above 200 KB. Mark only that one image fetchpriority=high and leave everything below the fold on loading=lazy so the browser spends its first connections on the pixels that score. Two other vitals share the page budget: keep INP at or under 200 ms by not blocking the main thread while images decode, and protect CLS at or under 0.1 by setting explicit width and height attributes so reserved space does not collapse when each image arrives. Use Compress Image to walk the hero down to the byte target and read the actual output size rather than trusting a quality slider.
AVIF and WebP win big until the image gets tiny
At the same visual quality, WebP runs about 25 to 34 percent smaller than a quality-80 JPEG, and AVIF lands roughly 50 percent smaller than that JPEG and 20 to 30 percent under WebP, with the largest gains on flat color and gradients. For a 780 px hero that is the difference between a 120 KB JPEG, an 85 KB WebP, and a 55 KB AVIF. AVIF also encodes far slower, so it earns its place on static assets that are built once and served thousands of times, not on images regenerated per request.
The advantage inverts at small sizes. AVIF and WebP carry container and header overhead of a few hundred bytes to a couple of kilobytes, so for a 32 px icon or a 240 px thumbnail under about 4 KB, a plain JPEG or an 8-bit PNG-8 frequently ships fewer total bytes. Keep transparency on the lossless side: a logo with hard edges stays PNG or SVG, never a lossy JPEG, which fringes the edges with 8x8 block artifacts. For heavy decorative PNGs that do not need transparency-perfect edges, route them through PNG to WebP, which typically removes 60 to 80 percent of the weight while preserving the alpha channel that a JPEG conversion would flatten to a solid background.
Related tools
Use the tools below to apply this workflow directly in your browser and finish the job without leaving the page.
