一、常见图片格式有哪些？
在日常工作和生活中，我们经常遇到各种图片格式。了解它们的特点和适用场景，可以帮助我们更好地选择和使用图片。
1.1 主流图片格式概览
- JPG/JPEG - 最常用的照片格式，适合网络传输
- PNG - 支持透明背景，适合图标和图形
- WEBP - 谷歌推出的现代格式，体积更小
- GIF - 支持动画，适合简单动图
- SVG - 矢量格式，无限放大不失真
- BMP - 无压缩格式，文件体积大
- TIFF - 高质量印刷格式
二、JPG vs PNG vs WEBP 详细对比
📷 JPG/JPEG
- 优点：文件小、兼容性好、加载快
- 缺点：有损压缩、不支持透明
- 适用：照片、产品图、banner
- 压缩率：高（可调节）
🔲 PNG
- 优点：无损压缩、支持透明
- 缺点：文件体积较大
- 适用：Logo、图标、截图
- 压缩率：中等
🌐 WEBP
- 优点：体积极小、支持透明和动画
- 缺点：旧浏览器兼容性差
- 适用：网页图片、移动端
- 压缩率：极高
💡 数据对比：相同质量的图片，WEBP 格式比 JPG 小 25-35%，比 PNG 小 50-80%。对于网站来说，使用 WEBP 可以显著提升加载速度。
三、不同场景如何选择格式？
3.1 网站/APP 配图
- 推荐格式：WEBP（优先）或 JPG
- 原因：加载速度快，节省带宽
- 建议：提供 JPG 作为降级方案
3.2 产品摄影/商品图
- 推荐格式：JPG（质量 80-90%）
- 原因：平衡画质和文件大小
- 建议：电商主图控制在 500KB 以内
3.3 Logo/图标/UI 元素
- 推荐格式：PNG 或 SVG
- 原因：需要透明背景，边缘清晰
- 建议：矢量图标优先用 SVG
3.4 社交媒体配图
- 推荐格式：JPG 或 PNG
- 原因：平台兼容性好
- 建议：微信公众号推荐 PNG，朋友圈 JPG 即可
⚠️ 注意事项：印刷用途的图片请使用 TIFF 或高质量 JPG（300 DPI 以上），不要用 WEBP 或低质量 JPG。
四、图片格式转换方法
4.1 在线转换工具（推荐）
适合偶尔转换、不想安装软件的用户：
- 色彩韵设计 - 支持 JPG、PNG、WEBP 互转，批量处理
- Convertio - 支持 100+ 格式
- CloudConvert - 高质量转换
4.2 桌面软件
- Photoshop - 专业级，支持"导出为"功能
- GIMP - 免费开源，功能强大
- XnConvert - 批量转换神器
4.3 命令行工具（开发者）
# 使用 ImageMagick 转换
convert input.png output.jpg
# 使用 cwebp 转换为 WEBP
cwebp -q 80 input.png -o output.webp
# 批量转换 JPG 到 WEBP
for img in *.jpg; do cwebp "$img" -o "${img%.jpg}.webp"; done
💡 转换技巧：JPG 转 PNG 不会提升画质，因为 JPG 的有损压缩已经丢失了信息。只有 PNG 转 JPG 或 WEBP 才能减小文件体积。
五、常见问题解答
Q1: WEBP 格式所有浏览器都支持吗？
目前主流浏览器（Chrome、Firefox、Edge、Safari 14+）都支持 WEBP。但 IE 和部分旧版本浏览器不支持。建议使用 <picture> 标签提供降级方案。
Q2: JPG 质量设置多少合适？
一般建议 80-90%。低于 70% 会出现明显压缩痕迹，高于 95% 文件体积会大幅增加但画质提升不明显。
Q3: PNG-8 和 PNG-24 有什么区别？
PNG-8 最多 256 色，文件更小；PNG-24 支持 1600 万色，画质更好但文件更大。简单图形用 PNG-8，照片级图像用 PNG-24。
Q4: 为什么我的透明背景保存后变白了？
这是因为保存成了 JPG 格式。JPG 不支持透明，需要用 PNG 或 WEBP 格式保存透明背景图片。
Q5: 图片格式转换会影响 SEO 吗？
会！使用 WEBP 等现代格式可以加快页面加载速度，提升用户体验，间接有利于 SEO。同时记得添加 alt 属性和优化文件名。
🎯 总结建议：
- 网站图片优先用 WEBP，提供 JPG 降级
- 透明背景用 PNG 或 WEBP
- 照片类产品图用 JPG（80-90% 质量）
- 图标和 Logo 用 SVG 或 PNG
- 定期检查和优化网站图片格式