web性能优化之图片优化

zhaobinglong commented 3 years ago

web性能优化总览：#63

小图资源base64编码化

将小图标资源，直接base64编码成文本字符串，添加在dom文档中。可以减少一次网络请求，字符串可以被nginx充分压缩 base64可以在线转换。

base64的缺点：无法更改图标颜色，图标放大会失真

webp图片

WebP 源于VP8，是Google 2010年开源出来的图像编解码算法，可以说是“含着金汤匙出生”，YouTube、Gmail、Google Play均应用WebP图片格式。2018年之后，浏览器Edge、Firefox也宣布支持WebP格式。但就目前来说，WebP仍只被看作PNG更高效快捷的替代方案，而且Google的一些非开源的技术总是能神奇地阻碍图片的分享。

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

如果项目中大量的使用图片，那么 WebP 绝对是不可忽视的性能优化点。

结论

全站替换 WebP 后性能提升25%-30%左右

zhaobinglong commented 3 years ago

avif图片

总而言之一句话，AVIF图片格式压缩很棒，件大小比JPEG小10倍，具有相同的图像质量

<picture>  
    <source type="image/avif" srcset="snow.avif">  
    <img alt="Hut in the snow" src="snow.jpg">
</picture>

参考

https://www.zhangxinxu.com/wordpress/2020/04/avif-image-format/ https://convertio.co/zh/formats/avif/

zhaobinglong commented 3 years ago

svg（Scalable Vector Graphics ）(可缩放矢量图形)

SVG是一种开放标准的矢量图形语言，使用svg格式我们可以直接用代码来描绘图像，可以用任何文字处理工具打开svg图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来浏览。

优缺点

1.缩放无损还原，显示清晰 2.语义性良好 3.可用CSS控制图标样式以及动画 4.减少http请求

在网页中加载svg

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
  <g stroke="#AAB0BA" fill="none" fill-rule="evenodd">
    <path d="M10.524 3.413v8.235" stroke-linejoin="round"/>
    <path d="M13.027 7.508c.813 0 1.678-.01 1.678-.01.449 0 .812.376.812.826l-.005 6.36a.819.819 0 0 1-.811.826H6.31a.822.822 0 0 1-.811-.826l.005-6.36c0-.456.36-.825.812-.825l1.689.006M8.373 5.111l2.143-2.09 2.143 2.07"/>
  </g>
</svg>

参考

https://io-meter.com/2014/07/20/replace-icon-fonts-with-svg/

zhaobinglong commented 3 years ago

icon font图标资源

缺点

浏览器将其视为文字进行抗锯齿优化，有时得到的效果并没有想象中那么锐利。尤其是在不同系统下对文字进行抗锯齿的算法不同，可能会导致显示效果不同。
Icon Font 作为一种字体，Icon 显示的大小和位置可能要受到font-size、line-height、word-spacing等等 CSS 属性的影响。 Icon 所在容器的 CSS 样式可能对 Icon 的位置产生影响，调整起来很不方便。
使用上存在不便。首先，加载一个包含数百图标的 Icon Font，却只使用其中几个图标，非常浪费加载时间。自己制作 Icon Font 以及把多个 Icon Font 中用到的图标整合成一个 Font 也非常不方便。为了实现最大程度的浏览器支持，可能要提供至少四种不同类型的字体文件。包括TTF、WOFF、EOT 以及一个使用 SVG 格式定义的字体。

zhaobinglong commented 3 years ago

渐进式图片

浏览器下载图片的时候渐进式载入，这样下载完一张图可以看到它的样子，只不过只是不清楚的图，这样可以减少你等待看它的时间。
实际上有两种方式可以实现这种渐进式效果，一种是图像隔行扫描（Interlace），中文可以成为交错，另外一种叫做图像渐进式扫描（Progressive）。

案例

Apple的网上商店用的就是这个。

参考

https://www.zhihu.com/question/19773824

zhaobinglong / myBlog