day10css图片优化、测试检查

图片优化

• 使用背景图
  • 对于页面中与页面内容无关，起修饰作用的图片，使用背景图 background-image（如页面中小图标尤其多次重复出现的，纹理性的背景），与页面内容相关展示性的图片如（广告图、产品图）使用 img 标签。
• 图片品质
  • 注意图片优化：在保证视觉效果的情况下，选择最小的图片格式与图片质量，以减少加载时间。
  • 注：通常颜色丰富线条复杂的图片选择 .jpg，颜色单一的小图片使用 .gif，需要更好的显示细节或需要支持半透明的图片使用 .png 等。
• 使用精灵图
  • 运用 CSS sprites 技术集中小的背景图或图标，减少页面 http 请求。

测试检查

1、做完的页面要与设计稿进行比对，保证对设计稿 95% 以上的还原度。

（1）页面模块的完整性，保证页面不出现模块丢失 ( 尤其是悬浮的侧边栏、弹窗、下拉菜单等）；

（2）字体、字号、文字颜色的一致性；

（3）背景图片与图片是否有丢失；

（4）模块间距的还原度（通常根据页面设计排版的复杂程度，最多允许 5-10px 以内的偏差）。

2、跨浏览器的兼容测试。

做完的页面，要根据需求进行跨浏览器的兼容测试，保证不同浏览器显示结果基本一致。Pc 端通常需要测试

的浏览器有 chrome、firefox、opera、IE（IE 低版本是否兼容与需求沟通确定）。