页面优化 - 使用Data URI代替图片SRC

对于提高页面访问性能的方式,其中比较重要的准则就是减少页面的请求数量 常用的方式是合并css js文件、使用精灵图片 还有一种有效方法可以尝试,用Data URI代替图片的src 一般都会使用src引用图片的路径 <img src="/images/logo.png" /> 使用data URI就是直接嵌入base64编码格式的图片 <img src="data: image/jpeg;base64,/9j/4AAQSkZJkAAD/7AEAAAAPAAA/+AGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKD...." />

好处

可以极大的减少图片请求的数量

缺点

增加了页面的大小,会影响页面的加载时间,但这个问题可以通过开启gzip压缩来弱化

注意

改用这种方式后,对图片的存储方式,或者后端的代码都可能产生影响,建议在适当的场景使用,例如常用的一些静态资源图片

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2015-11-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黑泽君的专栏

错误: 类Something是公共的, 应在名为 Something.java 的文件中声明

错误: 类Something是公共的, 应在名为 Something.java 的文件中声明

4142
来自专栏我的博客

PHP敏感函数关闭参考

搜索disable_functions 然后改为=disable_functions=phpinfo,dl, exec, system,passthru,pop...

3748
来自专栏行者常至

struts工作流程

1143
来自专栏Django Scrapy

day4 hadoop

最新日志查看 ls -lrt 监控系统命令 top vmstat * ( *输入数字 前边是多少秒一次 后边是次数) Oracle创建用户等一系列 cr...

2794
来自专栏Albert陈凯

mapreduce项目调优

一、调优的目的 充分的利用机器的性能,更快的完成mr程序的计算任务。甚至是在有限的机器条件下,能够支持运行足够多的mr程序。 二、调优的总体概述 从mr程...

3326
来自专栏Python爬虫实战

Python爬虫利器:Requests库的使用

写了一些爬虫,从urllib库转到requests库,到目前为止,个人感觉requests库是最简单易用的HTTP库,以下这段话来自requests官网:

881
来自专栏纯洁的微笑

jvm系列(十一):Java 8-从持久代到metaspace

译者 梅小西,原文出处:http://blog.csdn.net/wang8118/article/details/45765869 Java 8介绍了一些新语...

3856
来自专栏散尽浮华

nginx利用geo模块做限速白名单以及geo实现全局负载均衡的操作记录

Nginx的geo模块不仅可以有限速白名单的作用,还可以做全局负载均衡,可以要根据客户端ip访问到不同的server。比如,可以将电信的用户访问定向到电信服务器...

3736
来自专栏乐百川的学习频道

Python HTTP库requests 介绍

前面我写的爬虫用的都是Python自带的的标准库urllib,这个库用起来还行,不过有些操作比较麻烦。所以现在我们来学习一下一个非常著名的HTTP库——requ...

23210
来自专栏PHP技术大全

通过代码审计找出网站中的XSS漏洞实战(三)

笔者此前录制了一套XSS的视频教程,在漏洞案例一节中讲解手工挖掘、工具挖掘、代码审计三部分内容,准备将内容用文章的形式再次写一此,前两篇已经写完,内容有一些关联...

952

扫码关注云+社区

领取腾讯云代金券