美文网首页
Image Sprite

Image Sprite

作者: 一无是个好孩子 | 来源:发表于2016-09-19 18:21 被阅读0次

目的

为了提高网站整体性能,针对我们网站图片比较多,我们决定采用 image sprite 方案减少 http 请求以优化性能;

规则

使用此方案有两个必须遵循的规则:

  1. 图片必须是两倍图一倍使用
    两倍图在切图时完成;使用时,按照一倍使用;例如:图片大小是44*44,我们使用的时候包裹图片的容器应该是22*22。
  2. 必须为 png 图片,以 iconP 开头,即 iconP*.png
    例如:iconP-avatar.png;

建议

  1. 建议只合并复用的图片(在多个页面出现);
  2. 建议只针对尺寸比较小的 icon(<100*100);
  3. 图片大小以不超过 2k 为宜;

未完待续。。。

相关文章

网友评论

      本文标题:Image Sprite

      本文链接:https://www.haomeiwen.com/subject/vesnettx.html