代码里常见的图像文件类型：
JPEG(JPG)、PNG、SVG、GIF、BMP、WebP。
图像文件类型和格式主要分为两大类：光栅图像文件和矢量图像文件。
光栅图像文件格式
Web 上最常见的图像格式（JPEG、GIF 和 PNG）都属于光栅类别。
光栅图像文件类型显示静态图像，其中每个像素都有基于其分辨率（例如 1280×720）定义的颜色、位置和比例。
由于它们是静态的，因此你无法有效地调整图像大小，原始设计和像素只会被拉伸以填充额外的空间。这最终会产生模糊、像素化或其他失真的图像。
图像文件的 3 种常见文件类型是什么？
根据与 Web 使用相关的数据，三种最常见的图像文件类型是 PNG、JPEG 和 SVG。
图片文件格式使用统计
SVG是矢量图像文件类型。
与静态光栅图像文件格式不同，矢量图形使用笛卡尔平面上的线和曲线系统，与总面积相比，而不是任何单个像素。
这意味着你可以无休止地放大原始图像分辨率，而不会损失任何质量或失真。
哪种图像格式质量高？
对于 Web 图像，对于相同质量的照片，WebP 文件格式提供的文件大小比 JPEG 小 25-35% ，这意味着你可以为相同的磁盘空间上传更高质量的图像并加快你的网站速度。
PNG 文件提供无损压缩，但这意味着文件大小将非常大并且加载速度很慢。单个 PNG 文件通常可以达到数百 KB 甚至 1MB 以上。但是，如果你利用一些策略，例如延迟加载和CDN，你仍然可以拥有一个快速的站点。
哪些文件格式支持透明度？
支持透明度的最常见的 Web 图像文件类型是 PNG、WebP、SVG。 JPEG（或 JPG）是一种具有有损压缩的光栅图像文件格式，适用于共享图像。JPEG 是“有损”的，这意味着它们会减小文件大小，但也会在你使用该格式时降低图像质量。
JPEG
JPEG 仍然是你在网上看到的最常用的图像文件类型之一，因为它具有压缩和几乎通用的浏览器/操作系统支持。
大多数社交媒体平台会自动将上传的图像文件转换为 JPEG。他们还使用独特的社交媒体图像尺寸来控制照片的分辨率。
JPEG（或 JPG）的优点和缺点
- 通用浏览器和操作系统支持。
- 相当小的文件大小。
- 有损图像压缩可能会导致文本可读性差。
- 从所有主流浏览器（Chrome、Firefox、Safari 等）的 1.0 版开始支持
- 所有主要操作系统的所有图像查看器和编辑器默认支持。
PNG
PNG 的优点
- 更高质量（无损）的图像和清晰可见的文本。
- 支持所有主流浏览器（Chrome、Edge、Firefox、Internet Explorer、Opera、Safari）。
- 信息图表、横幅、博客图形、屏幕截图、优惠券和其他包含文本的视觉效果的理想选择。
- 所有主要操作系统及其标准图像编辑器的支持。
PNG 的缺点
- 用于高分辨率照片，会创建高达几兆字节的大文件。
- 如果过度使用（尤其是高分辨率图像），较大的文件大小会降低网站速度。
PNG对比JPEG
- PNG和JPEG之间的主要区别在于PNG是一种无损图像格式，而JPEG是一种有损图像格式。这基本上意味着 PNG 使用压缩技术而不牺牲图像的原始质量或细节。
最后
光栅格式最适合用于图像和图片，而矢量是徽标、图标和数字图形的绝佳替代品。
为正确的任务使用正确的图像文件类型不仅可以帮助提高页面加载速度，还可以降低带宽和服务器负载。作为后续的积极影响，整体用户体验也将大大改善。
