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. In this guide, you will learn exactly how images affect your score and the specific steps to fix them.
Key Fact: Images typically account for 50–70% of a webpage's total file size. Optimizing them is the single highest-impact action you can take to improve your PageSpeed score.
What is Google PageSpeed Insights?
Google PageSpeed Insights (PSI) is a free tool that analyzes the performance of your web pages on both mobile and desktop. It gives you a score from 0 to 100 and breaks down specific issues affecting your performance.
The most important metrics PageSpeed measures are called Core Web Vitals — a set of real-world performance metrics that Google uses as ranking signals.
Core Web Vitals Explained
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 a hero image or large banner. A good LCP score is under 2.5 seconds.
An unoptimized hero image that is 3MB will push your LCP to 5-8 seconds on a mobile connection. The same image compressed to 150KB loads in under 1 second. This 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.
Always specify width and height attributes on your img tags, or use CSS aspect-ratio. This prevents layout shifts and improves your CLS score.
INP — Interaction to Next Paint
INP measures how responsive your page is to user interactions. While images do not directly affect INP, pages with many large images often have poor INP scores because the browser is busy decoding images when the user tries to interact.
Common Image Issues 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 |
| Properly size images | Image dimensions are larger than display size | Resize to actual display dimensions |
| Efficiently encode images | Image compression is insufficient | Increase compression level |
| Defer offscreen images | Images below the fold load immediately | Add loading="lazy" attribute |
| Image elements without dimensions | No width/height set on img tags | Add explicit width and height |
Step by Step: Fix Your Image-Related PageSpeed Issues
Step 1: Audit your current images
Run your URL through Google PageSpeed Insights at pagespeed.web.dev. Look at the Opportunities section. Note every image-related warning and which images are flagged.
Step 2: Convert images to WebP
If PageSpeed says "Serve images in next-gen formats," your images are in JPG or PNG. WebP is 25-35% smaller at the same quality. Use TinyPNG Now to convert all your images to WebP for free, directly in your browser.
Step 3: Resize images to actual display dimensions
If PageSpeed says "Properly size images," you are serving images larger than needed. A 4000x3000px image displayed at 800x600px wastes 25x the bandwidth. Use TinyPNG Now's resize feature to set exact dimensions before compressing.
Step 4: Increase compression
If PageSpeed says "Efficiently encode images," your compression settings are too low. For website images, use 65-75% quality in WebP format. This provides excellent visual quality while dramatically reducing file size.
Step 5: Add lazy loading
Add loading="lazy" to all images that are not visible above the fold. This tells the browser to skip loading them until the user scrolls down, improving initial page load speed significantly.
Quick Win: The above-the-fold hero image should NOT have lazy loading. Add fetchpriority="high" to your hero image instead to tell the browser to prioritize it and improve LCP.
Step 6: Add width and height attributes
Every img tag should have explicit width and height attributes matching the image dimensions. This allows the browser to reserve the correct space before the image loads, eliminating layout shifts (CLS).
Real World Impact: Before and After
| Metric | Before Optimization | After Optimization |
|---|---|---|
| Hero image size | 2.8 MB (JPG) | 180 KB (WebP) |
| Total page images | 8.4 MB | 620 KB |
| LCP | 6.2 seconds | 1.4 seconds |
| PageSpeed score (mobile) | 38 | 91 |
These numbers are typical for a small business website with unoptimized images. The improvements are achievable in under 30 minutes using TinyPNG Now.
Summary: Images cause most PageSpeed problems. Fix them by converting to WebP, resizing to display dimensions, compressing at 65-75% quality, adding lazy loading, and setting explicit width/height on all img tags.