页面加载性能之图片内容

页面加载性能之图片内容图片占了网站大概 60 85 的一个带宽 本文档主要解决图片加载的耗时问题

大家好,欢迎来到IT知识分享网。

图片占了网站大概60%-85%的一个带宽,本文档主要解决图片加载的耗时问题。

移除不必要的图片

首先要考虑的是,如果没有这个图片,是否会影响用户体验?如果不影响,放后续加载。

如果图片既不是为了衬托文本,也不是为了给用户带来视觉上的体验,对用户而言并非有意义的信息,则移除。

最快的图片加载,就是不去加载它。

选择更优的图片类型

PNG用来展示有透明度的图片。

JPG用来展示一般的图片。

GIP用来展示动画图片。

一般选择更小的JPG。

移出图片摘要信息(Metadata)

一般手机或者数码相机拍摄的图片,都会携带一些摘要信息,比如何时何地?用什么设备?曝光度如何?

这些信息有时候占据了10%的体积。

可以用以下工具对其进行移除:

http://www.verexif.com/en/

调整图片大小

基于使用调整

实际上用到的可能只有200 * 200,这时就不需要去加载一个1000 * 1000的图片。

只有在真正需要的时候,去加载对应尺寸的图片。

缩略图就该加载缩略图,而非原图。

裁剪图片,展示重点内容

对一张图片来说,有重点和非重点的划分,重点是你想让用户看的区域,针对这部分区域可以裁剪出来。

降低图片质量

一张图片原始大小是227k,此时如果将质量降低至80%,只剩60k的大小。

针对不需要高分辨率的图片,可以适当降低图片质量,来减少图片体积,就好像你不会放大一个人的照片,来看他的毛孔粗细

相关工具:
  • paint.net
  • XNConvert
  • ImageOptim
  • ResizeIt
  • PicResize
  • Gimp

压缩图片

保持质量不变的情况下,用技术手段做图片压缩,常用网站:

https://tinypng.com/

总结

图片内容是主要优化空间,不仅容易实施,而且对网站的加载速度有显著提升。

参考

https://developers.google.com/web/fundamentals/performance/get-started/graphicalcontent-4

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/99432.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信