在项目中如何做图片优化

(1)、降低图片的大小

我们的目的是降低图片的大小kb,有很多方法可以做,压缩图片,选择更小kb的图片格式,以达到最优的显示效果,找在线压缩图的网站如TinyPNG:一个压缩PNG的神站

(2)、选择适当的图片宽度尺寸(即响应式图片)

** (3)减少HTTP的网络资源请求 考虑CSSSprites(背景精灵图/雪碧图)**

怎么使用精灵图?

利用CSS的background-imagebackground- repeatbackground-position的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置

** (4)csscss3`制作简单的图标和动画(代替gif图片)**

随着技术的发展,css3可以实现的效果越来越多,比如箭头图标,三角形,梯形等图标,或者一些阴影效果,渐变的效果,所以可以用css制作一些简单的图标,而且具有多变性

** (5)SVG技术替换图片**

SVG 是使用 XML 来描述二维图形和绘图程序的语言,支持透明,缩放,动画

什么是SVG?(摘自w3cschool)

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

(6)字体图库代替图标

随着技术的更新和浏览器的更新,字体图库去代替一些图标我认为还是极好的,使用字体图库你不仅可以改变大小,而且还可以改变颜色

(7)图片延迟加载(懒惰加载)(js/lazyload.js)

有个页面会很大很长很多的图片素材,这样全部加载就会变的很慢,因此需要修改一下加载方案,只加载窗口内的图片,我们大家浏览网站的时候会经常看到会有默认图,图片加载成功之后会替换默认图

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值