画像を圧縮する方法
品質、寸法、フォーマットを調整して、画像のファイルサイズを削減します。
问题
画像が大きすぎて Web ページの表示が遅くなっています。ファイルサイズを削減する必要があります。
前提条件
- 画像形式の理解
- 品質とサイズのトレードオフに関する知識
ステップ
-
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
期待される結果
視覚品質を保ちながら大幅に小さくなった画像ファイル。
よくあるエラー
- 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.