网页中常见的图片格式

coderklaus
1,492 阅读6分钟

网页中常见的图片格式

在大多数的web页面中，图片占到了页面大小的60%-70%。因此在web开发中，不同的场景使用合适的图片格式对web页面的性能和体验是很重要的

格式类型压缩方式动图支持透明支持颜色显示压缩
jpg/jpeg位图有损压缩不支持不支持真彩色压缩后体积较小
多次压缩会失真
png位图无损压缩不支持支持支持索引色也支持真彩色压缩后，体积相对较大
多次压缩后，图片不会失真
gif位图无损压缩支持支持索引色压缩体积小
apng位图无损压缩支持支持支持索引色也支持真彩色
webp位图支持无损压缩和有损压缩支持支持真彩色压缩后图片比jpg和png都小
svg矢量图无损压缩支持支持真彩色通过指令来进行渲染，对于复杂的图片消耗的性能较大
base64字符串支持支持真彩色base64本质是转换为了字符串，所以不存在压缩

jpg/jpeg

jpg和jpeg是等价的，jpg是因为早期Windows操作系统只支持3位后缀

jpg是有损压缩， 而每从网站上保存一次图片的时候，浏览器会自动对图片进行一次压缩

这也就意味着每下载一次jpeg图片，jpeg图片会失真一次

一张照片在Instagram反复上传下载90次之后....，， 在最后jpg图片完全变样了

多次下载jpg

jpg图的使用场景：

  1. 适合那些色彩丰富的图片
  2. 适合那些对图片质量要求不高的场景
  3. 不适合文字或者线条较多的图片

png

png 是20世纪90年代推出的一种图片格式，它采用的是无损压缩，其目的是为了取代gif

png分为png8，png24，png32.这几种主要区别是储存方式不同

类别说明
png8只支持256色，支持透明（要么全透明，要么不透明）
png24支持更多的颜色，但是不支持透明
在Photoshop中导出的png24实际是png32
png32比png24多了8位alpha通道，所以它支持透明度的设置

png图的使用场景:

  1. 适合文本或线条较多的图片
  2. 适合存在透明背景的图片

gif

  1. gif使用8位编码，所以gif只能只能表示256色，也就是索引色
  2. 不支持半透明，像素无法平滑过渡
  3. 边缘会有明显锯齿

常见的解决方案gif锯齿效果的方式是在图片的边缘加一圈白边，以减轻这种视觉效果

apng

  1. 本质就是png格式图片的扩展，使png图片格式支持了动画效果
  2. 需要进行兼容性处理
  3. 可以在gif_vs_apng对比两者区别

webp

  1. 集成了png和jpg的优点，是google专门为web网站开发的图片格式
  2. 需要进行兼容性处理

svg

  1. SVG图片由直线和曲线以及绘制它们的方法（算法）组成

  2. SVG使用XML来描述图片

    所以在任何时候你都可以把svg当做一个文本文件来对待，因此svg的体积更小且修改方便

base64

优点

  1. base64格式的图片是文本格式，本质上是字符串
  2. base64可以直接将图片嵌入到网页中，不用再请求服务器调用图片资源，减少了服务器访问次数
  3. 使用方式和普通图片没有任何的区别，所以对于网页中的小图片适合采用base64进行编码后嵌入到网页中

缺点

  1. base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力
  2. base64格式的内容太多，在网页中使用过多的base64格式图片，会导致加载网页的速度会降低，可能会影响用户的体验
  3. base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css
  4. 相比其他格式，体积会至少大1/3，并且在编码解码有额外消耗
<!-- 
    1. 通过src引入base64格式图片
    2. data:image/png;base64,xxxxxx
       + data => 数据URI的开头，标志着接下来是直接嵌入在网页中的数据
       + image/png => 图片元素的MIME类型
       + ;base64 => 表示接下来的数据是使用Base64编码方案编码的
       + ,xxxxx => xxxxx即为使用base64编码后的数据
-->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="
>

ICO

.ico是一种图标格式，这种图标扩展名为.icon、.ico

常见于windows的桌面图标和网址导航栏的小图标

BMP

BMP (Windows Bit Map)是标准的Windows影像格式

不支持压缩 也不支持透明

是一种比较老的图片格式，目前在web中极少使用

AVIF

AVIF是一种基于AV1视频编码的新图像格式

相对于JPEG，WEBP这类图片格式来说，它的压缩率更高，并且画面细节更好

而最关键的是，它是免费且开源的，没有任何授权费用

因为AVIF使用的是视频编码格式，所以AVIF更适合于动图

但是AVIF目前是比较新的技术，只有新版的Firefox和Chrome支持

avatar
文章
阅读
粉丝