如何Compress Images
Reduce 图像 file 大小通过 adjusting quality, dimensions, 和格式化.
问题
你的 images 是 too 大和 慢下 你的 web page; 你 need 到缩减其 file 大小.
前置条件
- Understanding 的图像 formats
- Knowledge 的 quality vs 大小权衡
步骤
-
1. Choose the output format
JPEG is best for photographs (lossy, small). PNG is best for graphics with few colors or transparency (lossless). WebP is modern and outperforms both. AVIF is even newer with better compression. Choose based on content type and browser support.
输入photo → WebP输出format selected -
2. Adjust quality and dimensions
For lossy formats (JPEG, WebP), reduce quality (e.g., 80) to decrease size. Resize to the display dimensions — serving a 4000px image for a 400px display is wasteful. Generate responsive sizes (srcset) for different viewport widths.
输入quality: 80, resize: 800px wide输出size reduced ~70% -
3. Compress and compare
Compress the image and compare the output size with the original. Check visual quality at the display size — minor artifacts may be invisible. Iterate on quality until you find the best size-to-quality ratio. Use lossless compression for images where every pixel matters.
输入original: 2MB → compressed: 200KB输出quality acceptable
预期结果
significantly smaller 图像 file 具有 acceptable visual quality.
常见错误
- Visible artifacts at high compression
- Increase the quality setting or use a different format. WebP and AVIF handle high compression better than JPEG.
- Image larger than original after compression
- The original may already be well-compressed or very small. Resizing to smaller dimensions or using a more efficient format (WebP) can still help.
排障指引
- If the image looks blurry, you may have resized too aggressively. Use the display dimensions as the target.
- For PNG, use lossless compression tools (pngcrush, oxipng) that optimize without quality loss.
安全限制
- Image compression is a local operation. No image data is transmitted.
- All processing happens in your browser.