How to Compress Images Without Losing Quality

A practical step-by-step guide to reducing image file size for websites, blogs, and ecommerce — with settings that protect visual quality.

Step 1: Choose the right format

Format choice is the most important decision before you compress. Choosing the wrong format means you lose quality you did not need to lose, or end up with a larger file than necessary.

• JPG — best for photographs, product images, and any full-color photo without a transparent background. JPG uses lossy compression that is nearly invisible at settings between 78–88%.
• PNG — best for logos, screenshots, graphics with sharp text, and anything that requires transparency. PNG is lossless, so compression is less aggressive. File sizes will be larger than JPG for the same photo.
• WebP — the modern standard for websites. Supports both lossy and lossless. Produces smaller files than JPG or PNG at equivalent visual quality. Supported by Chrome, Firefox, Safari, and Edge. Use WebP for website images whenever compatibility allows.

Step 2: Resize before you compress

Resizing is usually more effective than compression alone. A DSLR camera produces images that are 4000–7000px wide. If that image is displayed at 1200px on a website, you are sending visitors a file 10–30 times larger than it needs to be.

Resize the image to the actual display size first — then compress. This single step typically reduces file size by 70–90% before any quality settings are touched. The result is a smaller file with no visible quality loss because the extra pixels were never going to be seen anyway.

Common target widths for website images:

• Hero images: 1200–1600px wide
• Blog post images: 1200px wide
• Product thumbnails: 600–800px wide
• Sidebar or card images: 400–600px wide
• Full-bleed background images: up to 1920px wide

Step 3: Set compression quality correctly

Quality settings between 75% and 88% are the useful range for most website images. This is where file size drops significantly while visual quality remains high at normal viewing sizes.

• 88–92% — barely any visible compression. Use for portfolio photography, print-adjacent work, or close-up product shots where fine details matter.
• 80–87% — the standard range for website photos. Very hard to see any quality difference at normal screen sizes. This is where most images should land.
• 70–79% — acceptable for thumbnails, small card images, and backgrounds. May show slight softness in fine detail. Check carefully before publishing.
• Below 65% — visible quality loss becomes common. Blocky artifacts appear in gradients and photo edges. Avoid for anything that will appear prominently on a page.

Full compression workflow

1. Start with the original, highest-quality file you have.
2. Decide where the image will appear and what size it will display at.
3. Resize the image to that display size.
4. Choose a format: WebP for websites, JPG for photos, PNG for graphics.
5. Set quality between 80–85% and export.
6. Preview at actual display size and check for any visible degradation.
7. Adjust quality up if the image looks soft or blocky; rarely go below 75%.
8. Name the file clearly before downloading (e.g., home-team-photo-sacramento.jpg).

Common mistakes to avoid

• Uploading camera-sized files directly — a 6MB DSLR photo on a website is never necessary. Always resize first.
• Using PNG for large photos — PNG is lossless and produces much larger files than JPG or WebP for photographs. Only use PNG when transparency or sharpness on a logo is required.
• Compressing without checking the result — always preview at viewing size before publishing, especially for text, faces, and product edges.
• Compressing a compressed file — compressing a JPG that was already compressed adds quality loss without meaningful size reduction. Always start from an original or high-quality source.
• Vague file names — names like image-final-copy3.jpg make files hard to manage and miss SEO opportunities. Use clear, descriptive, hyphenated names.
• Forgetting mobile — preview the image on a phone screen. Mobile displays often reveal compression artifacts that look acceptable on desktop.

Pre-publish checklist

• Image is resized to the display width needed — not camera size.
• Format is appropriate: WebP or JPG for photos, PNG only for transparency.
• Quality is between 75–88%. Not pushed below 65%.
• Preview looks clean at actual display size — no blurring, blocking, or washed-out detail.
• File name is descriptive and uses hyphens (no spaces, no generic names).
• Alt text is written to describe what the image shows, not stuff keywords.
• Image has been previewed on a mobile screen before publishing.