前端性能优化：使用Data URI代替图片SRC

素颜马尾好姑娘i 2022-10-02 07:45 156阅读 0赞

日期：2013-7-6  来源：[GBin1.com][]

![前端性能优化：使用Data URI代替图片SRC][Data URI_SRC]

提升页面大小的效率，不仅仅是取决于使用精灵或是压缩代码，给定页面的请求数量在前端性能中也占有了很不小的重量。减少请求可以让你的网站加载更快，而其中一种减少页面请求的方法就是用***Data URI***代替图片的***src***属性：

<img src="/images/logo.png" />
    
    
    <img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH ...." />
    
    <-- 范例:  http://davidwalsh.name/demo/data-uri-php.php -->

当然页面大小会增加（如果你的服务器使用适当的gzip内容，这个增加会很小），但是你减少了潜在的请求，同时也在过程中减少了服务器请求的数量。现在大多数浏览器都支持***Data URI***，在CSS中的背景骨片也可以使用***Data URI***，因此这个策略现在已经可以在应用层级，广泛应用。

下一篇我们将介绍使用媒体队列加载指定大小的背景图片。

via [极客社区][Link 1]

#### 来源：[前端性能优化：使用Data URI代替图片SRC][GBin1.com] ####

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130706-front-end-performance-optimization-8/
[Data URI_SRC]: http://www.gbin1.com/technology/javascript/20130706-front-end-performance-optimization-8/title.jpg
[Link 1]: http://www.gbtags.com/gb/share/1404.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关【前端性能优化】Webpack性能优化

目录 1. 什么是Webpack？ 2. 提高构建速度 2.1 npm install 过程中的优化

ゞ浴缸里的玫瑰/ 2022年12月04日 02:27/ 0 赞/ 520 阅读

相关【前端性能优化】图片加载优化

目录 1. 图片类型 1.1 PNG 1.2 JPG/JEPG

迷南。/ 2022年11月25日 10:12/ 0 赞/ 448 阅读

相关前端性能优化-CSS性能优化

文章目录一、内联首屏关键CSS 二、异步加载CSS 异步加载的几种方式 1.js动态创建样式表link元素，并插入到DOM中

ゞ浴缸里的玫瑰/ 2022年11月13日 14:26/ 0 赞/ 476 阅读

相关前端性能优化：使用Data URI代替图片SRC

日期：2013-7-6 来源：[GBin1.com][] ![前端性能优化：使用Data URI代替图片SRC][Data URI_SRC] 提升页面大小的效率，不仅仅是

素颜马尾好姑娘i/ 2022年10月02日 07:45/ 0 赞/ 157 阅读

相关前端学习笔记(HTML)——图片与src的使用

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

野性酷女/ 2022年03月10日 07:20/ 0 赞/ 246 阅读

相关前端性能优化之图片篇

　　一个网站，不管是从加载时所占带宽，还是服务器请求数量的角度来说，它所占的比例一般都是相当大的，如果图片处理不当，必将成为前端性能及SEO的一个瓶颈，导致带宽及硬件方面的投入

末蓝、/ 2022年01月16日 10:11/ 0 赞/ 347 阅读

相关前端性能优化：使用Array.prototype.join代替字符串连接

日期：2013-7-3 来源：[GBin1.com][] [![前端性能优化：使用Array.prototype.join代替字符串连接][Array.prototype.

╰半橙微兮°/ 2022年01月13日 22:09/ 0 赞/ 182 阅读

相关 Data URI 详解

原文:[https://www.cnblogs.com/zhengxingpeng/p/6678808.html][https_www.cnblogs.com_zhengxin

￡神魔★判官ぃ/ 2022年01月07日 10:15/ 0 赞/ 604 阅读

相关【Data URI scheme 格式】src="data:image/png;base64，xxxx

Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏

青旅半醒/ 2021年12月13日 13:23/ 0 赞/ 190 阅读

相关 Data.URI.scheme

<!DOCTYPE html> <html> <body> <!-- Data URI scheme是在RFC2397中定义的，目的是将

比眉伴天荒/ 2021年11月29日 18:02/ 0 赞/ 238 阅读