1) Compression basics
Image compression means reducing file size while keeping quality acceptable. The goal is simple: faster loading pages and better user experience.
Golden rule: Don’t chase “the smallest file”. Aim for “good quality + target size”.
2) Methods (JPG / PNG / WebP)
A) JPG compression (photos)
- Lower “quality” reduces size quickly
- Too low can cause blocky artifacts and loss of detail
- Mid-range quality is usually the best balance
B) PNG optimization (logos / UI)
- PNG is lossless; size reduction is more limited
- Removing unnecessary metadata can help
- Works best for images with fewer colors and flat areas
C) WebP optimization (modern web)
- Often smaller than JPG/PNG at similar quality
- Can support transparency
- Great for performance-focused websites
3) Choosing a target size (KB)
- Hero/cover image: roughly 150–300 KB
- In-article image: roughly 80–200 KB
- Thumbnails: often 20–60 KB
The right target depends on the visible size and level of detail. Very detailed photos need more bytes to look clean.
4) SEO & performance tips
- Always set width/height to reduce layout shift (CLS)
- Use lazy-loading for below-the-fold images
- Use descriptive file names and real alt text
- Internal links: compress at /comp, convert at /donus
FAQ
Can I reduce size with zero quality loss?
Lossless optimization is possible but gains are limited. For big size cuts, controlled lossy compression is usually needed.
Compress first or convert first?
For very large images, it’s usually best to compress first, then convert to WebP/AVIF.
Conclusion
Proper compression can dramatically improve website speed. The best strategy is “acceptable quality + realistic target size”.