开发者社区> 问答> 正文

移动端图片优化

a123456678 2016-03-25 14:11:41 933

有数量相当的小size图片(数字节~20KB),两种优化方案请帮我分析下优缺点,从服务器压力,客户端响应速度等方面,谢谢
方案1:使用CSS Sprites合并为一张大图
方案2:使用base64直接把图片编码成字符串写入CSS文件

分享到
取消 提交回答
全部回答(2)
  • 1715319332039364
    2019-07-17 19:14:15
    可以使用cdn剪裁、懒加载、以及使用webp等格式
    0 0
  • a123456678
    2019-07-17 19:14:14

    这两种情况针对的都是图片很少或不会更新使用的,所以在某种程度上,相似度很高(比如都可以减少http请求数、都比直接使用原图片麻烦一点(一个需要拼图,一个需要转码)),这两个方案的区别在于:

    base64 编码方案不会缓存图片,每次加载都要传输较大的 html/css;
    css sprites 方案多一个 http 连接;
    综上,权衡这两点,选择你需要的。

    update:
    我个人看法,建议使用 css sprites,虽然多一个 http 连接,但根据你表述的 有数量相当的小size图片(数字节~20KB),如果采用 base64 编码方案,目测流量要大大增加。多一个连接数对整体影响不大,更何况还有 Browser 的缓存(这个是重点)。

    bug fix:
    刚忽略了 CSS 也能缓存,经题主提醒,如果将 base64 编码写入 css 文件,而非 html 内部,相比于 css sprites 可以减少一个 http 请求。另外 @p酱 也说了多处重用时无需重复图形内容。

    0 0
添加回答

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程