跳到主要内容

优化图片资源

web图像格式

web 支持的图像格式非常多,常见的有以下这些:

格式后缀MIME压缩方式是否可动态色彩深度最大像素px图像体积兼容性
JPEG.jpg, .jpeg, .jfif, .pjpeg, .pjpimage/jpeg有损8位65,535×65,535较大全兼容
PNG.pngimage/png无损8位16位2,147,483,647×2,147,483,647全兼容
APNG.apngimage/apng无损8位16位2,147,483,647×2,147,483,647较大IE不支持
GIF.gifimage/gif无损不支持65,536×65,536全兼容
SVG.svgimage/svg+xml无损(可优化)-无限-全兼容
WebP.webpimage/webp无损或者高质量有损有损8位,无损可到32位16,383×16,383IE不支持
AVIF.avifimage/avif无损或者高质量有损 8/10/12位2,147,483,647×2,147,483,647非常小IE,Safari不支持
色彩深度

色彩深度:简称色深,在计算机图形学领域表示在图像或者视频帧缓冲区中储存每一像素的颜色所用的bit数,常用单位为位/像素(bpp)。色彩深度是用n位颜色来说明的,色彩深度越高,可用的颜色就越多,例如,色彩深度是n位,即有2n种颜色选择。

例如:

  • 1位:只有黑白两种颜色
  • 8位:RGB 三通道,其中红色和绿色各占3位,蓝色占2位,或者带有 A(Alpha)透明度通道,一共可以表示256种颜色

利用色深计算出图像的体积大小,可以1 byte = 8 bit8位色深的一个像素点大致占1 byte,那么100*100的图像体积就是100*100*1 byte

WebP

WebP

AVIF

选择合适的图像格式

选择合适的图像格式,可能会明显减少图像的体积,减少图片在网络传输过程的延迟。可以按照以下步骤筛选图像格式:

image-20220413232928983

图像压缩

imagemin

SVGO