Introduction
Most DIY website owners upload images straight from a camera or Canva design without thinking about file size. The result? A site that looks good on your screen, but loads painfully slow for visitors.
In this guide, you’ll learn:
- The difference between pixels and DPI
- Why file size impacts performance
- How compression works
- A simple workflow for optimizing your images
- How image size affects Google rankings
And if you want to test your own site right away,
try our free Image Health Check tool.
Pixels and DPI – what they mean for your images
When we talk about image size, two terms come up a lot: pixels and DPI. They describe different things, but both can affect how heavy your files are.
- Pixels: The width and height of your image in tiny colored squares. For example, 1200×800 pixels.
- DPI (dots per inch): A setting that tells how many dots of detail are stored in the file. Printers need high DPI for sharp results on paper.
- On the web: Your screen shows pixels, not ink dots. A 72 DPI setting is usually enough.
- Why it matters: If you export an image at 300 DPI instead of 72 DPI, the file often becomes much larger – without looking better on your site.
👉 For websites, focus on pixel dimensions (how wide/tall the image is on screen) and keep the DPI setting low (72 is fine). That way you avoid bloated files that slow your site down.
File size and performance
Every image has a file size – measured in KB (kilobytes) or MB (megabytes).
- A 5 MB photo from your phone might look amazing, but it’s a disaster for page speed.
- Aim for under 200 KB for most site images.
Here’s a quick rule of thumb:
| Image type | Recommended size |
|---|---|
| Hero / banner | 150–300 KB |
| Blog post images | 80–150 KB |
| Thumbnails | 20–50 KB |
| Logos / icons | < 20 KB |
A smaller file loads faster, saves bandwidth, and keeps visitors happy
Compression explained
Compression reduces file size without (always) ruining quality. There are two main types:
- Lossless: Keeps every pixel of data (e.g. PNG, WebP lossless). Bigger file size, but exact quality.
- Lossy: Removes some data (e.g. JPEG, WebP lossy). Much smaller files, usually with no visible difference on screen.
Here’s how you might serve optimized images in modern HTML:
<picture>
<source srcset=”image.webp” type=”image/webp”>
<img src=”image.jpg” alt=”Example image” width=”800″ height=”600″>
</picture>
This tells browsers to use WebP if possible, and fall back to JPEG if not.
A simple compression workflow
You don’t need fancy software to shrink your images. Here’s a quick process you can repeat:
- Resize your image to the actual display size (don’t upload 4000px if it shows as 800px wide).
- Save as JPEG or WebP for photos, PNG or SVG for logos/icons.
- Run it through a free tool like TinyPNG or Squoosh.
- Check file size – aim for under 200 KB for most images.
- Upload to your site, and test page speed.
👉 Repeat this workflow for every new image you add. Over time, your site stays fast and lean.
What Google sees
Google doesn’t just read your text – it also looks at your images. Large, uncompressed images can:
- Increase page load times
- Hurt Core Web Vitals (especially LCP – Largest Contentful Paint)
- Reduce SEO rankings
- Frustrate mobile users on slow connections
👉 Keeping your images small is an SEO win, a UX win, and a hosting bill win.
Conclusion
Yes, in this case size really matters. The smaller and smarter your images are, the faster your site will load – and the happier both Google and your visitors will be.
Want to know if your site’s images are healthy? Run a free test with our Image Health Check.