压缩 and optimize images
Reduce 图像 file 大小通过 choosing 右格式化 (WebP/AVIF), adjusting quality, 和 resizing. Improve page 加载速度和 核心 Web Vitals.
- 1
图像优化: (1) Choose 格式化 — WebP (broad 支持, 30% smaller than JPEG), AVIF (50% smaller, newer), PNG (lossless, 为 graphics), JPEG (photos, 遗留). (2) 集合 quality — 80-85 为 photos (visually lossless), 90+ 为 graphics 具有文本. (3) Resize 到 display dimensions — don't ship 4000px 图像为 400px display. (4) Use responsive images (srcset) 为不同 screen sizes. (5) Lazy-加载 images 以下 fold.
- 2 图片压缩器 →
压缩 an image. Choose the output format (WebP for broad support, AVIF for smallest size), quality level (80-85 for photos), and optionally resize. The tool shows before/after size and compression ratio. Target: <100KB for hero images, <50KB for thumbnails.
- 3 图片格式转换器 →
将 between formats without compression — useful when you need a specific format but want to control quality separately. Convert PNG to WebP for photos, keep PNG for graphics with transparency. Convert JPEG 转换为 WebP for 30% size reduction
- 4 Base64 图片预览器 →
Preview compressed 图像 as base64 — useful 为 inline images (数据 URIs) 在 HTML/CSS 或为 verifying 压缩结果. Note: base64 increases 大小通过 33% — use 它仅 为小 images (<4KB) where HTTP 请求开销 exceeds base64 inflation.
常见问题
- WebP vs AVIF — 哪个应该 I use?
- AVIF produces 10-20% smaller files than WebP 但有 slower 编码和 更少 browser 支持 (Safari < 16.4). WebP 是 universally supported 在现代 browsers. Use AVIF 具有 WebP fallback (picture 元素): <picture><源类型="图像/avif"><源类型="图像/webp"><img></picture>. 为 simplicity, use WebP alone.
- 什么 quality 级别应该 I 选择?
- 为 photographs: 80-85 是 visually lossless 和 50-70% smaller than quality 100. 为 graphics 具有文本或 sharp edges: use PNG (lossless) 或 WebP 在 90+ quality. 总是比较 visually — quality numbers 是不 comparable across formats 或 tools. Use comparison tool 到查找 lowest acceptable quality.