Why image size matters
Images usually make up the largest share of a web page’s weight. A single photo straight from a modern phone is often 3–6 MB, while the same picture displayed on a blog post rarely needs more than 150 KB. Oversized images slow down your pages, use up visitors’ mobile data, fill your hosting storage and can make email attachments bounce.
Speed also affects search. Google’s Core Web Vitals measure how fast the main content of a page appears (Largest Contentful Paint), and on most pages that main element is an image. Lighter images are one of the easiest ways to improve that score.
Lossy vs lossless compression
There are two ways to make an image file smaller:
- Lossless compression rewrites the file more efficiently without changing a single pixel. Savings are modest, typically 5–30%.
- Lossy compression removes detail the human eye barely notices, such as tiny colour variations in a blue sky. Savings are much larger, often 60–90%.
“Without losing quality” in practice means without visible loss. A well-tuned lossy setting produces a file that looks identical at normal viewing size, which is why it is the standard choice for photos on the web.
Step 1: Choose the right format
| Format | Best for | Notes |
|---|---|---|
| JPEG | Photos | Universally supported, great lossy compression, no transparency. |
| PNG | Logos, screenshots, graphics with sharp edges or transparency | Lossless, so photos saved as PNG are very large. |
| WebP | Photos and graphics on websites | Typically 25–35% smaller than JPEG at similar quality, supports transparency, works in all modern browsers. |
| AVIF | Websites that want the smallest files | Even smaller than WebP, but slower to encode and less widely supported by editing software. |
A quick rule: use WebP or JPEG for photos and PNG only when you need lossless edges or transparency. Converting a photographic PNG to WebP alone can cut its size by 80% or more.
Step 2: Resize before you compress
Pixel dimensions affect file size more than any quality setting. A 4000 × 3000 photo has 12 million pixels; resized to 1600 × 1200 it has under 2 million, about one-sixth of the data, before any compression at all.
Resize to the largest size the image will actually be displayed at. For most websites:
- Full-width hero images: 1920 px wide.
- Images inside a blog post or content column: 1200–1600 px wide.
- Thumbnails and cards: 400–800 px wide.
Our Image Resizer lets you set exact dimensions with the aspect ratio locked, so nothing gets stretched.
Step 3: Find the quality sweet spot
For JPEG and WebP, quality is set on a scale from 0 to 100. Image quality drops very little between 100 and about 80, while file size drops a lot. Below about 60, artefacts such as blocky skies and halos around edges start to appear.
- 80–85: a safe default for photography and product images.
- 70–80: great for blog images and backgrounds viewed at normal size.
- 60–70: fine for small thumbnails, but check faces and text carefully.
Always zoom in to 100% on one or two compressed images and compare them with the original before compressing a whole batch.
Step 4: Remove hidden metadata
Photos carry EXIF metadata: camera model, settings and sometimes the exact GPS location where the picture was taken. It adds kilobytes and can reveal private information. Re-encoding an image in the browser, as our compressor does, writes a fresh file without that metadata.
How to compress images with Tolket
- Open the free Image Compressor.
- Drag in up to 30 JPG, PNG or WebP files, or click to choose them.
- Pick WebP or JPEG output and set the quality, around 80 is a good start.
- Optionally set a maximum width to resize while compressing.
- Compare the before and after sizes, then download each image or all of them together.
Everything happens inside your browser, so your photos are never uploaded to a server. If an image is already optimised and would get bigger, the original is kept automatically.
Target file sizes for the web
| Image type | Good target |
|---|---|
| Hero or banner image | Under 200 KB |
| Image inside an article | Under 100 KB |
| Product photo | 80–150 KB |
| Thumbnail or card image | Under 30 KB |
| Whole email newsletter | Under 1 MB of images in total |
These are guidelines, not hard limits: a detailed photograph may need a little more, while a flat illustration can be far smaller.
Extra tips for faster websites
- Add
widthandheightattributes to images so the layout does not jump while they load. - Use
loading="lazy"for images further down the page. - Serve different sizes to phones and desktops with
srcset; WordPress does this automatically for images in the media library. - Compress images before uploading them to your CMS; many plugins only optimise copies, not the original upload.
Filling in an online form with a strict limit? See how to compress an image to 20KB, 50KB or 100KB for a step-by-step method that hits an exact file size.
Frequently asked questions
Does compressing an image always reduce its quality?
Lossless compression never changes pixels. Lossy compression does remove some information, but at sensible settings (around 75–85) the difference is not visible at normal viewing size.
Can I compress an image twice?
You can, but each lossy pass removes a little more detail. Keep your originals and always compress from the original file rather than from an already compressed copy.
Is WebP safe to use on my website?
Yes. WebP is supported by all current versions of Chrome, Edge, Firefox and Safari. Keep JPEG or PNG copies if you also need to send the images to older software.
Why did my PNG barely shrink?
PNG is lossless, so the savings are limited. If the image is a photo, convert it to WebP or JPEG for a much smaller file. If it is a logo or screenshot, PNG may already be the right choice.