我的书签
添加书签
移除书签GIF
特性
- 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
- 可插入多帧，从而实现动画效果。
- 可设置透明色以产生对象浮现于背景之上的效果。
- 由于采用了8位压缩，最多只能处理256种颜色，故不宜应用于真彩色图片。
更多关于GIF：
PNG
特性
- 支持256色调色板技术，文件体积小。
- 无损压缩
- 最高支持48位真彩色图像以及16位灰度图像。
- 支持Alpha通道的透明/半透明特性。
- 支持图像亮度的Gamma校准信息。
- 支持存储附加文本信息，以保留图像名称、作者、版权、创作时间、注释等信息。
- 渐近显示和流式读写，适合在网络传输中快速显示预览效果后再展示全貌。
- 使用CRC防止文件出错。
- 最新的PNG标准允许在一个文件内存储多幅图像。
更多关于PNG：
JPEG
特性
- 适用于储存24位元全采影像
- 采取的压缩方式通常为有损压缩
- 不支持透明或动画
- 压缩比越高影像耗损越大，失真越严重
- 压缩比在10左右肉眼无法辨出压缩图与原图的差别
更多关于JPEG：
WEBP
特性
- 同时提供有损压缩和无损压缩两种图片文件格式
- 文件体积小，无损压缩后，比 PNG 文件少了 45％ 的文件大小；有损压缩后，比 JPEG 文件少了 25% - 34% 文件大小
- 浏览器兼容差，目前只支持客户端 Chrome 和 Opera 浏览器以及安卓原生浏览器(Andriod 4.0+)，
团队约定
内容图
内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大
- 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
- 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大
背景图
背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片
- 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
- 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
- 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
- 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式
全国网速现状
固定网络
据文章 《2015年Q3中国宽带速率状况报告》，2015第三季全国平均速度整体情况：
中国固定宽带互联网网络平均网络下载速率达到7.90 Mbit/s，用户进行网页浏览的平均首屏呈现时间为2.18s，平均视频下载速率为6.41Mbit/s
移动网络
3G网络传输速率理论峰值在3.5Mbps，4G网络传输速率理论上可达到20Mbps，最高可以达到100Mbps。根据 的转换来算，3G网络的理论传输速率可达到450KB/s，4G网络的理论传输速率可达到 2.5MB/s ~ 12.5MB/s
受用户计算机性能、网络设备质量、资源使用情况、网络高峰期、网站服务能力、线路衰耗、信号衰减等多因素影响，3G和4G的实际平均传输速率约为：
- 3G：最高值100KB/s，平均值40～50KB/s
- 4G：最高值2.75MB/s，平均500～1000KB/s
3G/4G用户占比
2015年8月移动宽带（3G/4G）用户占比各省分布情况：
据文章 介绍：
团队约定
PC平台单张的图片的大小不应大于 200KB。
移动平台单张的图片的大小不应大于 100KB。
（图片的大小约定标准随全国网速的改变而改变）
- 上线的图片都应该经过压缩处理，压缩后的图片不应该出现肉眼可感知的失真区域
- 60质量的JPEG格式图片与质量大于60的相比，肉眼已看不出明显的区别，因此保存 JPEG 图的时候，质量一般控制在60，若保真度要求高的图片可适量提高到 80，图片大小控制在 200KB 以内
测试内容图应该写上表明图片尺寸的占位图，可以用线上占位图生成服务，如：
HTML 中图片引入不需添加 width、height 属性，alt 属性应该写上
推荐：
不推荐：
CSS 中图片引入不需要引号
CSS Sprites特点
- 减少请求数
- 加速图片的显示
- 维护更新成本大
- 更多的内存消耗，特别是大体积或有过多空白的 Sprites 图
- 图片渗漏，相邻的不需展示的图片有可能出现在展示元素中，特别是在高清设备移动设备上
Data URIs（base64编码）
- 减少请求数
- 转换文件体积大，大约比原始的二进制大33%
- IE6 / IE7 不支持
- 图片显示相对较慢，需要更多的CPU消耗
更多关于 CSS Sprites 和 Data URIs 可以阅读：
《When to Base64 Encode Images (and When Not To)》
团队约定
CSS Sprites 使用建议
- 适合使用频率高更新频率低的小图标
- 尽量不留太多的空白
- 体积较大的图片不合并
- 确保要合并的小图坐标数值和合并后的 Sprites 图尺寸均为偶数
Data URIs（base64编码）使用建议
- 合适更新频率高的小图片，如某些具备自定义功能的标题icon等
- 转换成 Base64 编码的图片应小于 2KB
- 移动端不使用 Base64 编码
