Html 使用数据内联图像的最佳实践：-URL？_Html_Image

Html 使用数据内联图像的最佳实践：-URL？

html image

Html 使用数据内联图像的最佳实践：-URL？,html,image,Html,Image,我有一个简单的rails应用程序，它使用canvasContext.toDataURL（）存储HTML5站点中用户创建的图像。有一个索引操作，显示缩略图列表，还有一个显示每个图像的显示操作，显示图像我在后端非常懒惰，我只存储base64编码的数据：image/png；base64，…原始图像的字符串和缩略图，也在客户端生成。图像使用URI包含在页面中现在，由于在v9之前的IE中不完全支持这一点，我将不得不实现某种解决方法，可能是使用data-属性包含生成图像的URL，然后在页面加载后使用jQ

我有一个简单的rails应用程序，它使用

canvasContext.toDataURL（）

存储HTML5站点中用户创建的图像。有一个索引操作，显示缩略图列表，还有一个显示每个图像的显示操作，显示图像

我在后端非常懒惰，我只存储base64编码的

数据：image/png；base64，…

原始图像的字符串和缩略图，也在客户端生成。图像使用

URI包含在页面中

现在，由于在v9之前的IE中不完全支持这一点，我将不得不实现某种解决方法，可能是使用

data-

属性包含生成图像的URL，然后在页面加载后使用jQuery替换源属性

这就提出了一个问题：使用

data:

URL将相当大的图像内联到HTML中是否是一种好的做法

是否有任何建议或最佳做法？这些图像可能高达500kib，并且每个图像只使用一次。包含图像的页面在创建后不会更改，因此它应该可以很好地缓存，包括图像。包含缩略图（大约60 KiB）的索引页使用分页，因此该页几乎不可缓存。您可以假设HTML页面将在生产过程中被压缩或压缩。

这不是一个好主意。我会使用普通的、单独的图像资源

通过使用内联图像

您破坏了静态图像的所有可缓存性—对于内联图像，每当HTML页面更改时，所有图像数据都必须重新加载
压缩/压缩将花费更长的时间，并产生次优结果（因为图像数据更难压缩，效率更低）
互联网的其余部分是面向作为独立资源的HTML文档和图像的：预取器、缓存系统、代理
然后你就有了浏览器兼容性，正如你所指出的，这对于老版本的浏览器来说是糟糕透顶的

var xhr = new XMLHttpRequest();
xhr.open('GET', 'images/myimage.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e){
    if(this.status == 200){
        var bb = new WebKitBlobBuilder(); // Or MozBlobBuilder, MSBlobBuilder, etc.
        bb.append(this.response);

        var reader = new FileReader();
        reader.readAsDataURL(bb.getBlob('image/png'));
        reader.onloadend = function(e){
            $("#myimage").attr("src", reader.result);
        };
    }
};

xhr.send();

数据：