前端规范文档 - 图片规范

####1. 页面中引用的<img/>标签,为图像指定height和width属性是一个好习惯。

  1. 如果设置了这些属性,就可以在页面加载时为图像预留空间。如果没有这些属性,浏览器就无法了解图像的尺寸,也就无法为图像保留合适的空间,因此当图像加载时,页面的布局就会发生变化。
  2. 不要通过height和width属性来缩放图像。如果通过height和width属性来缩小图像,那么用户就必须下载大容量的图像(即使图像在页面上看上去很小)。正确的做法是,在网页上使用图像之前,应该通过软件把图像处理为合适的尺寸。
  3. 并且强烈建议按需加入alt,title属性,比如用户头像等。
    <img src="./mouse.jpg" height="200" width="200" title="" alt="" />

####2. 图片格式

  1. 普通背景图一律使用PNG-8;
  2. 半透明效果使用PNG-24,若要兼容IE6需使用兼容图,并且在CSS中_bakcground引入;
  3. 大尺寸,颜色较多的图片,使用“存储为web格式”并适当调整图片品质,找到文件大小于图片质量的平衡点;

####3. 背景图处理

  1. 必须使用CSS Sprite拼合CSS背景图,减少页面HTTP请求;
  2. 按类型区区划分背景图,比如多个类型拼合在一张图里;
  3. 拼合时每个背景元素之间需保持间距,目前定位10PX;
  4. 多人协作时,需要将PSD资源文件同步进SVN上,每次更改PSD文件,再导出资源图;若有修改PSD文件,请及时告知其他同学,其他人在修改时需先update,再修改,保持PSD文件为最新,保证版本统一。

以上内容为之前项目中遇到的问题,和今后需要注意的,从网上收集,并加以整理。

因为经验和能力等,实际实施起来,并未能达到预期的理想目标,导致后期整个项目的维护和后续的开发上存在部分问题。完善文档,让我们的开发更有节奏,更加规范。