How to Optimize Images for Web (Complete Guide for 2025)
A practical checklist for making your site load faster. Compress, resize, convert, and lazy-load your images with free tools.
Two months ago my personal blog scored a 45 on Google PageSpeed Insights. Embarrassing. I spent a Saturday afternoon going through every image on the site and by Sunday night that number was 94. The only thing I changed was how I handled images. No server upgrades, no code refactoring, no CDN subscription.
Images account for roughly 50 to 65 percent of an average web page’s total weight. That was true for my blog too. I had uploaded photos straight from my phone, full resolution, no compression, wrong formats. Every visitor was downloading megabytes of data they didn’t need.
Here’s what I did to fix it, step by step.
Why image optimization matters (the numbers)
Akamai published research showing that every additional second of load time drops conversion rates by about 7 percent. Google’s own data shows that pages loading in under 2 seconds have bounce rates roughly half of pages taking 5 seconds or more.
My blog before optimization: 4.3 seconds Largest Contentful Paint on mobile. After: 1.1 seconds. That three-second improvement probably saved my search rankings, since Google uses page experience as a ranking factor.
The crazy part is that none of this required any technical skill. I just followed a checklist.
The optimization checklist
1. Compress every image
This is the single biggest win. I ran my homepage hero image through the ImgPrism image compressor and it went from 3.8MB to 410KB. That’s an 89% reduction. I zoomed both versions to 300% and couldn’t see a meaningful difference.
Start at 80% quality. For background images and banners where nobody’s pixel-peeping, 65 to 70% works fine. For product shots or portfolio photos, stay around 80%.
One mistake I used to make: compressing images that were already compressed. Always start from the original file. Each re-compression stacks quality loss on top of quality loss.
2. Pick the right format
Not all image formats are equal. JPEG handles photographs well. PNG is better for graphics with sharp lines, text, or transparent backgrounds. WebP beats both of them in file size most of the time.
I wrote up a full breakdown with real test numbers in my JPEG vs PNG vs WebP comparison. The short version: use WebP when you can, PNG for transparency and text, JPEG as a last resort for photos.
The format you pick can change file size by 30 to 50 percent even before compression. It matters.
3. Resize to the actual display size
This one caught me off guard. My blog theme displays images at 800 pixels wide, but I was uploading 4000-pixel photos straight from my camera. The browser had to download all that extra data and then throw most of it away to fit the layout.
I started resizing images to match their display dimensions before uploading. A photo that looked fine at 800 pixels but was stored at 4000 pixels was needlessly large. After resizing to 800 pixels wide and then compressing, my average image dropped from 2 to 3MB down to 100 to 200KB.
The order matters here. Resize first, then compress. Doing it the other way around wastes compression effort on pixels nobody will ever see.
4. Convert to WebP
If your site runs on any modern platform (and it should in 2025), WebP is safe to use everywhere. Chrome, Firefox, Safari, Edge, even Samsung’s browser handles it. The last compatibility concerns disappeared years ago.
I convert my images to WebP as the final step in my workflow. Typical savings over JPEG are 25 to 35%. Over PNG the savings can be 60 to 80%.
For one of my blog posts with 12 images, converting everything to WebP shaved 1.4MB off the total page weight. That alone knocked half a second off load time.
5. Write proper alt text
This doesn’t help with load speed, but it helps with SEO and accessibility. Alt text tells search engines what your image shows and lets screen readers describe it to visually impaired users.
Keep it specific but concise. “Golden retriever catching a frisbee in a park” is good alt text. “Image” or “dog photo” is useless. I try to write alt text that would make sense if you read it aloud to someone who couldn’t see the screen.
Google has confirmed that alt text is used for image search ranking. On my blog, image search traffic went from about 80 visits per month to over 300 after I went back and added proper alt text to every image. Took me maybe two hours total.
6. Enable lazy loading
Lazy loading means images only download when they’re about to scroll into view. Someone who reads the top of your page and leaves never downloads the images at the bottom.
Most modern frameworks support it natively. In plain HTML you just add loading="lazy" to your image tags:
<img src="photo.webp" alt="Description here" loading="lazy" width="800" height="600">Notice the width and height attributes too. They prevent layout shifts, which Google measures as a separate performance metric called CLS. My CLS score went from 0.18 to 0.02 after adding dimensions to every image. Small change, big impact.
Before and after: my blog’s actual numbers
Here’s what changed on my blog after running through this entire checklist.
| Metric | Before | After | Change |
|---|---|---|---|
| PageSpeed score (mobile) | 45 | 94 | +49 |
| Largest Contentful Paint | 4.3s | 1.1s | -3.2s |
| Total image weight (homepage) | 8.4MB | 920KB | -89% |
| Number of requests | 34 | 19 | -44% |
| Cumulative Layout Shift | 0.18 | 0.02 | -0.16 |
| Bounce rate (30-day avg) | 62% | 48% | -14% |
The bounce rate improvement surprised me. I expected faster load times but I didn’t expect visitors to stick around that much more. Turns out people really do leave when pages feel slow.
Manual optimization vs. automation
I do all my image optimization manually using browser-based tools. It gives me control over quality settings for each image, and I can inspect the results before publishing.
But if you’re managing a site with hundreds of images, that gets tedious fast. CMS plugins like Smush for WordPress or built-in features in platforms like Shopify handle compression and format conversion automatically. They’re not as precise as manual work, but they’ll catch 80% of the problem with zero effort.
My approach for larger projects: let the CMS handle the routine stuff automatically, then manually optimize hero images, product photos, and anything above the fold where quality really matters.
The free tools on ImgPrism handle all of this in your browser. Nothing gets uploaded to a server. Your images stay on your device the whole time.
Tools you’ll need
- Compress images to reduce file sizes by 60 to 90%
- Resize images to match your display dimensions
- Convert to WebP for the smallest possible file sizes
No accounts, no uploads, no watermarks. Open the tool, drop your image in, download the result.