开发者社区> 问答> 正文

移动端图片优化

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

展开
收起
a123456678 2016-03-25 14:11:41 2413 0
2 条回答
写回答
取消 提交回答
  • 可以使用cdn剪裁、懒加载、以及使用webp等格式
    2019-07-17 19:14:15
    赞同 展开评论 打赏
  • 这两种情况针对的都是图片很少或不会更新使用的,所以在某种程度上,相似度很高(比如都可以减少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酱 也说了多处重用时无需重复图形内容。

    2019-07-17 19:14:14
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
《优酷响应式布局技术全解析》 立即下载
PWA 移动Web的现在与未来 立即下载
PWA移动Web的现在与未来 立即下载