How to compress images
How to make your image files smaller before uploading them to your website, with free tools and a step-by-step process.
- Time
- 2–5 minutes per image
- Difficulty
- Beginner
- You’ll need
- An internet connection · Your original image files
A compressed image is a smaller file that downloads faster — without looking noticeably different to the human eye. Compressing your images before uploading them is one of the single most effective things you can do to speed up your website.
This guide shows you exactly how to do it, using free tools.
Quick summary
Use Squoosh (squoosh.app) to compress images in your browser for free. Target file sizes of under 200 KB for most images, under 300 KB for hero banners. Compression often makes files much smaller with no visible quality loss.
What you'll need
- An internet connection
- Your original image file(s)
The easiest free tool: Squoosh
Squoosh (squoosh.app) is a free, browser-based image compression tool from Google. No download, no sign-up required, and your images never leave your device — Squoosh does the work locally.
Open Squoosh. Go to squoosh.app in your browser.
Drop your image onto the page. Drag and drop an image file from your computer, or click to browse for it.
Choose your output format. In the Compress section of the settings panel, choose WebP or MozJPEG for photographs. For images with transparency, choose WebP or OxiPNG. A slider on the image lets you move between the original and compressed version to compare.
Adjust the Quality slider. Squoosh's own starting value (75 for WebP and MozJPEG) is a sensible place to begin. Look at both sides of the comparison. If you can't see a difference, reduce quality a little more. Stop when you'd notice the difference.
Check the file size. Squoosh shows the compressed file's size next to the download button, with the change from the original as a percentage. Aim for under 200 KB for most images, under 300 KB for full-width hero images.
Download the compressed image. Click the download button (the arrow icon) beside that file size. Save the compressed file with a clear name.
Other free tools
If you prefer alternatives:
- TinyPNG / TinyJPG (tinypng.com) — drag and drop, handles JPG, PNG, WebP and AVIF, automatic compression
- ImageOptim (imageoptim.com) — free, open-source Mac app. Drag files into its window and it optimizes them for you. Work on copies, and keep your originals somewhere safe.
- Canva — export your design at the size you need, then run the file through Squoosh or TinyPNG
- Preview on Mac — open the image, choose Tools → Adjust Size to make it smaller, then File → Export to save the new copy.
How much to compress
A good guide:
| Image use | Target file size |
|---|---|
| Hero banner (full-width) | Under 300 KB |
| Blog post / article image | Under 150 KB |
| Team photo or headshot | Under 80 KB |
| Product image | Under 200 KB |
| Logo (PNG) | Under 50 KB |
These are targets, not hard limits. A 350 KB hero image is fine. A 4 MB hero image is not.
Batch compression
If you have many images to compress at once:
- TinyPNG accepts up to 20 images at a time (5 MB each) on its free web page
- ImageOptim (Mac) compresses a whole batch of images you drop into its window
- Squoosh is a web app only: the old Squoosh command-line tool is no longer part of the project, so we don't recommend it for new work
If you're uploading a large number of images to a website, contact us and we can help set up an automated optimization process.
What about WordPress?
WordPress keeps your original file, automatically scales down very large uploads for use on the site, and makes smaller copies of each image, but its own performance guide still says to make sure every image file is optimized. Plugins like Imagify, ShortPixel, or Smush can automatically compress images when you upload them. We can recommend and set one up for your site if needed.
Compress before uploading
Even with an optimization plugin on your site, it's still good practice to resize images before uploading. A properly sized image compressed at source is faster to upload and takes less server storage.
Common questions
Will compression make my images look worse?
Not noticeably, if you check as you go. Lossy compression throws away detail that's hard to see, especially in photos. There's no single setting that suits every image, so compare the original and compressed version in Squoosh — if you can't spot the difference at a normal viewing size, the compression is fine.
Should I keep the original file?
Yes, always. Keep your original full-resolution image somewhere safe (a labeled folder in Google Drive or on your computer). You can't recover quality from a compressed file, but you can always re-compress from the original.
My images look fine — do I really need to do this?
If your site loads quickly, you may not notice a problem. But images are often the heaviest files on a page, so unoptimized images are a common cause of slow page loads. Speed affects user experience, and Google says good Core Web Vitals — which include a measure of loading performance — align with what its core ranking systems reward. See Images & page speed for more.
Related guides
Need a hand?
Learn more
Last updated