Unoptimized Images Add 3-5 Seconds to Your Mobile Load
Images are the largest element on 72% of mobile pages, and unoptimized they add 3 to 5 seconds before your page feels real. I break down what that costs in conversions and the format-and-sizing fixes that cut image weight 50 to 80%.
They leave while the hero image is still decoding. On mobile that image is the largest element on the screen for 72% of pages, and shipped as a full-size JPEG it adds 3 to 5 seconds of blank space before anything feels real. Convert it to WebP and you cut the file by a third before you change a single line of layout.
Why do unoptimized images decide whether mobile visitors stay?
Largest Contentful Paint is the moment the biggest thing in the viewport finishes painting. On 72% of mobile pages, that biggest thing is an image. So the photo at the top of your page is not decoration. It is the metric Google scores you on and the thing a visitor waits for before deciding your site works.
Right now only 58% of sites pass the 2.5-second LCP threshold. Mobile loads 1.7 times slower than desktop on the same connection, and mobile pages average 8.6 seconds. A one-second delay in load time costs roughly 7% of conversions. Stack those together and the unoptimized image at the top is quietly taxing every campaign you run.
I will say the quiet part. I am running this on you too. The reason this paragraph is short is the same reason your hero should be small. Attention leaks at every extra second.
How much of my page weight is actually images?
On a median site, images are 48% of total page weight. On sites that never set up an optimization pipeline, usually WordPress or a drag-and-drop builder, images climb to 50 to 70% of the page. More than half of what a phone has to download before your page is usable is pictures, and most of those pictures were exported at desktop resolution and dropped straight into the page.
The visitor on a mid-tier Android over spotty LTE pays for every one of those kilobytes. Your laptop on office wifi never shows you the problem. That gap is why the page looks fine to you and the analytics look broken.
What does an unoptimized image actually cost in load time?
A single full-resolution JPEG hero can run 1.5 to 3 MB. Multiply that across a product grid and unoptimized images add 3 to 5 seconds to mobile load on their own. Here is the conversion math that follows.
A page that reaches a 1-second LCP converts near 40%. At 3 seconds it falls to roughly 29%. The image you never compressed is the difference between those two numbers.
That is an eleven-point swing, and the lever is mostly the picture at the top.
WebP vs AVIF vs JPEG: which format should I serve?
| Format | Size vs JPEG | Browser support | Best use |
|---|---|---|---|
| JPEG | baseline | ~100% | legacy fallback only |
| WebP | 25 to 35% smaller | 97%+ | default for nearly everything |
| AVIF | ~50% smaller | ~93% | hero and large images where every KB counts |
WebP is the safe default in 2026. More than 97% of browsers render it and you cut a third of the file with no visible quality loss. AVIF squeezes harder, roughly half the JPEG size, but it decodes slower and lands around 93% support, so serve it with a WebP fallback. The clean way is the picture element, which lets the browser pick the smallest format it understands:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="product hero" width="1200" height="800">
</picture>
Setting width and height also reserves the space so the layout does not jump, which protects your CLS score at the same time.
What is the fastest fix that moves mobile conversion?
Run these in order. Each one is measurable against your current LCP in Lighthouse or PageSpeed Insights.
- Convert your hero and above-the-fold images to WebP or AVIF. Expect 25 to 50% off those files.
- Serve responsive sizes with
srcsetso a 390px phone never downloads a 1600px image. - Set explicit
widthandheighton everyimgto stop layout shift. - Lazy-load everything below the fold, and eager-load the hero so it is not delayed.
- Put images on a CDN so they arrive from a server near the visitor.
Combined, modern formats plus responsive sizing plus lazy loading plus a CDN cut image payload 50 to 80%. Teams report a single day of this work moving page speed 40 to 50%.
Image optimization is the practice of delivering the smallest possible image file that still looks right on the device requesting it.
FAQ
Does image optimization really affect SEO rankings?
Yes. LCP is a Core Web Vitals metric and Google uses it as a ranking signal. Images are the LCP element on 72% of mobile pages, so compressing them improves the exact number search ranking watches. Faster pages also hold attention longer, which feeds the engagement signals underneath rankings.
What is a good LCP time on mobile?
2.5 seconds or less is the passing threshold, measured at the 75th percentile of real visits. Only 58% of sites clear it. Under 2.5s is good, 2.5 to 4s needs work, over 4s is failing. Treat the mobile number as the real one, since most of your traffic is mobile.
Should I lazy-load my hero image?
No. Lazy-load images below the fold, but the hero is your LCP element, so lazy-loading it delays the one paint Google times. Eager-load the hero, preload it if you can, and lazy-load everything underneath.
Open PageSpeed Insights, run your top landing page on Mobile, and read the LCP number plus the "Properly size images" and "Serve images in next-gen formats" line items. Whatever savings it lists in KB is the exact weight you are asking every phone to carry. Convert that one hero image to WebP this afternoon and re-run the test before you touch anything else.
Find any asset in seconds. Atlas Photo is digital asset management for creative and brand teams, with early-access founder pricing for the first users. Get early access
Try Atlas Photo Free
Optimize images with SSIM-based compression. 10 free conversions per day, no credit card required.