图片压缩
有损压缩.png
压缩之后 肉眼几乎察觉不出来 压缩之后少了的那些东西.
png8 /png24 /png 32之间的区别 ?
- png8 -------- 256 色 + 支持透明( 256 即为 2 ^ 8 ,用8 bit 来存一个像素的内容,占用空间更小)
- png24------- 2 ^ 24 色 + 不支持透明 (24bit)
- png32 ------ 2 ^ 24 色 + 支持透明 (有符号 32bit)
每种图片格式都有自己的特点 ,针对不同的业务场景选择不同的图片格式很重要.
-
jpg有损压缩,压缩率高,不支持透明 (大部分不需要透明图片的业务场景)
-
png 支持透明,浏览器兼容好 ,(大部分需要透明图片的业务场景)
怎么记住 ? 放个屁 是透明的 . 所以需要透明的地方用png
淘宝首页的图标.png
因为需要背景透明 所以这个图片就是png 的
image.png
-
webp 压缩程度更好,在ios webview 有兼容性问题,(在安卓中支持的好)
-
svg矢量图 代码内嵌,相对较小 —— (图片样式相对简单的业务场景)
图片压缩的几种方法
针对真实图片情况，舍弃一些相对无关紧要的色彩信息
1: CSS雪碧图
把你的网站上用到的一些图片整合到一张单独的图片中
这样带来的好处就是 减少你的网站的HTTP请求数量, 但是带来的缺点就是合并之后的图片大小比较大, 如果这个图片没有加载出来 ,那么整个页面都显示不出来.
看了一下facebook 的雪碧图 . 没有所有的都放一张图片 而是分开放.
Facebook雪碧图.png
Facebook雪碧图.png
从facebook复制过来的雪碧图.png
把他按照 9 10 11 的顺序排列
那么涉及到怎么来抠这个图.自己慢慢试也能试出来,用工具更方便.
总体就是把他分成3 块
雪碧奶牛 老外还是会起名字 , 太形象
直接点下边就生成出来了. 牛牛牛
.icon{
display: flex;
}
.icon9{
background: url('image/facebook.png') no-repeat -1px -67px;
width: 28px;
height: 28px;
}
.icon10{
background: url('image/facebook.png') no-repeat -1px -1px;
width: 28px;
height: 28px;
}
.icon11{
background: url('image/facebook.png') no-repeat -1px -34px;
width: 28px;
height: 28px;
}
<div class="icon">
<div class="icon9"></div>
<div class="icon10"></div>
<div class="icon11"></div>
</div>
最后效果
横向排列 9 10 11 .png
2: Image Inline
将图片的内容内嵌到html 当中, 从而减少网站的http 请求数量
淘宝首页找了一圈没看见
这种不适合大图片.因为本身用base64 的数据 ,不会对图片进行压缩等等. 效率不如webp 高. 但是对于小的icon 这样可以减少一次http 请求
3: 使用矢量图
使用SVG进行矢量图的绘制,使用iconfont解决icon问题
看这里阿里的iconfont ,想用的 登录之后 下载就可以了
阿里的iconfont.png
其实矢量图就是画出来的 .参照w3c
4: 在安卓下使用webp
WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。
淘宝首页中有很多 webp 格式的图片 .不举例子了
在线压缩图片: 网站
image.png
最后的结果.png
压缩完之后的 这个图片从 6 kb 压缩到2 kb .
最终测试两个png.png
确实看不出来啥区别....图片压缩对性能优化影响还是蛮大的.
网友评论