(1)、降低图片的大小
我们的目的是降低图片的大小kb,有很多方法可以做,压缩图片,选择更小kb的图片格式,以达到最优的显示效果,找在线压缩图的网站如TinyPNG:一个压缩PNG的神站
(2)、选择适当的图片宽度尺寸(即响应式图片)
** (3)减少HTTP的网络资源请求 考虑CSSSprites(背景精灵图/雪碧图)**
怎么使用精灵图?
利用CSS的background-image
,background- repeat
,background-position
的组合进行背景定位,background-position
可以用数字精确的定位出背景图片的位置
** (4)css和
css3`制作简单的图标和动画(代替gif图片)**
随着技术的发展,css3可以实现的效果越来越多,比如箭头图标,三角形,梯形等图标,或者一些阴影效果,渐变的效果,所以可以用css
制作一些简单的图标,而且具有多变性
** (5)SVG技术替换图片**
SVG
是使用 XML
来描述二维图形和绘图程序的语言,支持透明,缩放,动画
什么是SVG?(摘自w3cschool)
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
(6)字体图库代替图标
随着技术的更新和浏览器的更新,字体图库去代替一些图标我认为还是极好的,使用字体图库你不仅可以改变大小,而且还可以改变颜色
(7)图片延迟加载(懒惰加载)(js/lazyload.js)
有个页面会很大很长很多的图片素材,这样全部加载就会变的很慢,因此需要修改一下加载方案,只加载窗口内的图片,我们大家浏览网站的时候会经常看到会有默认图,图片加载成功之后会替换默认图