How to Compress Images for a Website Free (WebP Too)

To compress images for a website, resize each one to roughly the largest size it's displayed at (about twice that for sharp screens), then save photos as WebP or JPG at 75-80% quality. Logos and screenshots with transparent areas can go to WebP too, or stay PNG. The free image compressor handles up to 20 images at once, shows the new size of each, and runs in your browser, so you can prepare a whole page of images in a minute without uploading them anywhere.

Images are usually the heaviest part of a web page. A blog post with six straight-from-the-camera photos can easily weigh 20-30 MB, when the same post would look identical at well under 1 MB. That difference is felt most by visitors on phones and slow connections, and page speed is one of the things search engines look at.

The three things that make images heavy

1. Too many pixels. A phone photo is around 4000 px wide. Your blog column might be 700-800 px wide. Every pixel beyond what's shown is downloaded and then thrown away by the browser.
2. The wrong format. Photos saved as PNG are many times larger than the same photo as JPG or WebP. Screenshots and logos saved as JPG can look smudgy for little saving.
3. Quality set too high. Saving at 100% quality adds a lot of bytes for detail nobody sees. Around 75-85% is very hard to tell apart from the original at normal size.

Fix them in that order: pixels first, then format, then quality.

Step 1: Resize to the display size

Work out how wide each image is actually shown. Your theme's content column, a full-width hero banner, a product thumbnail and a team headshot all have different widths.

A good rule: resize to about 2x the displayed width, so it stays sharp on high-density screens (most phones and many laptops), but no more.

Where the image appears	Shown at about	Resize to about
Full-width hero banner	1200-1440 px	1600-2400 px
Blog content column	700-800 px	1200-1600 px
Two-column grid	400-600 px	800-1200 px
Thumbnail or avatar	100-200 px	200-400 px

Use the free image resizer: choose Pixels, keep Lock proportions on, type the width and click Resize image. It saves JPG by default, so pick PNG or WebP under Save as for logos with transparency. It handles one image at a time, so this is the slow part. If many images go in the same slot, resize them to the same width.

Step 2: Choose the format

Image type	Best format	Why
Photos	WebP (or JPG)	Smallest files for photographic detail
Logos, icons, illustrations with transparency	WebP or PNG; SVG if you have it	Keeps transparency and sharp edges
Screenshots with text	WebP or PNG	Sharp text; JPG can blur edges
Animated images	Keep as GIF or use video	The compressor saves still images

WebP is supported by all current major browsers and is usually noticeably smaller than JPG at the same visible quality. If you need to support very old software or an email newsletter, JPG is the safe choice. There's a full comparison in WebP vs PNG vs JPG.

Step 3: Compress the batch

Open the free image compressor:

1. Drop in up to 20 resized images at once (it refuses photos above about 16.7 megapixels and doesn't open HEIC, so don't skip the resize for straight-from-the-phone shots).
2. Under Save as, choose WebP (or JPG). Same format keeps each file's own type, which is handy for mixed batches, but it barely shrinks PNGs; the tool warns you about that.
3. Set Quality to 75-80%.
4. Click Compress images (the button counts them). Each file shows its old size, new size and the percentage saved, and the total for the whole batch appears beside the buttons.
5. Click Download all (ZIP).

Then open two or three of the results at full size and look closely at skies, skin and gradients. If you see banding or blockiness, go up to 85%. If they look perfect, try 70% for the next batch.

If your device can't create WebP files (some older devices can't), you'll see a message on that image; choose JPG instead or try another browser.

Rough size targets

Sizes depend on the image, but these are sensible targets to aim for:

• Hero images: under about 200-300 KB
• Images inside articles: under about 100-150 KB
• Thumbnails: under about 20-30 KB

They're common rules of thumb rather than hard limits. If one image is far over its target after compressing, it's almost always too wide. See compressing an image to 100 KB and to 200 KB for hitting specific sizes.

Converting a whole library to WebP

If your images are already the right size and you only want to switch format, the free JPG to WebP converter and PNG to WebP converter do that in batches of 20, with the same quality slider. PNG to WebP keeps transparent backgrounds.

A few HTML habits that help

Compressing is the big win, but a few small markup habits also help pages load smoothly:

• Add width and height to your <img> tags so the page doesn't jump while images load.
• Add loading="lazy" to images further down the page, so they load only as the visitor scrolls.
• Write a short alt text for each image, for screen readers and search engines.

Most website builders and CMSs handle some of this for you; check your platform's settings.

Why compress on your own device

When you compress in the browser, nothing is uploaded, so large batches don't wait on your upload speed, and unpublished product shots or client photos stay private. The lossy vs lossless explainer covers what the quality setting actually throws away.

Do it now

Resize to about twice the display width, then drop the batch into the free image compressor, choose WebP at 75-80% and download the ZIP. Free, no sign-up, and your images never leave your computer.