测试

Question

我使用延迟加载机制，只在用户视口中加载相关图像。

为此我已经定义了data-src属性，该属性链接到原始图像，并将base64编码的占位符图像定义为src属性，以使HTML有效。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-src="/path/to/image.png" alt="some text">

我注意到chrome缓存了base64字符串，但字符串很长并且使我的HTML膨胀（我在页面上有很多图像）。

所以我的问题是，使用小型base64编码或1px x 1px占位符图像是否更好？

注意：对于SEO目的，元素必须是img。此外，我的HTML必须有效，因此需要src属性。

Answer 1

你可以在src标签（1x1像素GIF）中使用这个更短（但有效！）的图像：

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

请注意，如果你gzip你的HTML（你应该），字符串的长度将不那么重要，因为重复的字符串压缩很好。

根据您的需要，您可能希望使用1x1像素的颜色（导致更短的gif文件）。一种方法是使用Photoshop或类似工具以正确的颜色创建1x1像素GIF，然后使用ImageOptim之类的工具找到最佳压缩效果。有各种在线工具可将生成的文件转换为数据URL。

Answer 2

我在你的情况下使用占位符。

使用base64编码的图像会破坏延迟加载的目的，因为您仍然需要将一些图像数据发送到浏览器。如果由于图像作为原始HTTP请求的一部分下载而不是通过浏览器可能使用图像标记和URL进行的单独请求，这可能对性能有害。

理想情况下，如果它只是一个“加载”。占位符或类似的东西我在CSS中创建它，然后当用户向下滚动以调用特定图像的加载时，用加载的图像替换它。

Answer 3

我注意到chrome缓存了base64字符串，但字符串很长并且使我的HTML膨胀（我在页面上有很多图像）。

如果是这种情况，请考虑放置一个真实的＆＃39; src属性指向始终相同的占位符。您确实需要额外的HTTP请求，但：

几乎可以肯定是流水线，花点时间。
它将触发图像缓存机制，base64执行不，这样图像实际上只会被解码一次。对于今天的CPU和GPU来说，这不是一个很大的问题，但无论如何。
它也将作为资源缓存，并且使用正确的标头，它将保持长时间，在同一客户端的所有后续页面点击中提供零加载时间。

如果页面上的图片数量很大，那么使用＆＃34; real＆＃34;图像。

我敢于冒险它会更加兼容浏览器，蜘蛛和什么不兼容 - base64编码得到广泛支持，但普通图像更是如此。

即使与the smallest images you can get in base64比较，26个字节也会变为this

src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="

虽然你可以从

src="/img/p.png"

一直到

src="p.png"

看起来非常无趣 - 如果这样的话甚至存在。

测试

我进行了一次非常基本的测试

<html>
<body>
<?php
    switch($_GET['t']) {
        case 'base64':
            $src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';

            break;
        case 'gif':
            $src = 'p.gif';
            break;
    }
    print str_repeat("<img src=\"{$src}\"/>", $_GET['n']);
?>
</body>
</html>

我得到了：

images   mode      DOMContentLoaded   Load      Result
200      base64    202ms              310ms     base64 is best
200      gif       348ms              437ms
1000     base64    559ms              622ms     base64 is best
1000     gif       513ms              632ms
2000     base64    986ms             1033ms     gif is best
2000     gif       811ms              947ms

所以，至少在我的机器上，似乎我给你一个糟糕的建议，因为你看到你的页面加载时间没有优势，直到你差不多两千图片。

然而：

这在很大程度上取决于服务器和网络设置，以及实际DOM布局上的甚至更多。
我只使用Firebug为每个集合运行了一个测试，这是一个糟糕的统计数据，这是一种糟糕的方法 - 如果你想拥有可靠的数据，可以使用一些Web性能监控工具和克隆在任一模式下运行几十个页面加载你的真实页面。
（如何使用PNG代替gif？）

Answer 4

对于响应式图像占位符，我已经使用内联SVG获得了良好的效果，如here所述。

基本上，你提出类似

的东西

<h1>Question 1</h1><br>
 </br>
  <h4> What types of food do you like to eat for Breakfast?</h4><br>
  <input type="checkbox" name="B1" value="Cheese">Cheese
  <input type="checkbox" name="B2" value="Yoghurt" >Yoghurt
  <input type="checkbox" name="B3" value="Eggs">Eggs
  <input type="submit" name="submit" value="save" class="button-form"></center></br>

在data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3e%3c/svg%3e的{{1}}属性中。请注意保持<img>值的宽高比与您的实际图像尺寸相同。这样你的布局就不会跳转，造成不必要的重绘。

延迟加载图像的源占位符

4 个答案:

测试