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

最新推荐文章于 2025-09-10 11:07:46 发布

weixin_33809981

最新推荐文章于 2025-09-10 11:07:46 发布

阅读量128

点赞数

CC 4.0 BY-SA版权

文章标签：前端 php ViewUI

原文链接：https://my.oschina.net/gbin1/blog/143018

本文探讨了如何通过DataURI技术替代图片的src属性，以减少页面请求数量，从而提高网站加载速度。介绍了DataURI的原理、使用方法及其实现效果，并指出这种方法在现代浏览器中广泛适用。

为什么80%的码农都做不了架构师？>>>

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

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

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

<!-- 以前的写法 -->
<img src="/images/logo.png" />

<!-- 使用data URI的写法 -->
<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 极客社区