Skip to content
Toolew.com
Guides

How to compress images without visible quality loss

Choose the right format, size and quality setting for photos, screenshots and graphics, and shrink images for websites, forms and email in your browser.

By Toolew Team ·· 4 min read

Table of contents
  1. Step 1: resize before you compress
  2. Step 2: pick the right format
  3. Step 3: choose a quality setting
  4. Hitting an exact file-size limit
  5. Remove metadata while you are at it
  6. Batch workflow for a website
  7. Why browser-based compression is safer
  8. Summary

Large images are the most common reason web pages load slowly and the most common reason online forms reject an upload. A phone photo is often 3–6 MB and 4,000 pixels wide, while a website hero image rarely needs more than 2,000 pixels and a passport-photo field may accept only 50 KB. The good news is that most images can be made five to twenty times smaller with no difference anyone will notice, as long as you make three decisions in the right order: size, format, then quality.

Step 1: resize before you compress

Compression settings get the attention, but pixel dimensions usually matter more. File size grows with the number of pixels, which is width multiplied by height. Halving both dimensions leaves a quarter of the pixels, so the file is roughly a quarter of the size before you touch the quality slider.

Work out the largest size the image will actually be displayed at:

  • Website content images: the width of your content column, multiplied by 2 for high-density (Retina) screens. A 800-pixel column needs at most a 1,600-pixel image.
  • Full-width hero images: 1,920–2,560 pixels wide is plenty for almost every screen.
  • Email attachments and chat: 1,280–1,600 pixels on the long side is sharp on phones and laptops.
  • Upload forms: follow the stated limits exactly, for example 600 × 600 pixels for some ID photos.

The Image Resizer keeps the aspect ratio locked by default, so an image never gets stretched, and it can resize a whole batch to the same maximum width at once.

Step 2: pick the right format

Each format is designed for a different kind of image. Using the wrong one is how a simple logo ends up as a 900 KB file.

Image type Best format Why
Photos WebP or JPEG Lossy compression is designed for continuous tones
Screenshots, UI, text PNG or lossless WebP Sharp edges and flat colours stay crisp
Logos, icons, illustrations SVG (if vector) or PNG Scales perfectly; tiny for simple shapes
Photos that need transparency WebP or PNG JPEG has no transparency

WebP is supported by every current major browser and is typically 25–35% smaller than JPEG at the same visual quality. It is the best default for websites. AVIF can be smaller still, but encoding is slower and not every tool chain supports it yet. JPEG remains the safest choice for compatibility, such as email or older software, and PNG is lossless, which makes it ideal for screenshots but very inefficient for photos.

If a screenshot of text looks blurry or “fuzzy” after compression, it was probably saved as JPEG. Convert it to PNG with the Image Format Converter instead.

Step 3: choose a quality setting

For lossy formats, the quality setting controls how much detail the encoder may discard. The relationship is not linear: going from 100 to 85 often halves the file with no visible change, while going from 60 to 40 saves far less and introduces obvious artefacts.

Practical starting points:

  • 85–90: professional photography, product images where detail sells
  • 75–82: most website photos; the sweet spot for size versus quality
  • 60–70: thumbnails, background images, previews

Always compare at 100% zoom on the parts of the image most likely to show damage: smooth gradients such as sky (look for banding), fine text, and sharp edges against flat colour (look for “ringing” halos). The Image Compressor shows the original and compressed sizes side by side, so you can lower the quality step by step and stop as soon as you see a difference.

Hitting an exact file-size limit

Government portals, job applications and exam forms often demand an image “under 100 KB” or “between 20 and 50 KB”. The fastest route is:

  1. Crop to the required framing (for ID photos, usually the head and shoulders).
  2. Resize to the required pixel dimensions, or about 600 pixels wide if none are given.
  3. Save as JPEG and reduce the quality until the file is under the limit.

A 600 × 600 pixel JPEG at quality 80 is usually 50–90 KB. If it is still too large, reduce the dimensions slightly rather than pushing quality below 60.

Remove metadata while you are at it

Photos from phones contain EXIF metadata: camera model, date, settings and often the GPS coordinates where the photo was taken. This metadata can add 10–60 KB to a file and, more importantly, can reveal your home address when you share a picture publicly. The EXIF Remover strips it without recompressing the image. Most social networks remove location data automatically, but email attachments, file-sharing links and many forums do not.

Batch workflow for a website

If you are preparing a folder of images for a blog or online shop, this routine works well:

  1. Resize all images to your maximum display width (for example 1,600 pixels).
  2. Convert them to WebP at quality 78–82.
  3. Keep a JPEG fallback only if your platform requires it.
  4. Strip metadata.
  5. Spot-check two or three images at full zoom.

On a typical product catalogue this turns 4 MB phone photos into 120–250 KB files, a reduction of over 90%, which can cut page weight dramatically and improve Largest Contentful Paint, one of Google’s Core Web Vitals.

Why browser-based compression is safer

Many online compressors upload your images to a server, process them and send them back. Toolew’s image tools use your browser’s own image engine, so photos never leave your device. That is faster for large batches and appropriate for personal documents, ID photos and unreleased product shots.

Summary

Resize to the display size first, choose the format that matches the content, then lower quality until just before you can see a difference. Those three steps, in that order, give you small, sharp images every time.

Tools mentioned in this article

T
Toolew Team

Editorial team

The Toolew team builds and maintains the tools on this site and writes practical guides on using them well. Every workflow we describe is tested with the tools it mentions.

Related articles

Necessary
Required for security, language and theme preferences. Always on.