乐趣区

关于前端:前端开发中图片的优化

jiezi

1. 罕用的图片格式

PNG

  • 长处：背景能够通明、画质很高、不失真
  • 毛病：体积很大
  • 应用场景：比拟小或者须要局部通明的图片，例如 logo、图标等

JPG/JPEG

  • 长处：压缩比高的状况下能够保留比拟高的画质，绝对 PNG 俩说体积会小很多
  • 毛病：边缘会产生锯齿感、含糊感
  • 应用场景：在展现较大且画质较好的图片时应用。例如轮播图、大背景图等等

WEBP

  • 由 Google 提出一种新的图片格式。领有无损压缩的品质（PNG），体积还比 PNG 小大略 30%。但遍及度不够，兼容性不好，目前应用较少。

GIF

  • 长处：体积小，反对动画、通明
  • 毛病：色调不够丰盛，只反对 256 种颜色
  • 应用场景：一些色调简略的 logo 或图标。理论开发中应用的较少，个别会应用 PNG 来代替

2. 图片懒加载

初始时，图片不进行加载，在图片进入可视化区域时再进行加载。

对于图片的懒加载，很多浏览器也做了原生反对。但兼容性不好。

<img loading="lazy" src="http://assets-cdn.99plas.com/packages/wechat-example.png" />


如果须要实现懒加载的话，能够应用一些现有的库，例如 vue 相干的 vue-lazyload、react 版的 react-lazyload。

3. 响应式图片

在不同的尺寸，不同的分辨率下进行适配而采纳响应式图片

上面是一个在不同尺寸下应用不同的图片的例子：

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"src="elva-fairy-800w.jpg"alt="Elva dressed as a fairy">

srcset 定义了咱们容许浏览器抉择的图像集，以及每个图像的大小。
sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳抉择—咱们在之前曾经探讨了一些提醒。

更加具体的阐明请参考：MDN 响应式图片

退出移动版