乐趣区

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

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 响应式图片

退出移动版