How to compress website images without visible quality loss

The most common image mistake on small business websites is not using the wrong compression setting. It is uploading a 4,000-pixel photo straight from a phone into a slot that displays it 800 pixels wide. No quality slider can fix that efficiently. If you want to compress images without losing quality that visitors can see, the order of operations matters: resize, then choose a format, then compress, then check. This article turns that into a workflow you can repeat for a single banner or a catalogue of 500 products.

Before you start: keep your originals safe

Create a folder for untouched originals and a separate one for web-ready exports. Never overwrite the original with a compressed version. If you later need a bigger banner, a new crop or a different format, you will want the full-quality source rather than a copy that has already lost detail.

This also protects you from a quiet problem: repeatedly editing and re-saving compressed files degrades them a little more each time.

Step 1: Resize to the size the image is actually shown

Resizing gives the biggest saving of any step, because file size scales with pixel count. Halving width and height leaves a quarter of the pixels.

Find the display width

Open the page in Chrome, right-click the image and choose Inspect. Hovering over the img element shows both its rendered size and its intrinsic (file) size. If a 3,000-pixel image renders at 700 pixels, it is far bigger than needed.

Allow for sharp screens

High-density phone and laptop screens use two or more device pixels per CSS pixel. A sensible rule is to export at roughly twice the displayed width for important images, then let responsive srcset markup serve smaller versions to smaller screens. For a banner shown at up to 1,200 pixels wide, a 2,000 to 2,400-pixel master export is usually plenty.

Crop before you resize

Remove empty background, borders and irrelevant edges first. Cropping away pixels nobody needs reduces size and often improves the photo.

Step 2: Choose the format for the job

• Photos: JPEG as a universal baseline, or WebP/AVIF where your site can serve them.
• Logos and icons: SVG where available.
• Screenshots and graphics with text: PNG, or lossless WebP.
• Product cut-outs needing transparency: WebP or AVIF rather than a heavy PNG, if supported by your platform.

Step 3: Find the right quality level by eye

There is no universal "correct" number, but there is a quick method for finding one for your kind of images.

1. Pick three representative images: one with smooth areas like sky or a plain wall, one with fine detail like fabric or foliage, and one with faces or skin.
2. Open them in Squoosh, Google’s free browser-based tool, which shows the original and compressed versions side by side with a slider.
3. Start around quality 80 and lower it in steps of five.
4. View at actual size on a normal screen, and also on your phone. Stop at the lowest setting where you cannot see a difference without zooming in.
5. Note that number, and the format, as your standard setting for that image type.

Many people settle somewhere between 70 and 85 for lossy photos, but let your own test decide. Hero images that appear large on screen may deserve a slightly higher setting than small thumbnails.

Step 4: Batch process whole folders

Doing this one file at a time becomes impractical beyond a few dozen images. Batch tools apply the same resize and quality settings to an entire folder.

• Desktop apps: free tools such as XnConvert and the batch features in GIMP or Adobe Photoshop’s export options can resize and convert many files at once.
• Command line: ImageMagick can process thousands of files with a single command, which suits developers and repeat jobs.
• Consistent naming: rename files descriptively during export, such as "cotton-kurta-blue-front.jpg", rather than "IMG_20240512_1034.jpg". It helps your team and image search.

After a batch run, spot-check a handful of results rather than assuming every image came out well. Images with unusual lighting or lots of text may need individual attention.

Step 5: Remove unnecessary metadata

Photos from phones and cameras carry EXIF data: camera model, settings, date and sometimes GPS coordinates. Most optimisers can strip this. It trims a little weight, and for photos taken at a home office or a staff member’s house, it avoids publishing a precise location.

One caution: some images contain a colour profile. If colours look washed out after optimisation, keep the colour profile or convert to sRGB before exporting.

Step 6: Automate compression on upload

Workflows fall apart when a new staff member uploads a festival banner straight from their phone. The durable fix is to make the website compress images itself.

On WordPress and similar CMS platforms

Image optimisation plugins can resize oversized uploads to a maximum width, compress them, create WebP versions and generate multiple sizes for srcset. Check whether a plugin processes images on your own server or sends them to an external service, and whether it keeps the original.

On custom-built sites

Developers can resize and compress images at upload time using server-side image libraries, storing several widths for responsive markup. An image CDN is another option, generating sized and compressed variants on the fly from one master file.

Set a maximum upload size

Even with automation, set a sensible limit on upload dimensions or file size and show a clear message when it is exceeded. It prevents enormous files filling your storage.

A short checklist for every new image

• Original saved separately
• Cropped and resized close to display size, allowing for sharp screens
• Right format chosen for photo, graphic or transparency
• Compressed at your tested quality level
• Metadata stripped, colour profile preserved
• Descriptive file name and meaningful alt text added
• Checked on a phone at normal viewing size

Making it a habit rather than a clean-up project

Run your existing site through PageSpeed Insights and look for the "Properly size images" and "Efficiently encode images" opportunities to find the worst offenders. Fix those first, then put upload automation in place so the problem does not return.

If you manage a catalogue that grows every week, having compression built into your store is worth far more than occasional clean-ups. Our team can set this up as part of building or improving an online store.

Frequently asked questions

What file size should a website image be?

There is no fixed limit, but as a rough guide, most content and product images can sit comfortably under a few hundred kilobytes after resizing and compression. Large hero images may be somewhat bigger. Judge by what the image needs to show.

Are online image compressors safe to use?

Well-known tools are generally fine for public images like product photos. Avoid uploading confidential documents or personal photos to unknown services. Squoosh processes images in your browser rather than uploading them to a server.

Why do my images look blurry after uploading to my website?

Your platform may be recompressing them heavily or displaying a size larger than the uploaded file. Upload at sufficient dimensions and check whether your theme or plugin applies its own extra compression.

Should I compress images before uploading if my CMS already does it?

At least resize them first. Uploading huge originals wastes storage and processing time, and some systems keep the full file available. Light pre-compression plus automatic optimisation is a safe combination.