Images make up a significant share of a page’s weight. Compression without noticeable quality loss speeds up loading and improves Core Web Vitals. This guide covers compression methods, formats, and tools. Compress images online with Image Compressor on reChecker. Check image optimization on your website with the reChecker image analyzer. For more context, see image optimization for SEO and WebP and AVIF formats.
Why compress images
- Loading speed — fewer bytes mean faster rendering
- Bandwidth savings — important for mobile users
- SEO — page speed affects rankings
- Core Web Vitals — LCP depends on image size and format
A typical website can reduce image weight by 30–50% without visual quality loss. For large galleries, the savings can amount to megabytes.
Lossy and lossless compression
Lossless
The algorithm preserves every pixel. File size is reduced by compressing the data (deduplication, entropy coding). Quality does not change. Formats: PNG, WebP lossless, AVIF lossless, GIF.
Use for: logos, screenshots, and images with sharp edges where artifacts are unacceptable.
Lossy
The algorithm discards some information. With reasonable settings, the losses are unnoticeable. Formats: JPEG, WebP lossy, AVIF lossy.
Use for: photographs, complex gradients, and images with many colors.
Visual comparison of lossy formats
At the same subjective quality level, file sizes differ:
| Format | Relative size | Note |
|---|---|---|
| JPEG | 100% | Baseline |
| WebP | 70–80% | At the same visual quality |
| AVIF | 50–60% | Even smaller at the same quality |
AVIF offers the greatest savings, but encoding is slower. This is not critical for static content.
Image formats
JPEG
The classic format for photos. Lossy by definition. The quality setting (1–100) controls the degree of compression. Recommended range for the web: 75–85. Below 70, artifacts become noticeable; above 90, file sizes are unnecessarily large.
Does not support transparency.
PNG
Lossless, with transparency support. Suitable for logos, icons, and screenshots. For photos, file sizes are larger than JPEG at the same visual quality. PNG-8 (256 colors) is for simple images; PNG-24 is for complex images with transparency.
WebP
A Google format. Supports lossy and lossless compression, transparency, and animation. At the same quality, it produces files 25–35% smaller than JPEG and PNG. Supported by all modern browsers.
AVIF
Based on AV1. Compresses even better than WebP (up to 50% savings at the same quality). Support is growing, but Safari added support relatively recently. Check compatibility with your target audience.
Choosing a format
| Content type | Recommended format |
|---|---|
| Photographs | WebP or AVIF, with JPEG fallback |
| Logos, icons | PNG or SVG |
| Screenshots | PNG or WebP lossless |
| Simple illustrations | SVG |
| Animations | WebP or GIF |
Compression tools
Online
Image Compressor on reChecker compresses images without visual quality loss and supports the main formats. It is convenient for one-off tasks without installing software.
Other tools: TinyPNG and Squoosh (from Google) offer similar functionality.
Command line
ImageMagick — conversion and compression:
# JPEG, качество 80
convert input.jpg -quality 80 output.jpg
# WebP
convert input.jpg -quality 85 output.webp
# Изменение размера + сжатие
convert input.jpg -resize 1200x -quality 80 output.jpgcwebp (from libwebp) — specialized WebP compression:
cwebp -q 80 input.jpg -o output.webp
cwebp -lossless input.png -o output.webpavifenc (from libavif) — AVIF compression:
avifenc --min 20 --max 30 input.jpg output.avifBatch processing
A script for batch JPEG compression:
for f in *.jpg; do
convert "$f" -quality 82 -strip "optimized_$f"
done-strip removes metadata (EXIF, ICC), further reducing file size.
In your project build
Plugins for Webpack, Vite, and Gulp automate compression during the build. Examples: imagemin, sharp, image-minimizer-webpack-plugin. Integrating this into CI/CD ensures that all uploaded images are optimized.
Quality settings
JPEG
| Quality | Use | Approximate size |
|---|---|---|
| 60–70 | Previews, thumbnails | Minimum size |
| 75–85 | Main content | Balance |
| 90–95 | Galleries, portfolios | High quality |
| 100 | Virtually lossless | Maximum size |
WebP
The -q setting is similar to JPEG. For lossy WebP, 80–85 usually gives excellent results. Lossless WebP often produces files 25–35% smaller than PNG at the same quality.
AVIF
The 20–35 range (min-max in avifenc) corresponds to high quality at a small file size. Exact values depend on the encoder.
Responsive images
One size does not fit all devices. Use srcset and sizes:
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Описание">The browser chooses an appropriate size. A smaller image means fewer bytes on mobile devices.
Lazy loading
Defer loading images outside the viewport:
<img src="photo.jpg" loading="lazy" alt="Описание">This reduces the initial amount of data loaded. Native support is available in all modern browsers.
Optimization checklist
- Choose an appropriate format (WebP/AVIF for photos)
- Set JPEG/WebP quality within the 75–85 range
- Remove metadata (EXIF) when it is not needed
- Resize to the target display dimensions
- Use srcset for responsive images
- Set loading="lazy" for images below the fold
- Add alt text for accessibility and SEO
Check your website’s images with the image analyzer on reChecker. For more on SEO, see image optimization for SEO; for formats, see the guide to WebP and AVIF.
Metadata and privacy
EXIF contains camera data, GPS coordinates, and the date the photo was taken. Remove EXIF from public images to protect privacy and slightly reduce file size. Tools: exiftool, jhead, ImageMagick -strip.
Progressive loading
Progressive JPEG displays a blurred version immediately, then sharpens it. Users see the content sooner. When saving in editors or with ImageMagick, enable the progressive option.
CDN and automatic compression
Many CDNs (Cloudflare, imgix, Cloudinary) automatically compress and convert images based on URL parameters. This eliminates the need for preprocessing, but creates a dependency on the service. For full control, compress images during the build or upload process.
Comparing formats in practice
| Source | JPEG 80% | WebP 80% | AVIF 30 | Savings |
|---|---|---|---|---|
| 500 KB photo | 120 KB | 80 KB | 60 KB | up to 88% |
| 200 KB PNG | — | 45 KB (lossless) | 35 KB | up to 82% |
Actual figures depend on the content. Test with your own images.
Summary
Image compression is an essential step in optimizing web pages. Choose WebP or AVIF for photos, preserve quality at 75–85, and use responsive sizes and lazy loading. Image Compressor and the image analyzer on reChecker can help you check and optimize images.