当前位置:德化新闻中心 > 媒体聚焦 >

高性能网站常用的五种图片优化方法
时间:2020-04-12  来源:  作者:admin666

图片优化一直以来都是网站在提高性能方面的常用的一种前端优化方法。今天我们就一起来了解和学习一下,图片优化中常用的五种优化方法都有哪些。

高性能网站常用的五种图片优化方法

1、图片延迟加载

在页面中,先不给图片设置路径,只有当图片出现在浏览器的可视区域时,才去加载真正的图片,这就是延迟加载。对于图片很多的网站来说,一次性加载全部图片,会对用户体验造成很大的影响,所以需要使用图片延迟加载。

2、响应式图片

响应式图片的优点是浏览器能够根据屏幕大小自动加载合适的图片。

3、调整图片大小

例如,你有一个1920*1080大小的图片,用缩略图的方式展示给用户,并且当用户鼠标悬停在上面时才展示全图。如果用户从未真正将鼠标悬停在缩略图上,则浪费了下载图片的时间。

所以,我们可以用两张图片来实行优化。一开始,只加载缩略图,当用户悬停在图片上时,才加载大图。还有一种办法,即对大图进行延迟加载,在所有元素都加载完成后手动更改大图的src进行下载。

4、降低图片质量

例如JPG格式的图片,100%的质量和90%质量的通常看不出来区别,尤其是用来当背景图的时候。我经常用PS切背景图时,将图片切成JPG格式,并且将它压缩到60%的质量,基本上看不出来区别。

除此之外,网上还有很多在线压缩图片的网站,大家可以自行搜索。

5、尽可能利用CSS3效果代替图片

有很多图片使用CSS效果(渐变、阴影等)就能画出来,这种情况选择CSS3效果更好。因为代码大小通常是图片大小的几分之一甚至几十分之一。

【免责声明】本文系本网编辑部分转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与管理员联系,我们会予以更改或删除相关文章,以保证您的权益!




上一篇:跨平台开发技术都能够满足哪些需求
下一篇:没有了

图片新闻
热闻排行
友情链接

Copyright (C) 2016 德化新闻中心 版权所有,未经授权禁止复制或镜像,本站保留所有权利
蜀icp备14010686号-1