📈 Core Web Vitals Guide
Compress Images for SEO
Images cause 70% of poor LCP (Largest Contentful Paint) scores. Google uses LCP as a direct ranking signal. Compressing and converting images to WebP is the single highest-ROI technical SEO task for most websites.
Fix PageSpeed "next-gen formats" flag
Improve LCP score
Free, no upload
Batch compress entire pages
70%
of poor LCP scores caused by images
2.5s
LCP target for Google's "Good" rating
35%
average file size reduction: JPG → WebP
90+
PageSpeed score achievable after image opt
Compress & Convert Images Free
Two tools, no upload, no account — fix both PageSpeed image flags.
The LCP Target You Need to Hit
Google measures Largest Contentful Paint — the time until the biggest visible element loads. For most pages, that's the hero image.
Good (<2.5s)
Improve (2.5–4s)
Poor (>4s) — ranking penalty
A 600 KB JPG hero image on a typical mobile connection can add 2–3 seconds to LCP alone. Converting it to WebP (typically ~180–220 KB) and compressing further can cut LCP by 1–2 seconds — enough to move from red to green.
Three PageSpeed Image Flags — and How to Fix Them
🟡
Serve images in next-gen formats
Fix: Convert JPG and PNG to WebP. WebP is 25–35% smaller at the same quality. Use Convertlo's
JPG → WebP converter or
PNG → WebP converter. For backward compat, wrap in a
<picture> element with a JPG fallback.
🟡
Efficiently encode images
Fix: Compress images with a lower quality setting. JPG quality 80–85 is visually identical to quality 95 for photos, but 40–60% smaller. WebP quality 80–85 is the standard target. Use Convertlo's
image compressor.
🟡
Properly size images
Fix: Don't upload a 4000 × 3000 px image if it's displayed at 800 × 600 px. Resize to the display dimensions (or 2× for retina: 1600 × 1200 px). Use the resize tool in Convertlo's converter before converting.
Image Compression Workflow for SEO
1
Audit with PageSpeed
Run your URL through PageSpeed Insights. Note which images are flagged under "Opportunities." These are your highest-priority fixes.
2
Resize to display size
Use the resize tool in Convertlo's converter. Match the image to its displayed dimensions (check your CSS) × 2 for retina. Don't upload 5 MP originals for a 400 px thumbnail.
3
Convert to WebP
Convert all JPG/PNG images to WebP at quality 82–85. This alone cuts size 25–35% before any additional compression.
4
Compress further if needed
If any WebP is still over your target (150 KB for hero, 80 KB for inline), run it through Convertlo's compressor to squeeze more bytes.
5
Preload the LCP image
Add a preload hint for your hero: <link rel="preload" as="image" href="hero.webp">. This tells the browser to fetch it immediately — before CSS blocks paint.
6
Lazy-load below-fold images
Add loading="lazy" to all images below the fold. This defers their download until the user scrolls — reducing initial page weight.
Advanced Image SEO Tips
Preload
Preload the LCP image — don't let CSS block it
Add fetchpriority="high" to your LCP image element AND a preload link in the head. Without this, the browser discovers the image only after CSS renders — adding 200–500ms to LCP.
Width & Height
Always set width and height attributes
Missing width/height causes Cumulative Layout Shift (CLS) — the browser doesn't know how much space to reserve, so images shift content as they load. CLS is another Core Web Vital metric.
Responsive Images
Use srcset for multiple screen sizes
Serve smaller images to mobile with srcset: hero-800.webp 800w, hero-1600.webp 1600w. Mobile users don't download a 1600px image unnecessarily.
CDN
Serve images from a CDN edge location
Even perfectly compressed WebP images are slow if served from a single origin server. CDNs (Cloudflare, CloudFront, Fastly) serve images from the edge closest to the user — cutting TTFB for image requests.
Google Image Search
Images rank separately in Google Image Search
Descriptive filenames + alt text + structured data (ImageObject schema) helps images appear in Google Image Search — a separate traffic source from web search. Compressed images also load faster in image search previews.
Picture Element
Serve WebP + JPG fallback with <picture>
For the 3% of users on browsers without WebP support: <picture><source srcset="img.webp" type="image/webp"><img src="img.jpg"></picture>. Modern browsers use WebP; others fall back to JPG.
<!-- Full LCP-optimized image pattern -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
<picture>
<source srcset="hero-800.webp 800w, hero-1600.webp 1600w" type="image/webp">
<img src="hero-1600.jpg" alt="Descriptive alt text here"
width="1600" height="900" fetchpriority="high">
</picture>
Frequently Asked Questions
Do images affect SEO?
Yes, directly. Google uses page speed as a ranking signal, and images are the largest contributor to slow load times. Unoptimized images cause poor LCP (Largest Contentful Paint) scores — the Core Web Vital Google weights most for Search rankings. Google PageSpeed Insights flags "Serve images in next-gen formats" for almost every site using JPG. Fixing it by converting to WebP is the highest-ROI technical SEO task for most websites.
What is LCP and why does it matter?
LCP (Largest Contentful Paint) measures how long it takes for the largest visible element to render — usually the hero image. Google's target: under 2.5s = Good, 2.5–4s = Needs Improvement, over 4s = Poor. Google uses LCP as a direct ranking factor. Most poor LCP scores are caused by unoptimized hero images.
How do I fix "Serve images in next-gen formats" in PageSpeed?
Convert your JPG and PNG images to WebP. WebP is 25–35% smaller than JPG at equivalent quality. Use Convertlo's converter (free, browser-based, no upload). Replace your image URLs with the WebP versions. For broader browser compatibility, wrap images in a <picture> element with a JPG fallback.
How much does image compression improve PageSpeed scores?
Significantly — converting large JPGs to compressed WebP commonly moves image-heavy pages from PageSpeed scores in the 40s–60s into the 80s–90s. The hero image has the highest single impact. Cutting a 600 KB JPG hero to 180 KB WebP can improve LCP by 1–2 seconds, which is often the difference between a red (poor) and green (good) score.
Should I compress the LCP image?
Yes, but with care. The LCP image should be compressed (to WebP at quality 82–85) AND preloaded. Add a <link rel="preload" as="image" href="hero.webp" fetchpriority="high"> in your document head. Do NOT add loading="lazy" to the LCP image — that counterproductively delays it.