图像可以分为栅格图像文件、矢量图像文件两大类，本文介绍5种网页最常用的格式

主流图像格式

	优点	缺点	适用场景
JPG / JPEG	1.体积小 2.加载快 3.支持颜色多	1.有损压缩 2.不支持透明	色彩丰富的图片 大的背景图、轮播图或banner图
PNG-8 / PNG-24	1.支持透明 2.无损压缩	体积太大	Logo、需要透明效果的图
GIF	1.体积小 2.支持透明 3.支持动图	最多支持256种颜色	需要动画效果的图片
SVG	1.支持无限放大 2.体积更小	对性能有影响	简单形状的图片，可以直接写在HTML里
base64	1.减少http请求		通过对图片编码，结果写入HTML或CSS 减少http请求次数，适用于重复使用的小图标

前言

图像文件的类型和格式分为两个主要类别：光栅（或者叫作栅格）图像文件和矢量图像文件

常见的栅格图像格式有3种：

• JPEG
• PNG
• GIF

栅格图像文件类型为静态图像，其中每个像素均基于其分辨率具有定义的颜色，位置和比例。调整大小时，原始像素会被简单地拉伸，导致图像失真

常见的矢量图像格式有：

• SVG
• AI
• EPS
• PDF

矢量图像的特点是可以无限放大而不会失真

准确的说，栅格图像称为“图像”，而矢量图像应该被称为“图形”

接下来将介绍网页中常见常用的图像格式

一、JPEG，最常见的格式

JPEG（或JPG），其全称为Joint Photographic Experts Group（联合图像专家组），是一种有损压缩的光栅图像文件格式，被浏览器、操作系统广泛支持

特点：

• 优点一：体积小（压缩率高），兼容性高
• 优点二：颜色丰富
• 不支持Alpha通道，无法调节透明度
• 缺点：有损压缩

适用场景：

• 场景丰富的图像，如头像、产品图片等
• 注意！！，不适用于保存信息图表等有很多小文本的图像

二、PNG，Web广泛使用的格式

PNG，英文全称为Portable Network Graphics PNG（便携式网络图形），支持无损压缩，保证颜色之间的细节和对比度。特别的，PNG提供比JPEG更好的文本可读性

特点：

• 优点：无损压缩 + 清晰的图像和可见文本
• 支持Alpha通道的透明/半透明特性
• 缺点：高分辨率时，体积过大

适用场景：

• 信息图表、横幅、屏幕截图等包含文本的图像

更多关于PNG的特性请浏览：PNG - 维基百科，自由的百科全书 (wikipedia.org)

三、GIF，动画图像格式

GIF，英文全称为Graphics Interchange Format（图像交换格式），无损压缩，将图像限制为8 bits/每个像素，并限制为256色调色板，这也就决定了它的图像质量不会太高

特点：

• 优点：动画支持、体积小
• 缺点：8-bit限制导致图像质量不高

四、WebP，JPEG和PNG的最佳替代格式

WebP 是一种新型的图片格式，可以为网站上的图片提供卓越的无损和有损压缩

无损 WebP 支持透明度（也称为 Alpha 通道）

特点：

• 优点：较小的体积即可获得相同的图像质量
• 缺点：不是所有浏览器都支持

适用场景：

• 需要替代JPEG和PNG，节省带宽以提升网站加载速度的场景

五、SVG

Scalable Vector Graphics（可伸缩矢量图形）格式，由W3C开发的一种标记语言，可以在浏览器中直接渲染为二维图像。

它不像栅格格式那样依赖像素，而是使用XML文本以类似于数学方程式计算勾勒形状和线条获得图形

特点：

• 优点：支持无限放大和无损缩放
• 缺点：难以支持复杂的图像图形

适用场景：

• 简单的插图、形状、文本、Logo

六、更多

更多图像格式可以参考：

• EPS – 插画/排版设计矢量图像格式
• AI – Adobe Illustrator文档格式
• PDF – 电子书常用文档格式
• TIFF – 扫描仪最佳拍档图像格式
• BMP – 过气的图像格式
• HEIF – 手机照片常见图像格式
• PSD – Photoshop文档格式
• Raw – 数码相机图像存储文件格式

参考链接

深入探讨15种主流图片格式及其优缺点 - 闪电博 (wbolt.com)

PNG - 维基百科，自由的百科全书 (wikipedia.org)

网站的图片格式 | WebP | Google Developers