My Blog Was Getting a 34/100 on PageSpeed
Six months ago, I ran my food blog through Google PageSpeed Insights for the first time. The score was 34 out of 100 on mobile. I had assumed my blog was "fine" — it loaded okay for me on my desktop with fast Wi-Fi. But PageSpeed told a different story.
The biggest opportunity listed was identical for every page: "Properly size images" and "Serve images in next-gen formats." Google estimated these two changes alone would save 4.1 seconds of load time.
Mobile performance before image optimization. Target is 90+.
I had 3 years of blog posts, each with 4–8 unoptimized images. My photography was shot in RAW, exported as high-quality JPEGs, and uploaded directly — sometimes at 4000px wide and 6–8MB each. No wonder it was slow.
Google uses page speed as a ranking factor. The Core Web Vitals — Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP) — directly affect where your page appears in search results.
Why Images Are the #1 Killer of Page Speed
Images typically account for 60–80% of a web page's total byte weight. Unlike CSS or JavaScript — which are usually small and cached aggressively — images are large, unique per page, and loaded fresh on every visit.
There are four specific ways images slow down pages:
- File size too large — A 6MB JPEG takes 15+ seconds to load on a 3G connection. Even on fast connections, large images delay Largest Contentful Paint (LCP), which Google measures directly.
- Wrong format — JPEG and PNG were designed in the 1990s. WebP offers 25–34% better compression than JPEG. Serving JPEGs when WebP exists is leaving performance on the table.
- Wrong dimensions — If you serve a 4000px-wide image for an 800px content column, the browser downloads 25× more data than it needs and then scales it down. All that extra data was wasted.
- No lazy loading — Without lazy loading, the browser downloads all images — including ones far below the fold — before showing the page.
The good news: all four of these are fixable, and none of them require changing your code, switching hosting providers, or spending money.
Audit Your Images: Find the Worst Offenders
Before fixing anything, I needed to know what I was dealing with. Here's the audit process I used:
Run PageSpeed Insights on your 5 highest-traffic pages
Go to pagespeed.web.dev and run each URL. The "Opportunities" section will list every image issue with an estimated savings in kilobytes.
Open Chrome DevTools Network tab
Press F12 → Network → filter by "Img". Sort by Size. Your biggest images are at the top. These are your priority targets.
Check file sizes and dimensions
Right-click any image → "Open image in new tab" → check the file size. Use DevTools Elements panel to compare the displayed width vs the image's natural width.
Use the EXIF Viewer to inspect metadata
Old images might contain camera data, GPS coordinates, and thumbnails that add unnecessary kilobytes. Use Image Blink's EXIF Viewer to check.
For my blog, the audit revealed that my top 10 most-visited posts accounted for 70% of my total image weight. I didn't need to fix everything — just those posts would move the needle significantly.
Pick the Right Format (This Matters More Than You Think)
Format choice has the largest single impact on file size. Here's what you need to know:
| Format | Best For | Compression vs JPEG | Transparency | Browser Support |
|---|---|---|---|---|
| JPEG | Photos | Baseline | ❌ | 100% |
| PNG | Logos, screenshots | 3–5× larger for photos | ✅ | 100% |
| WebP | Photos + graphics | 25–35% better | ✅ | 95%+ |
| AVIF | All images | 50% better | ✅ | 90%+ |
| SVG | Icons, illustrations | Vector (no comparison) | ✅ | 100% |
My approach: convert all blog post photos from JPEG to WebP. AVIF has slightly better compression, but WebP has near-universal browser support and is easier to work with.
For photos: Use WebP. For logos/icons with transparency: Use WebP or SVG. For screenshots: Use WebP or PNG. Never use PNG for photos — PNG files are 3–5× larger than WebP for the same quality.
I used Image Blink's JPEG to WebP converter to process my images. The format conversion alone reduced average file size from 2.1MB to 890KB — a 58% reduction before any additional compression.
Compress Ruthlessly (Without Losing Quality)
After converting to WebP, I ran each image through a compression step. The key insight most people miss: your eyes can't detect quality differences above about 80% quality setting for photos displayed on screens.
Blog photos: 80–85%
Visually indistinguishable from 100% but 40–60% smaller. The sweet spot for most content.
Product images: 85–90%
Slightly higher quality for e-commerce where customers zoom in to inspect details.
Hero/banner images: 75–80%
Large images benefit from more aggressive compression. Fine detail matters less at scale.
Headshots/portraits: 85%
Human faces are more sensitive — keep quality slightly higher for portrait photography.
After compression, my 890KB WebP files averaged 340KB — another 62% reduction. The images looked identical in side-by-side comparison.
Resize to Match Your Actual Display Size
This is the most overlooked optimization. If your blog content column is 800px wide, you need an image that's 800px wide (or 1600px for retina/2× screens). Serving a 4000px image for an 800px slot means the browser downloads 25× more pixels than it will ever display.
Inspect your content column width
In Chrome DevTools, click on your image, check the "Computed" tab in the Elements panel. Look for the rendered width in pixels. That's your target width.
Multiply by 2 for retina screens
Retina and HiDPI screens have 2× pixel density. If your content column is 800px wide, serve images at 1600px wide for crisp display.
Resize your images to match
Use Image Blink's Image Resizer — enter your target width, keep aspect ratio locked, and download.
For my blog with an 820px content column, I resized all images to 1640px wide (2× for retina). This alone saved an average of 1.2MB per image compared to my original 4000px exports.
Before and After: Real Results
After applying all four optimizations across my top 15 blog posts, here's what happened:
| Metric | Before | After | Change |
|---|---|---|---|
| PageSpeed Score (Mobile) | 34/100 | 81/100 | +138% |
| Average Page Load Time | 4.2 seconds | 1.7 seconds | −60% |
| Largest Contentful Paint (LCP) | 5.1s | 2.3s | −55% |
| Average Image File Size | 2.4MB | 340KB | −86% |
| Total Page Weight (typical post) | 18.6MB | 4.1MB | −78% |
| Google Avg. Position (top 5 posts) | 14 | 8 | +43% |
The ranking improvement was unexpected. The Core Web Vitals improvements (especially LCP) seem to have made a real difference in how Google assessed the pages. Organic traffic increased by roughly 23% in the following month.
The entire optimization process took about 4 hours across one weekend. Given the traffic increase that followed, that was one of the best 4-hour investments I've made in my blog.
The Free Tools That Made It Possible
I did the entire optimization using Image Blink's free secure, instant tools — no software to install, no subscriptions, no sharing with third-party servers.
JPEG to WebP
Converted all blog post photos from JPEG to WebP. Instant, free, no quality loss.
Compress WebP
Applied 82% quality compression for an additional 60% file size reduction.
Image Resizer
Resized all images to 1640px width (2× retina) from the original 3000–4000px exports.
EXIF Viewer
Stripped unnecessary metadata (camera data, GPS, software info) adding hidden file weight.
Where to start: Run your highest-traffic page through PageSpeed Insights, find the largest unoptimized images, and run them through the tools above. You'll see a measurable difference in under an hour.