有关图片的知识点

常见的图片格式类型

1. SVG (Scalable Vector Graphics)：矢量图形格式，可以无限放大而不失真，适合于网页图形和动画等应用。
2. JPEG (Joint Photographic Experts Group)：用于存储彩色或灰度图像，可压缩图片大小，但压缩可能会导致图像质量损失。
3. PNG (Portable Network Graphics)：支持透明度和更高的图像质量，但文件大小通常比JPEG大。
4. GIF (Graphics Interchange Format)：支持动画和透明度，但颜色范围较小，不适合存储照片等具有复杂颜色的图像。
5. BMP (Bitmap)：Windows操作系统上常用的位图格式，不压缩，文件大小较大。
6. TIFF (Tagged Image File Format)：用于存储高品质图像和多页文档，支持压缩和多种色彩模式。
7. SVG (Scalable Vector Graphics)：矢量图形格式，可以无限放大而不失真，适合于网页图形和动画等应用。

还有其他的一些图片格式，如WebP、HEIF、RAW等，但这些格式相对较新，可能不是所有软件和设备都支持。

什么是 Webp

WebP 是一种由 Google 开发的新型图片格式，它具有良好的压缩率和质量，而且支持透明度和动画，因此在前端的应用前景非常广泛。以下是 WebP 在前端应用中的一些优点：

• 更快的加载速度：相比 JPEG 和 PNG 格式，WebP 可以减小图片的文件大小，从而加快网页的加载速度，提高用户的体验。
• 更好的压缩率和质量：WebP 支持无损和有损压缩两种方式，无损压缩可以保证图像质量不受影响，有损压缩则可以在保持高质量的同时减小文件大小。
• 支持透明度和动画：WebP 支持 alpha 通道，可以实现更好的透明效果，还支持动画，可以用于创建精美的动态效果。
• 跨平台支持：WebP 支持多种操作系统和浏览器，包括 Chrome、Firefox、Safari、Edge 等现代浏览器，以及 Android 和 iOS 移动设备。

基于以上优点，WebP 在前端应用中有着广泛的应用前景，可以用于优化网页图片的加载速度和性能，提高用户的体验。

Webp 与 png 相比较

WebP 和 PNG 都是常见的图片格式，下面是它们之间的一些比较：

• 压缩率：WebP 通常可以实现更高的压缩率，从而减小文件大小，而且质量损失较小。相比之下，PNG 的压缩率较低，通常需要更大的文件大小来保持较高的图像质量。
• 透明度支持：WebP 和 PNG 都支持透明度，但 WebP 的 alpha 通道支持比 PNG 更加高效，可以实现更好的透明效果。
• 动画支持：WebP 支持动画，而 PNG 不支持动画。
• 浏览器兼容性：WebP 的浏览器兼容性较差，仅有部分现代浏览器支持。相比之下，PNG 是一种非常普及的图片格式，几乎所有的浏览器都支持。
• 图片编辑：PNG 格式支持无损压缩和透明度，因此通常用于制作图标、背景和其他需要保留透明度的图像。WebP 则更适合用于压缩复杂的图像，例如照片和艺术图像。

综上所述，WebP 和 PNG 有各自的优点和适用场景。如果需要保留透明度或需要广泛的浏览器支持，PNG 可能更加适合。如果需要更好的压缩效率和动画支持，则可以考虑使用 WebP。