了解常用的网页设计素材
不匹配的格式会导致加载延迟。规范可阅读 MDN Web Docs。使用 转换图片格式 修改后缀，配合 压缩图片 减少占用空间。
格式选择依据
- 无透明需求的细致照片使用 JPEG。
- 有透明背景要求的标志或截图使用 PNG。
- 现代网页中为了提高载入速度建议一律使用 WebP。
常见格式特点对比
| 扩展名 | 压缩机制 | 透明度支持 | 主要应用场景 |
|---|---|---|---|
| JPEG | 有损压缩 | 不支持 | 摄影照片 |
| PNG | 无损压缩 | 支持 | 截图 / 图标背景 |
| WebP | 有损/无损 | 支持 | 现代网站资源优化 |
网页设计常用图片格式指南：JPG, PNG, WebP, SVG
通俗易懂地对比各种格式在压缩率、透明通道和动图支持上的差异，为网站选择正确的图片扩展名。