HTML Data URI模式

最新推荐文章于 2022-05-19 16:03:49 发布

weixin_33781606

最新推荐文章于 2022-05-19 16:03:49 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/rouway/blog/13856

本文详细介绍了Data URI的概念及其在网页中的应用。Data URI可以将图片等静态资源直接嵌入到HTML文档中，从而减少对外部资源的请求次数，提高网页加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

data URI 是一个将外部资源嵌套到一个web页面的方法模式。它可以将一些较少改动的资源内嵌到html页面中，省去一些不必要的外部资源访问链接数。

Data URIs只支持以下Html的元素或属性:

object (images only)
img
input type=image
link
CSS 语句中获取URL的, 如 background-image, background, list-style-type, list-style 等等.

具体格式为：

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

例子：

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

具体参见：http://en.wikipedia.org/wiki/Data:_URL

转载于:https://my.oschina.net/rouway/blog/13856