Image Compression Techniques Guide

Here’s a number that matters: the average web page in 2026 is about 2.5MB, and roughly half of that is images. Get compression right and your pages load fast. Get it wrong and visitors leave before they see anything.

The tricky part is that compression isn’t one thing. There are fundamentally different approaches, each with trade-offs. Understanding those trade-offs means knowing when to use what—and why your product photos look great while your screenshots look terrible (or vice versa).

For the complete strategy guide covering formats, tools, and workflows, see our complete guide to image compression. This article focuses on the core techniques themselves.

The Three Approaches (And When Each Makes Sense)

Lossless: Nothing Lost, Smaller Package

Lossless compression is like vacuum-packing clothes for travel. Everything’s still there—you’re just storing it more efficiently.

The algorithm finds patterns and redundancy in the data, then encodes them more compactly. A row of 100 identical blue pixels doesn’t need to store “blue” 100 times. It stores “blue × 100.”

The results vary wildly depending on content. An image with large areas of solid color might compress to 30% of its original size. A noisy, detailed photograph might only shrink by 10-15%.

Lossless makes sense when:

• The image has sharp edges and text (screenshots, diagrams, logos)
• You need to edit the file again later
• Color accuracy is critical (medical imaging, technical documentation)
• The content is simple enough that lossless gets you small files anyway

Common lossless formats: PNG (the web standard), TIFF (professional/print), WebP (can do lossless too)

Format	Typical Use	File Size
PNG	Screenshots, logos, graphics	Medium
TIFF	Print, archival	Large
WebP lossless	Modern web graphics	Smaller than PNG

Lossy: Throw Away What You Won’t Miss

Lossy compression is more aggressive. It permanently removes data from the image—specifically, data that’s hard for human eyes to perceive.

Human vision is sensitive to some things (edges, faces, high contrast) and less sensitive to others (subtle color variations, high-frequency texture details). Lossy compression exploits this. It keeps the stuff you notice and discards the stuff you don’t.

The file size drops dramatically. A photograph that’s 8MB uncompressed might become 200KB compressed. That’s a 97% reduction.

The catch: You lose data permanently. Compress a JPEG, save it, then try to “uncompress” it later—those details are gone. The more aggressive the compression, the more visible the artifacts.

Lossy makes sense when:

• You’re working with photographs
• File size matters (web delivery, storage costs)
• The image will be displayed at a fixed size (not zoomed into)
• “Good enough” quality is… good enough

Common lossy formats: JPEG (the veteran), WebP (the modern choice), AVIF (the new hotness)

Format	Compression Quality	Browser Support
JPEG	Good	Universal
WebP	Better (25-35% smaller than JPEG)	Essentially universal
AVIF	Best (50%+ smaller than JPEG)	Growing, not complete

For head-to-head format comparisons, check out our WebP vs JPEG vs PNG comparison and AVIF format guide.

Perceptual: Smarter About What to Keep

Perceptual compression is lossy compression that’s gotten clever. Instead of applying the same reduction everywhere, it uses models of human vision to decide where to compress aggressively and where to preserve detail.

An edge in the image? Keep it sharp—humans notice edges. A smooth gradient in the background? Compress it heavily—humans won’t notice the difference.

The result: Images that look better at the same file size, or the same quality at smaller file sizes. This is what modern compression tools use under the hood.

BulkImagePro’s compressor uses perceptual techniques to maximize compression while preserving what matters. You get smaller files without the obvious artifacts.

Matching Technique to Image Type

Photographs

Use lossy compression. Photographs contain the kind of organic, continuous-tone detail that lossy algorithms handle well. Start around 80% quality and adjust from there.

JPEG works everywhere. WebP gives you smaller files. AVIF is even smaller but check your browser support requirements.

Screenshots and UI

Use lossless compression (PNG or lossless WebP). Screenshots typically have hard edges, text, and areas of solid color. Lossy compression creates visible halos around text and muddy edges around UI elements.

The one exception: if your screenshot is mostly a photograph with some UI overlaid, test both approaches.

Logos and Icons

Lossless, or better yet, SVG. Logos are vector graphics—they shouldn’t be photographs in the first place. SVG files are tiny and scale perfectly to any size.

If you must use a raster format, PNG with transparency. Never JPEG a logo with a transparent background.

Graphics with Gradients

This is where you actually need to test. Some gradients compress well with lossy algorithms. Others develop visible banding—stepping between color values instead of smooth transitions.

If you see banding, either increase quality or switch to PNG.

The Quality Setting (And How to Choose It)

For lossy compression, the “quality” setting controls the trade-off between file size and visual quality. Higher quality = larger file = better looking. Lower quality = smaller file = more artifacts.

Here’s the rough breakdown:

Quality	What You Get	When to Use It
90-100%	Virtually indistinguishable from original	Almost never needed for web
80-89%	Excellent quality, hard to spot differences	Hero images, portfolio shots
70-79%	Good quality, efficient file sizes	Most blog and article images
60-69%	Acceptable quality, very efficient	Thumbnails, previews
Below 60%	Noticeable degradation	Only when size is critical

The sweet spot for most web use is 70-85%. You get massive file size reductions with minimal visible impact.

One important note: these numbers aren’t standardized. “Quality 80” in Photoshop isn’t the same as “Quality 80” in ImageMagick. The numbers are relative within each tool.

The Compression Workflow

1. Start with the Largest Source You Have

Compression works best when you start with a high-quality original. Upscaling a small image then compressing it doesn’t gain you anything—you’re just processing garbage.

2. Resize First

A 4000×3000 pixel image displayed at 800×600 wastes bandwidth regardless of compression. Resize to your actual display dimensions before compressing.

BulkImagePro’s resizer handles batch resizing. Get your dimensions right first.

3. Compress to Target Size

Pick an appropriate quality level based on use. Test the result. Adjust if needed.

BulkImagePro processes up to 50 images at once with consistent settings. Upload, configure, download—done.

4. Verify Quality

Don’t just check file sizes. Actually look at the images at their display size. Check for:

• Blocking artifacts (visible squares, especially in smooth areas)
• Banding (stepping in gradients)
• Color shifts (important for product photos)
• Blurring (loss of fine detail)

Artifacts: Recognizing Problems

JPEG/Lossy Artifacts

Blocking: The image breaks into visible 8×8 pixel squares. Most obvious in smooth areas like skies. Fix: increase quality.

Ringing/Halos: Ghost edges around high-contrast boundaries. Common around text on backgrounds. Fix: increase quality or switch to PNG.

Color banding: Gradients show visible steps instead of smooth transitions. Fix: increase quality or try a different format (WebP often handles gradients better than JPEG).

Over-Compression Signs

If you see any of the above at normal viewing size, you’ve compressed too much. Back off the quality setting.

When in doubt, err toward higher quality for final deliverables. Storage is cheap; looking bad is expensive.

Advanced Techniques

Progressive Loading

JPEG images can load in stages—a blurry preview that sharpens as more data arrives. Users see something immediately rather than waiting for top-to-bottom rendering.

Enable progressive encoding when exporting. Most modern tools have this option.

Responsive Images

Serve different sizes for different devices. A phone doesn’t need the same resolution as a desktop monitor.

Use srcset in HTML to give browsers options. They’ll choose the appropriate size automatically.

Format Negotiation

Serve WebP to browsers that support it, JPEG to those that don’t. This is server-side configuration (or can be handled by CDNs like Cloudflare).

You get optimal compression for modern browsers without breaking older ones.

Lazy Loading

Images below the fold don’t need to load immediately. The loading="lazy" attribute defers off-screen images until users scroll near them.

This doesn’t reduce image sizes, but it reduces perceived load time by prioritizing visible content.

Quick Reference

Image Type	Format	Quality	Target Size
Product photos	WebP or JPEG	75-85%	50-150KB
Hero/banner	WebP or JPEG	80-90%	100-300KB
Blog images	WebP or JPEG	70-80%	50-150KB
Thumbnails	WebP or JPEG	70%	10-30KB
Screenshots	PNG	Lossless	50-500KB
Logos	PNG or SVG	Lossless	5-50KB

FAQ

Should I always use WebP?

For photographs and general images, yes—it’s smaller than JPEG with equal quality and has universal browser support. For screenshots and graphics with text, PNG is often still better. For cutting-edge performance, look at AVIF but check browser support.

Can I compress an image multiple times?

Technically yes, but don’t. Each round of lossy compression degrades quality. Always work from your highest-quality source file.

Does compression affect SEO?

Better compression improves page speed, which is a ranking factor. Over-compression that makes images look bad might increase bounce rate. The goal is small files that still look good.

What’s the difference between “quality” in different tools?

The numbers aren’t standardized. Photoshop’s “80” isn’t the same as ImageMagick’s “80.” Test visually rather than relying on numbers.

How small should my images be?

For web: aim for under 200KB for hero images, under 100KB for content images, under 30KB for thumbnails. These aren’t hard rules—context matters.

What about HEIC from iPhones?

HEIC is Apple’s compression format. Great for storage efficiency on phones. For web delivery, convert to JPEG or WebP. Use our HEIC to JPG converter if needed.

---

Ready to compress your images? Try BulkImagePro — intelligent compression that shrinks file sizes while keeping quality. Process up to 50 images at once, no signup required.