How Image Optimization Affects Your Google PageSpeed Score

Google PageSpeed Insights is one of the most important tools for any website owner. A low score is not just a number — it directly affects how high your pages rank in search results and how many visitors stay on your site. Images are almost always the number one culprit behind a poor PageSpeed score.

What Is a Good PageSpeed Score?

Google PageSpeed Insights gives pages a score from 0 to 100, measured separately on mobile and desktop. The three bands:

Most unoptimized websites score 30–60 on mobile. After proper image optimization, scores of 85–95 are achievable for most sites. Mobile scores are almost always lower than desktop because mobile connections are slower — and that is exactly the scenario where image weight matters most.

Core Web Vitals Explained

The most important metrics PageSpeed measures are called Core Web Vitals — real-world performance metrics that Google uses directly as ranking signals.

LCP — Largest Contentful Paint

LCP measures how long it takes for the largest visible element on the page to load. For most pages, this is the hero image or a large banner. Target: under 2.5 seconds. An unoptimized 3MB hero image will push LCP to 5–8 seconds on a mobile connection. The same image compressed to 150KB in WebP loads in under 1 second — that single change can move your LCP from red to green.

CLS — Cumulative Layout Shift

CLS measures visual stability — how much the page layout shifts while loading. Images without defined width and height attributes cause layout shifts because the browser does not know how much space to reserve before the image loads. Target: under 0.1. Fix: always specify width and height on every img tag.

INP — Interaction to Next Paint

INP measures page responsiveness to user input. Target: under 200ms. While images don't directly cause INP issues, pages that are decoding many large images while users try to interact often have poor INP scores. Smaller images decode faster.

Common Image Warnings PageSpeed Flags

PageSpeed Warning	What It Means	Fix
Serve images in next-gen formats	You are using JPG or PNG instead of WebP	Convert to WebP with TinyPNG Now
Properly size images	Image dimensions larger than display size	Resize to actual display dimensions
Efficiently encode images	Compression level is too low	Compress at 65–75% quality
Defer offscreen images	Below-fold images load on page start	Add loading="lazy" to img tags
Image elements without explicit dimensions	No width/height set on img tags	Add width and height attributes
Preload key requests	Hero image is not prioritized	Add fetchpriority="high" to hero img

How to Fix "Serve Images in Next-Gen Formats"

This warning means your images are in JPG or PNG. The fix is converting to WebP:

1. Go to TinyPNG Now
2. Upload your images and select WebP as output format
3. Set quality to 70–75%
4. Download and replace your current image files

WebP is 25–35% smaller than JPG at the same quality. On a page with 10 images, this one change alone can reduce total image weight by 300–500KB.

How to Fix "Properly Size Images"

This warning means you are serving images larger than they display at. If your blog image displays at 800px wide but you are serving a 3000px original, you are sending 14× more pixels than needed.

How to find the correct size: In Chrome DevTools (F12), right-click any image → "Inspect." Look at the rendered size vs. the intrinsic size. If the intrinsic size is more than 2× the rendered size, resize.

Common targets: Hero images → 1920px max. Blog images → 1200px. Product thumbnails → 600px. Use TinyPNG Now's resize feature alongside compression to do both in one step.

How to Fix a Bad LCP Score Caused by Images

LCP is almost always caused by a heavy hero image. The fix has three parts:

1. Compress the hero image to under 200KB — Convert to WebP at 70% quality and resize to 1920px max width
2. Remove lazy loading from the hero — Never add loading="lazy" to above-the-fold images. It delays the LCP element.
3. Add fetch priority — Add fetchpriority="high" to your hero img tag to tell the browser to load it first

<img src="hero.webp" alt="Hero image" width="1920" height="1080" fetchpriority="high">

How to Add Lazy Loading to Images

Lazy loading tells the browser to skip loading images that are not yet visible. Add loading="lazy" to all images that appear below the fold:

<img src="blog-image.webp" alt="Description" width="1200" height="800" loading="lazy">

How to Fix the "Image Elements Without Explicit Dimensions" Warning

Every img tag needs width and height attributes that match the image's actual dimensions. Without them, the browser cannot reserve the correct space before the image loads, causing layout shifts (CLS) that hurt your score and user experience.

<!-- Wrong -->
<img src="product.webp" alt="Product">

<!-- Correct -->
<img src="product.webp" alt="Product" width="600" height="600">

Does PageSpeed Score Directly Affect Google Rankings?

Yes — through Core Web Vitals. Google collects real-user performance data from Chrome browsers and uses it as a ranking signal in the Page Experience update (rolled out 2021–2022). Pages with poor LCP, high CLS, or slow INP scores are systematically ranked lower, even if content is excellent.

The relationship is not one-to-one (a 90 score doesn't guarantee rank 1), but consistently poor performance actively suppresses rankings. The larger SEO impact comes from the user behavior signals that good performance enables: lower bounce rates, longer dwell time, and more return visits. For the full SEO story, see our guide: Image Compression and SEO.

Real-World Impact: Before and After

Metric	Before Optimization	After Optimization
Hero image size	2.8 MB (JPG)	145 KB (WebP)
Total page image weight	8.4 MB	580 KB
LCP	6.2 seconds	1.3 seconds
CLS	0.28 (Poor)	0.02 (Good)
PageSpeed score (mobile)	38	91

These numbers are typical for a small business or blog with unoptimized images. Achieving them requires: convert to WebP, resize to display dimensions, compress at 65–75%, add lazy loading, and set explicit dimensions. With TinyPNG Now, steps 1–3 take about 5 minutes.

Frequently Asked Questions