Original URL: https://www.uglypear.com/en/blog/image-compression-quality-tips.html
Images that become blurry or pixelated after compression are almost always caused by improper parameter selection. The solution involves 5 key techniques: choosing the right quality factor, assigning formats by content type, using progressive JPEG, applying sharpening compensation, and region-adaptive compression. With the right approach, you can achieve 60-80% compression while maintaining visually lossless quality. This article details each technique with parameter comparison test results.
1. Why Images Become Blurry After Compression
Image compression is divided into lossless and lossy types. Lossless compression (PNG/FLIF) does not cause blurriness but has a compression limit; lossy compression (JPEG/WebP) reduces size by discarding information that the human eye is not sensitive to, and blurriness almost always comes from improper lossy compression parameter settings. Understanding the causes of blurriness is the key to targeted optimization.
As the table above shows, a quality factor that's too low and wrong format selection are the two main causes, accounting for over 80% of blurriness issues. An 8MB PNG photo compressed with JPEG q50 becomes 0.3MB but has noticeable color blocks; compressed with JPEG q80, it becomes 0.6MB with virtually no difference to the naked eye — a small parameter difference produces a large effect difference.
| Cause of Blurriness | Typical Manifestation | Root Cause | Frequency |
|---|---|---|---|
| Quality factor too low | Color blocks, artifacts, detail loss | JPEG q<60, discarding too much high-frequency information | ★★★★★ |
| Wrong format selection | Wavy color noise at text edges | Wireframes/screenshots using JPEG instead of PNG | ★★★★☆ |
| Excessive downsampling | Overall softness, insufficient resolution | DPI reduced too much or scaling ratio too large | ★★★☆☆ |
| Improper chroma subsampling | Color bleeding at colored edges | 4:2:0 subsampling reducing color resolution | ★★☆☆☆ |
| Multiple re-compressions | Cumulative distortion, quality degradation | Same image repeatedly opened and saved | ★★☆☆☆ |
2. Detailed Explanation of 5 Tips for Maintaining Sharpness
For the causes of image compression blurriness, there are 5 tips for maintaining sharpness. Each tip differs in principle, applicable scenario, and effect. The table below provides an overall comparison first, followed by detailed explanations.
The JPEG quality factor (q value, 1–100) determines the compression strength. A higher q means better quality but larger size, while a lower q means smaller size but more severe blurriness. The key is finding the balance point between "size" and "sharpness." Through extensive real-world testing, q75–85 is the golden range: q85 is suitable for photos that need high-quality display, q75 is suitable for web thumbnails, and q80 is the universal balance point.
When using SmartSlim, the Rust compression engine automatically selects the q value based on the image's purpose — q85 for main images, q75 for list thumbnails, and q72 for background images. This purpose-based assignment works much better than uniform parameters, with main images staying sharp while thumbnails remain small. For a deeper understanding of quality factor principles, see What is the magic number behind JPEG quality factor 75?
Different types of images have different optimal formats. Photos are suitable for JPEG or WebP (high lossy compression efficiency), wireframes/screenshots/text images are suitable for PNG (lossless, retains sharp edges), and images with transparency channels must use PNG or WebP. Using JPEG for everything is a common cause of blurriness — the sharp edges of wireframes produce ringing artifacts under JPEG.
SmartSlim uses intelligent image analysis to automatically classify images into four categories — scanned documents, document images, mixed images, and photos — and assigns the optimal format and parameters to each. Photos are converted to JPEG q80, scanned documents to grayscale JPEG q72, wireframes are kept as PNG with lossless optimization, and mixed images are assigned by region. This type-based assignment works much better than uniform parameters.
For a detailed comparison of WebP, PNG, and JPEG formats, see WebP vs PNG vs JPG: Which Image Format to Choose?
Progressive JPEG divides the image into multiple scan layers, loading progressively from blurry to sharp. Compared to baseline JPEG, it first displays the outline in the low-quality layer, then gradually supplements detail, providing a better user experience. More importantly, progressive JPEG is typically 5%–10% smaller than baseline JPEG at the same visual quality, because it can organize DCT coefficients more efficiently.
SmartSlim enables progressive encoding (3–5 scan layers) by default when outputting JPEG, both improving web loading experience and reducing size. All modern browsers support progressive JPEG, so there's no need to worry about compatibility.
JPEG compression loses high-frequency detail, causing the image to appear "soft." Applying a light round of sharpening (Unsharp Mask) after compression can compensate for this loss and make edges sharp again. The key is to keep the sharpening intensity light — over-sharpening produces halos that look even worse. Recommended parameters: radius 0.8–1.2 pixels, intensity 80%–120%, threshold 2–4.
SmartSlim automatically applies light sharpening compensation when compressing photo-type images, with parameters that adapt to the compression strength — q85 light sharpening, q75 medium sharpening, q72 strong sharpening. This adaptive approach works better than fixed parameters, maximizing sharpness recovery without producing halos.
Different regions of an image have different levels of importance to the human eye. In a portrait photo, the face is most important and the background is secondary; in a product image, the subject is most important and the white background is secondary. Region-adaptive compression applies a high quality factor to important regions and a low quality factor to secondary regions, maintaining subject sharpness while further reducing size.
SmartSlim's intelligent image analysis can identify the subject region in an image (face/product/text) and apply q85 to these regions and q70 to the background. A portrait photo with uniform q80 is about 0.6MB, while region-adaptive is about 0.54MB (10% reduction), with better facial sharpness. This technique is particularly effective for e-commerce product images and portrait photos.
| Tip | Principle | Applicable Scenario | Sharpness Improvement | Size Impact |
|---|---|---|---|---|
| 1. Appropriate quality factor | Select q value by purpose | All JPEG compression | ★★★★★ | Baseline |
| 2. Format by type | Photos JPEG/wireframes PNG | Mixed image scenarios | ★★★★★ | Slight increase |
| 3. Progressive JPEG | Multi-stage decoding | Web images | ★★★☆☆ | No impact |
| 4. Sharpening compensation | Enhance edges after compression | Photos/document images | ★★★★☆ | No impact |
| 5. Region-adaptive | High quality for important regions | Portraits/product images | ★★★★☆ | 10% reduction |
3. Real-World Case: 8MB Product Image Compressed to 0.5MB, Sharp and Lossless
This is an e-commerce product main image, .png format, originally 8.2MB. 300DPI, 24-bit color, 3000×3000 pixels, white background with product subject. It needed to be uploaded to an e-commerce platform (2MB limit), with a target of compressing to under 1MB while keeping the subject sharp.
Document characteristics: 3000×3000 pixel PNG, white background occupying 60% of the area, product subject occupying 40%, needing to retain product detail and edge sharpness.
Result: 0.52MB, a compression ratio of about 15.8:1, compression rate of 93.7%. Well below the platform's 2MB limit. The product subject appears sharp on the e-commerce page, with no artifacts at the edges, clean white background with no color noise, and sharpening compensation makes the details more prominent. The entire process was completed locally, and the product image did not pass through any third-party server.
| Quality Factor | 8MB Original Compressed | Compression Rate | Visible Distortion | Recommended Use |
|---|---|---|---|---|
| q95 | 2.4MB | 70% | None | Archiving/printing |
| q85 | 0.9MB | 89% | Virtually none | Product main image/portrait |
| q80 | 0.6MB | 92.5% | Not noticeable | General web use |
| q75 | 0.4MB | 95% | Slight | Thumbnails/background |
| q60 | 0.2MB | 97.5% | Noticeable color blocks | Not recommended |
| q50 | 0.15MB | 98.1% | Severe distortion | Not recommended |
4. Recommended Parameters for Different Image Types
Different types of images have different optimal compression parameters. The table below provides recommended parameters for common image types.
One general principle: Photo types use JPEG/WebP lossy compression (q75–85), wireframes/screenshots use PNG lossless compression, subjects that are important use region-adaptive, and photos get light sharpening after compression. With the right approach, image compression can achieve both small size and sharpness.
| Image Type | Recommended Format | Recommended Parameters | 8MB Original Compressed | Sharpness Rating |
|---|---|---|---|---|
| People/landscape photos | JPEG | q80 | 0.6MB | ★★★★★ |
| Product display images | WebP | q82 | 0.5MB | ★★★★★ |
| UI screenshots/wireframes | PNG | pngquant 256 colors | 1.2MB | ★★★★★ |
| Text document images | PNG | pngquant 256 colors | 0.8MB | ★★★★★ |
| Images with transparency | WebP/PNG | Lossless | 2.1MB | ★★★★★ |
| Scanned documents | JPEG grayscale | q72 | 0.3MB | ★★★★☆ |
5. Frequently Asked Questions
Q1: How to restore sharpness after an image has been compressed blurry?
An already-compressed blurry image cannot be fully restored (lossy compression is irreversible), but it can be partially enhanced through sharpening filters and AI super-resolution algorithms. A better approach is to re-compress from the original using the right method: Set the JPEG quality factor to 75–85, choose the format by content (photos use JPEG/WebP, wireframes use PNG), and don't downsample too aggressively. SmartSlim automatically assigns the optimal parameters based on image type, avoiding blurriness from a one-size-fits-all approach.
Q2: What JPEG quality factor is most appropriate?
The recommended JPEG quality factor (q) is 75–85. q85 is suitable for photos that need high-quality display (portraits/product images), with a size about 25%–35% of the original; q75 is suitable for web thumbnails and background images, with a size about 10%–15% of the original; below q60, noticeable color blocks and artifacts appear. For screen reading scenarios, q80 is the golden balance point — visually imperceptible compression with significant size reduction. Wireframes and text screenshots should not use JPEG; use PNG to avoid edge artifacts.
Q3: Is WebP sharper than JPEG?
At the same size, WebP is slightly sharper than JPEG; at the same sharpness, WebP is 25%–35% smaller than JPEG. WebP supports both lossy and lossless modes, and lossless WebP is 26% smaller than PNG. However, WebP has poorer compatibility with older browsers (IE11 and below). For modern web pages, use WebP; for compatibility scenarios, use JPEG; for wireframes, use PNG. SmartSlim supports automatic conversion to WebP and outputs compatible fallback solutions.
Q4: What format should be used to compress screenshots and wireframes?
Screenshots and wireframes must use PNG format, not JPEG. The reason is that JPEG's DCT transform produces ringing artifacts at sharp edges, causing wavy color noise around text and lines. PNG is lossless compression and perfectly retains sharp edges. To optimize PNG size: use pngquant for lossy palette compression (256 colors), which typically reduces size by 60%–80% with virtually no difference to the naked eye. SmartSlim automatically identifies screenshot types and enables PNG optimization.
| Step | Operation | Key Parameters | Size Change |
|---|---|---|---|
| 1 | Format conversion | PNG→WebP lossy | 8.2→1.8MB |
| 2 | Downsampling | 3000×3000→1500×1500 (e-commerce display size) | 1.8→0.7MB |
| 3 | Region-adaptive | Product subject q85, white background q65 | 0.7→0.55MB |
| 4 | Sharpening compensation | Unsharp radius 1.0, intensity 100%, threshold 3 | 0.55→0.55MB |
| 5 | Progressive encoding | 5-scan-layer progressive WebP | 0.55→0.52MB |
6. Summary
Image blurriness after compression is fundamentally caused by a quality factor that's too low, wrong format selection, or excessive downsampling. The solution is targeted optimization with 5 tips: Choosing the right quality factor is most critical (JPEG q75–85, below q60 inevitably blurry), assigning formats by type (photos JPEG/WebP, wireframes PNG, don't use one size fits all), progressive JPEG improves experience and reduces size (-5%–10%), sharpening compensation restores post-compression softness (light Unsharp), and region-adaptive maintains subject sharpness (important regions q85 + background q65). Stacking all 5 tips, an 8MB product image can be compressed to 0.5MB sharp and lossless.
Remember three points: First, q80 is the golden balance point for JPEG — below q60 inevitably produces blurriness. Second, wireframes and screenshots absolutely cannot use JPEG; PNG is the only choice. Third, adding light sharpening to photos after compression can significantly improve the visual impression. With the right method and parameters, image compression can achieve both small size and sharpness.
| Image Type | Recommended Format | Quality Factor | Sharpening Compensation | Typical Compression Rate |
|---|---|---|---|---|
| E-commerce product main image | WebP | q82 + region-adaptive | Light | 90%–95% |
| Portrait photos | JPEG | q85 + face high quality | Light | 88%–92% |
| Landscape photos | WebP | q80 | Medium | 90%–93% |
| UI screenshots | PNG | pngquant 256 colors | Not needed | 70%–85% |
| Document scans | JPEG grayscale | q72 | Medium | 92%–96% |
| Transparent Logo | WebP | Lossless | Not needed | 60%–75% |
FAQ
Q: How to restore sharpness after compression?
A: Already-compressed blurry images cannot be fully restored (lossy compression is irreversible), but sharpening filters and AI super-resolution algorithms can partially enhance them. Better to re-compress from the original with the right approach: JPEG quality factor 75-85, choose format by content type (photos use JPEG/WebP, wireframes use PNG), and avoid overly aggressive downsampling. SmartSlim automatically assigns optimal parameters based on image type, avoiding one-size-fits-all blurriness.
Q: What JPEG quality factor is best?
A: Recommended JPEG quality factor (q) is 75-85. q85 is suitable for high-quality display (portraits, product images), with file size at 25-35% of original. q75 is good for web thumbnails and background images, at 10-15% of original. Below q60, noticeable color blocks and artifacts appear. For screen viewing, q80 is the sweet spot — visually lossless with significant size reduction. For wireframes and text screenshots, use PNG instead of JPEG to avoid edge artifacts.
Q: Is WebP sharper than JPEG?
A: WebP is not inherently sharper than JPEG at the same quality level, but it achieves better compression efficiency — about 25-35% smaller than JPEG at equivalent visual quality. This means you can use a higher quality setting with WebP while keeping file size smaller. For example, WebP q90 may be visually similar to JPEG q80 but 30% smaller. WebP also supports transparency and animation, making it a versatile replacement for both JPEG and PNG in web scenarios.
Q: What is region-adaptive compression?
A: Region-adaptive compression applies different compression levels to different regions of the same image based on content importance. For example, in a product photo, the product area is compressed less (higher quality) while the background is compressed more (lower quality). This technique can reduce overall file size by 30-50% while maintaining critical details. SmartSlim uses AI-based region analysis to identify important areas and apply adaptive compression automatically.
Summary
The key to image blurry after compression? 5... lies in identifying the sources of bloat and handling them accordingly. Choose the right compression strategy based on your scenario, prioritizing the largest contributors. SmartSlim can handle all compression steps in one click.
Related:
Top comments (0)