位图/矢量图/GIF/PNG/JPEG/WEBP一网打尽
位图/矢量图/GIF/PNG/JPEG/WEBP一网打尽
在前端开发和图像处理中，了解不同图片格式的特点和应用场景至关重要。本文将带你深入了解位图和矢量图的区别，以及GIF、PNG、JPEG、WEBP等常见位图格式的优劣和适用场景。
前言
在前端项目开发中，图片资源的优化是一个绕不开的话题。无论使用Webpack、Vite还是Rspack，项目中或多或少都会用到图片。针对不同的图片格式，我们需要采取针对性的处理策略。本文将重点介绍各种图片格式的基本知识，帮助你更好地理解和应用这些格式。
1. 栅格图（位图） vs 矢量图
什么是栅格图？
栅格图（位图）是以像素为主要信息载体的图像格式。每个像素通过红、绿、蓝的数值组合来呈现颜色。当我们放大栅格图时，可以清晰地看到单个像素呈现为正方形。常见的栅格图格式包括GIF、PNG、JPEG和WEBP。
什么是矢量图？
矢量图是使用数学公式生成的图像，通过点、线和曲线在网格上对齐来呈现图像。矢量图不是基于像素的，因此在调整大小时不受限制，可以实现分辨率独立的显示效果。矢量图常见于SVG、WMF、EPS、PDF、CDR或AI类型的图形文件格式。
如何选择位图和矢量图
- 如果项目对图像展示有较高要求，应选择位图格式，但需要进行优化处理以减小文件大小。
- 如果项目对色彩还原度要求不高，且需要兼容PC和移动端等弱网环境，可以在一些不重要的部分（如图标）使用矢量图。
2. 位图常见格式
常见位图格式及特性支持
色彩支持
- GIF：每像素8位，支持256种颜色
- JPEG：每通道8位，支持1600万+种颜色
- PNG：每通道8位，支持1600万+种颜色
- WEBP：每通道8位，支持1600万+种颜色
透明度
- GIF：1位透明度，像素要么透明要么不透明
- JPEG：不支持透明度
- PNG：支持完全半透明
- WEBP：支持完全半透明
是否支持动画
- GIF：支持
- JPEG：不支持
- APNG：支持
- WEBP：支持
文件初始大小和压缩性能
- GIF：无损压缩，文件大小较大
- JPEG：有损压缩，文件大小较小
- PNG：无损或接近无损压缩，质量较好
- WEBP：有损压缩，文件大小较小
兼容性
- GIF：兼容性良好
- JPEG：兼容性良好
- PNG：在浏览器端兼容良好
- WEBP：在浏览器端兼容良好
GIF
GIF（Graphics Interchange Format，图形交换格式）是一种无损、低分辨率和低帧率的图像格式，于1987年发明。它与所有网络浏览器兼容，易于嵌入到各种网站中。GIF支持256种颜色，不支持半透明效果，适用于具有清晰边缘和线条以及少量颜色的图像。
PNG
PNG（Portable Network Graphics，便携式网络图形）是一种基于栅格的高质量文件格式，是无损的，支持透明度。它保留了图像的所有细节，并拥有1600万种颜色，因此非常适合复杂的视觉效果。PNG文件可以在几乎任何图像查看器、网络浏览器和图形工具中查看。
PNG的主要类型包括：
- PNG-8：支持256种颜色
- PNG-24：支持1600万种颜色
- PNG-32：支持1600万种颜色以及高级透明度支持
JPEG
JPEG（Joint Photographic Experts Group，联合摄影专家组）是一种常用于摄影和色彩丰富的图像的图像格式。它是最知名的格式之一，也是数字相机的默认设置。JPEG具有有损压缩，每次重新保存和导出图像时，图像的质量都会降低。它不支持透明度或动画。
WEBP
WebP是一种用于网络的图像格式，旨在显示高质量但文件大小较小的图像，以改善加载时间。它可以根据需要进行有损或无损压缩。WebP格式相对较新，由谷歌旗下的一家公司于2010年创建。WebP的主要优势是较小的文件大小，这导致了更好的用户体验和更快的加载时间。它支持透明度，并且据开发人员称，无损的WebP文件比PNG文件小26%。
AVIF
AVIF基于AV1视频格式，其压缩性能远远超过上述任何其他格式。这种开源格式于2019年发布，支持动画、透明度和多层图像。虽然在兼容性方面比其他格式稍逊，但是总体还是可观的。
3. 图片转换网站
针对图片的处理，在平时生活中，我们也需要对图片格式进行转换，图片资源的压缩等操作。下面，就介绍几种博主平时用到的网站：
- Adobe：https://www.adobe.com/express/feature
- iloveimg：https://www.iloveimg.com/