web前端优化之图片优化 常见图片格式详解

一.bmp, jpg(jpeg), png, gif, webp 基本图片格式介绍

1. JPEG

   • 有损压缩格式
   • 没有透明信息
   • jpeg比较适合用来存储相机拍出来的照片,这类图像用jpeg压缩后的体积比较小。

   实用的技术:jpeg格式支持不完全读取整张图片，即可以选择读取原图、1/2、1/4、1/8大小的图片

2. PNG

   • 无损压缩格式
   • 可以有透明效果
   • png比较适合适量图,几何图

3. webp

   • google开发的一种有损、透明图片格式，相当于jpeg和png的合体，google声称其可以把图片大小减少40%。

4. bmp

   • 可以压缩
   • 可以有颜色板

   颜色板就是一个颜色的索引，bmp格式一个像素可以只有2个,16个或256个取值。就拿单色位图来说明，默认为0对应RGB(0,0,0) 1,对应RGB(255, 255, 255)

5. GIF

   • bmp,jpeg,png图片都只有一帧，gif可以保存多帧图像

二.图片优化

问题分析

• img会增加页面资源HTTP的请求

降低图片大小

1. 降低图片大小kb，压缩图片

   • 压缩网站：智图、TinyPng:一个压缩PNG的神站

2. 选择适当的图片宽度尺寸（即响应式图片）

   • PC/移动端选取不同的尺寸

3. 减少HTTP的网络资源请求

   • CSSSprites(背景精灵图/雪碧图)
   • css和css3制作简单的图标和动画（代替gif图片）
   • SVG技术替换图片
   • html5 canvas绘画图形

4. 字体图库代替图标

   • 可改变大小
   • 可改变颜色

5. 图片延迟加载（懒惰加载）（js/lazyload.js）

   • 与预加载相反
   • 能有效的提高页面加载速度
   • 有时候可以帮助减少服务器负载

缓存

CDN静态资源部署