图片处理

本章将介绍图片的优化、以及图片地址如何替换为上线后的 CDN 服务器地址。

图片优化

图片体积不能超过 300K
JPG 图片必须压缩，一般 80%品质即可，保证文字清晰
JPG 图片必须使用渐进式图片：使用 Photoshop 的“存储为 web 所用格式”时候，勾选“连续”
透明 PNG 图片必须使用压缩工具压缩后提供

图片标签

PC 端 img 图片必须填写width、height、alt属性
移动端必须填写alt属性
alt不能为无意义字符，需要能表现出图片的含义，如图片为道具图，则应该为道具的名称

合理切图

需要变动的文字禁止切到图片中，如果不确定是否需要变动，请咨询接口人
需要程序后台动态生成的图片，如道具图片、头像、奖品，必须单独切割出来
装饰性图片合并成精灵图，减少页面请求

图片地址分离

专题完成，需进行图片地址分离

把图片放到ossweb-img文件夹里面，图片引用的时候 src 为game.gtimg.cn域名下的特定地址。

分离后示例：

/*分离前*/
.bg {
  background: url(ossweb-img/hd.jpg) no-repeat;
}
/*分离后*/
.bg {
  background: url(//game.gtimg.cn/images/xiangqi/cp/a20150730avatar/hd.jpg)
    no-repeat;
}

提示

图片必须分离；css文件、js文件可视情况，不是必须分离。

为了本地正常预览，分离前文件请使用相对路径或补全http://

如何知道分离路径

如现在专题的是天天爱消除的一个预约活动专题，专题目录是 a20090817booking，那采取下列步骤将获得分离地址：

百度搜索官方域名，找到官网http://peng.qq.com/地址，其中peng就是项目名的简写；确保一级域名是qq.com
查看官网首页源码样式表中的图片的地址，确认其中含有上一步得到的项目名；否则请找接口人确认
图片分离地址示例：//game.gtimg.cn/images/peng/cp/a20090817booking/，其中 peng 就是项目名的简写
分离地址只有项目名和专题名需要修改
图片跨域问题的解决：设置图片 crossOrigin 属性为 Anonymous，同时把图片域名 game.gtimg.cn 换为 ossweb-img.qq.com

← 文件目录数据统计→

# 图片处理

# 图片优化

# 图片标签

# 合理切图