图片常用格式和加载

在前端开发中选择合适的图像格式取决于你的具体需求，例如文件大小、图像质量、是否需要透明度或动画等。

通常，JPEG 用于高质量的照片，PNG 用于需要透明度的图形，GIF 用于简单动画，而 WebP 是一个强大的现代选择，旨在集所有这些优点于一身。

另外，现代网站中的图片使用量是很大的，如何在图片加载过程中提高用户体验也是很重要的一环。

常见图片格式​

JPEG (Joint Photographic Experts Group)​

• 优点：
  1. 利用有损压缩，减少文件大小
  2. 可以很好地储存再现彩色照片
• 缺点：
  1. 有损压缩，意味着可能丢失图片质量
  2. 不支持透明度

PNG (Portable Network Graphics)​

• 优点：
  1. 支持无损压缩
  2. 支持透明度
• 缺点：
  1. 文件大小通常比 JPEG 大

GIF (Graphics Interchange Format)​

• 优点：
  1. 支持动画
  2. 支持透明度（但只有一个颜色可以是完全透明的）
• 缺点：
  1. 只支持 256 种颜色，不适合彩色照片
  2. 有损压缩

WEBP​

• 优点：
  1. Google 开发的现代图像格式，提供优于 JPEG、PNG、GIF 的压缩，文件大小通常比它们小
  2. 支持有损和无损压缩
  3. 支持透明度
  4. 支持动画
• 缺点：
  1. 需要考虑浏览器兼容性

SVG (Scalable Vector Graphics)​

• 优点：
  1. 矢量格式，可无限放大而不失真
  2. 文件大小通常较小，特别是对于简单图形
  3. 可以通过 CSS 和 JavaScript 进行控制和动画制作
• 缺点：
  1. 不适合复杂的图像，如照片
  2. 浏览器的渲染性能可能随着图形的复杂性而下降

BMP (Bitmap)​

• 优点：
  1. 无损压缩
  2. 格式简单，易于读取和写入
• 缺点：
  1. 文件大小很大，不适用于 Web
  2. 缺乏现代图像格式的高级特性

TIFF (Tagged Image File Format)​

• 优点：
  1. 支持无损压缩
  2. 高色深和灵活的色彩管理
  3. 常用于专业图像存储，如摄影和档案保护
• 缺点：
  1. 文件大小非常大，不适用于 Web，支持度不如其他格式广泛

图片加载​

如何让图片加载更酷炫