前端图片格式如何选择

wt_neos
672 阅读6分钟

图片是页面中不可或缺一部分，对于前端的性能和用户体验有着较大的影响。下面我们就来探索一下各类图片的基本特性及使用场景。 最后有现代图片处理的一些办法。做更好的优化体验

大图

JPG/JPEG

最常用的静态图片格式之一。这种格式的图片能比较好的表现各种色彩，主要在压缩的时候会有所失真，也正因为如此，造就了这种图片格式体积的轻量。

优点：

1.兼容性强

2.色彩丰富

3.压缩率高，图片小

4.支持渐进

缺点：

  • 不支持动画、透明
  • 不适合存储企业类logo,线框类高清图片

PNG

PNG格式是有三种版本的，分别为PNG-8，PNG-24，PNG-32，所有这些版本都不支持动画的。PNG-8跟GIF类似的属性是相似的，都是索引色模式，而且都支持背景透明。相对比GIF格式好的特点在与背景透明时，图像边缘没有什么噪点，颜色表现更优秀。PNG-24其实就是无损压缩的JPEG。而PNG-32就是在PNG-24的基础上，增加了透明度的支持。
如果没有动画需求推荐使用png-8来替代gif

优点：

1.支持透明

2.压缩时几乎不失真

3.像素丰富

4.支持交错

5.兼容性强

缺点：

  • 文件较大

GIF

GIF是一种索引色模式图片，所以GIF每帧图所表现的颜色最多为256种。GIF能够支持动画，也能支持背景透明，这点连古老的IE6都支持，所以在以前想要在项目中使用背景透明图片，其中一种方案就是生成GIF图片。

优点：

1.支持动画

2.高兼容性

3.灰度表现佳

4.支持交错

缺点：

  • 最多支持 8 位 256 色，色阶过渡糟糕，图片具有颗粒感
  • 支持透明，但不支持半透明，边缘有杂边

APNG

APNG（Animated Portable Network Graphics）顾名思义是基于 PNG 格式扩展的一种动画格式，增加了对动画图像的支持，同时加入了 24 位图像和 8 位 Alpha 透明度的支持，这意味着动画将拥有更好的质量，其诞生的目的是为了替代老旧的 GIF 格式，但它目前并没有获得 PNG 组织官方的认可。 兼容性不佳:浏览器只有 Firefox 和 Safari，同时 Chrome 59 也将支持 APNG

优点：

1.支持动画

2.向下兼容 PNG

3.支持透明

4.色彩丰富

缺点

  • 生成比较繁琐
  • 未标准化

webP

有损 WebP 图像平均比视觉上类似压缩级别的 JPEG 图像小25-35% 。无损耗的 WebP 图像通常比 PNG 格式的相同图像小26% 。WebP 还支持动画: 在有损的 WebP 文件中，图像数据由 VP8位流表示，该位流可能包含多个帧。
包括体积小、色彩表现足够、支持动画。 简直了就是心中的完美女神！！
从can i use - webp上看，支持率95%。 主要是Safari低版本和IE低版本不兼容。 优点：

1.同等质量更小

2.压缩之后质量无明显变化

3.支持无损图像

4.支持动画

缺点

  • 兼容性相对较差，相对jpg,png,gif来说

PNG, GIF, JPG 比较

大小比较：通常地，PNG ≈ JPG > GIF 8位的PNG完全可以替代掉GIF 透明性：PNG > GIF > JPG 色彩丰富程度：JPG > PNG >GIF 兼容程度：GIF ≈ JPG > PNG

图片格式优点缺点使用场景
GIF文件小，支持动画、透明，无兼容性问题只支持256种颜色色彩简单的logo、icon、动图
JPG色彩丰富，文件小有损压缩，反复保存图片质量下降明显色彩丰富的图片/渐变图像
PNG无损压缩，支持透明，简单图片尺寸小不支持动画，色彩丰富的图片尺寸大logo/icon/透明图
WEBP文件小，支持有损和无损压缩，支持动画、透明浏览器兼容性相对而言不好支持webp格式的app和webview

方案

H5 的picture 元素 兼容 www.runoob.com/tags/tag-pi…

<picture class="pic">
<source type="image/webp" srcset="a.webp"> 
<img class="img" src="a.jpg"> 
</picture>

小图

BASE64

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址，图片随着 HTML 的下载同时下载到本地，不再单独消耗一个http来请求图片。

优点：

1.不需要额外的HTTP请求

2.适用于极小或简单图片

3.没有跨域问题，无需考虑缓存、文件头或者cookies问题

缺点：

  • 相对于其他图片格式，要大至少1/3
  • 不适用于中等以上图片

SVG

SVG 是一种基于 xml 的矢量图形格式，它将图像的内容指定为一组绘图命令，这些命令创建形状、线条、应用颜色、过滤器等等。SVG 文件是理想的图表，图标和其他图像，可以准确地绘制在任何大小。因此，SVG 是现代 Web 设计中用户界面元素的流行选择。

优点：

1.你可以对其放大、缩小，而不用担心损失质量

2.对于其他常用的图片格式来说，他要更小

3.支持动画

4.html,js,css都可以对其操作，更灵活，与DOM无缝衔接

缺点

  • 渲染时间较长，尤其是在它较复杂时
  • 不适用于游戏等高互动动画

对于雪碧图

随着Http2的普及，雪碧图的意义已经没那么大。使用BASE64，SVG都是更好的选择。

图片优化策略：

图片的最佳实践包括的要素

  1. 优秀的现代化标签 picture 用以代替 img
  2. 对图片进行自动化转换处理，使用 avif/webp 作为现代化的图片格式，jpg/png 兼容低浏览器
  3. 对图片进行自动化压缩处理，图片并不需要那么大
  4. Long Term Cache 的支持 (通过编译，对编译的条件有所提高)
  5. 小图片内嵌为 Data URI，减少 HTTP 请求
  6. 域外图片的压缩处理，如数据库中的图片地址
  7. 懒加载

现代一个优秀的图片处理应该是**编译期对静态文件压缩转换、运行期图片服务对动态图片的压缩转换**，以上最佳实践的要素完全可以被这两种方案所覆盖。

参考方案

  1. imagemin-webpack
  2. CDN实现一个Image组件
  3. next.js 的Image组件
  4. gatsby 的Image组件
avatar
文章
阅读
粉丝