datauri是什么_使用DataURI编码图像

datauri是什么

Somewhat unusually, there’s a way of placing images on web pages without referencing an image file directly. By encoding the image information as a string of characters and numbers and placing this code in the CSS or HTML of your web pages, we can significantly decrease page load times.  While this isn’t practical for large images, or any picture that might undergo frequent changes, encoding an image in the dataURI scheme can provide two significant advantages:

不寻常的是，有一种方法可以将图像放置在网页上而不直接引用图像文件。 通过将图像信息编码为字符串和数字，并将此代码放置在网页的CSS或HTML中，我们可以大大减少页面加载时间。 尽管这对于大图像或任何可能进行频繁更改的图片不切实际，但使用dataURI方案对图像进行编码可以提供两个明显的优势：

• Reduced HTTP Requests. Every separate file a browser has to fetch increases page load time. Merging files – whether by using sprite images or encoding them with the technique I demonstrate in this article – increases the efficiency of a page.

  减少HTTP请求。 浏览器必须提取的每个单独文件都会增加页面加载时间。 合并文件(无论是使用sprite图像还是使用我在本文中演示的技术对其进行编码)都可以提高页面的效率。

• Latency is the pause between a browser’s request for a file and its delivery. Latency is particularly prevalent for mobile devices; joining files together eliminates multiple, staggered delays that work to slow page load speeds.

  延迟是浏览器对文件的请求与其交付之间的暂停。 延迟在移动设备中尤为普遍； 将文件连接在一起可消除多个交错的延迟，这些延迟会降低页面加载速度。

Encoding an image is not something you can do by hand – you need to use a tool or service. A few examples:

编码图像不是您可以手工完成的，您需要使用工具或服务。 一些例子：

• DataURI encoder

• WebCoder Tools Base64 Image Converter

• Binary file to Base64 Encoder / Translator

• DataURI编码器

• WebCoder工具Base64图像转换器

• 二进制文件到Base64编码器/转换器

I’ll use the PNG image shown in the top right corner of this article as an example. Encoding it as base 64 produces the following code, truncated here for brevity:

我将以本文右上角显示的PNG图像为例。 将其编码为base 64会产生以下代码，为简洁起见，此处将其截断：

iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAA…

Now that we have the code, we can use it anywhere in our stylesheet that you can reference an image, so long as the code is prefaced with data:image/(format);base64,

现在有了代码，我们可以在样式表中可以引用图像的任何地方使用它，只要代码以data:image/(format);base64,

header {
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAA… );
}

You can also place dataURI information in an HTML file to display an image:

您也可以将dataURI信息放在HTML文件中以显示图像：

<img src="https://img-blog.csdnimg.cn/2022010621192680123.png" >

Once you do so, you can (and should) style and provide attributes to the element as you would any other : <img> tag:

一旦这样做，就可以(并且应该)像其他任何样式一样为元素设置样式并提供属性： <img>标签：

<img src="https://img-blog.csdnimg.cn/2022010621192680123.png"
alt="Lion" style="float: right; margin-left: 2em">

Encoding image content as data is useful in many circumstances, particularly with small, repeated decorative images that would otherwise be downloaded as seperate files and add latency to your page. Background images in horizontal rules are one good example, as we shall see in the next article.

在许多情况下，将图像内容编码为数据很有用，尤其是对于小的重复装饰图像，否则这些图像将作为单独的文件下载并增加页面延迟。 水平规则中的背景图像是一个很好的例子，我们将在下一篇文章中看到。

Generally speaking the greatest gains from encoding your images will be through placing the base64 code in the CSS as background-images for elements that appear on multiple pages. Such information will be cached and used throughout the site, further speeding page load times.

一般来说，对图像进行编码的最大好处是将base64代码作为背景图像放置在CSS中，作为出现在多个页面上的元素的背景图像 。 这些信息将被缓存并在整个站点中使用，从而进一步加快页面加载时间。

翻译自: https://thenewcode.com/551/Encoding-Images-With-DataURI

datauri是什么