在 HTML 中划分大背景图像是否有助于性能/加载/SEO？答案

【问题标题】：Does dividing a large background image in HTML help performance/loading/SEO?在 HTML 中划分大背景图像是否有助于性能/加载/SEO？
【发布时间】：2013-12-20 08:00:41
【问题描述】：

我想要用作背景的大 (1920x1080) 图像。图片按文件大小（>180Kb）来说并不大。

将这张图片剪切成 3 部分并单独加载它们更好还是一张更大的图片更好？渲染一张大图或三张小图是否存在性能问题？浏览器是否将其加载为 3 张较小的图片？它会影响搜索引擎机器人对其评分的方式吗？

【问题讨论】：

标签： css html performance seo

【解决方案1】：

如果你想通过 background-image 异步加载来加速页面加载，你可以使用以下技巧来使用 javascript 来做到这一点（我已经多次使用这个技巧）：

从您的 css 和 html 中删除图像，然后创建一个 javascript 函数来预加载您的图像并选择性地显示加载覆盖。然后你可以做这样的事情（jQuery）：

var backgroundImageUrl = "PathToYourBackgroundImage.png";

$(function() {
    PreLoadOverlayImage(backgroundImageUrl);        
});

// Preloads the image from the given url
// and displays a loading overlay while doing so
function PreLoadOverlayImage(url) {
    var html = "<img class='preloadingImg' src='" + url + "' style='display:none' />";

    $("body").append(html);

    // Self coded function, displays a modal loading screen over the full document
    // to disable interaction while it is loading, this is optional
    $("body").showLoading();
    $(".preloadingImg").load(function () {
        $(".preloadingImg").remove();

        // Remove the modal loading overlay
        $("body").hideLoading();

        // Display background image
        $("body").css("background-image", backgroundImageUrl);
    });
}

它使用浏览器的缓存功能。浏览器获取您正在加载的图像的 url 以确定它是否在过去已经加载。如果浏览器已经知道该 url，它将加载缓存的图像，而不是从服务器重新下载它。因此，当您在使用<img> 加载它后将其指定为身体的背景时，它将立即加载。

【讨论】：

【解决方案2】：

搜索引擎优化与页面加载无关，就性能而言，您可以调整图像大小，1400x900 将是background 的可靠尺寸，尝试压缩它，但只需确保你不会失去质量.. 而不是使用background-cover 属性，这样它就会覆盖整个页面。

body {
   background-image: url(#);
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   background-attachment: fixed; /* For static background on scroll if required*/
}

另外，您不需要将图像切成碎片，因为它首先不是邮件，其次它将增加 http 请求 3 倍..

【讨论】：

SEO 会受到加载时间的影响（尽管只是轻微的），正如 here 所讨论的 - 作者：Matt Cutts

【解决方案3】：

在性能方面，一张大图片比同一张图片的多个部分要好，因为每个小图片都需要建立新的连接。

在 SEO 方面，加载图片所需的时间很重要，如果您为图片提供相关的替代文本，这将有助于您的 SEO 排名。例如：

<img src="test.jpg" alt="Just a test image">

除了替代文本外，描述性文件名还可以帮助您明智地进行 SEO。例如：将一张玫瑰图片命名为 rose.jpg 绝对可以帮助您获得更好的 SEO 曝光率。

此外，将适当大小的图像放在服务器上绝对对您有利，而不是具有较小height 和width 属性的大图像。大图像会不必要地减慢您的页面速度，因为浏览器首先必须下载整个图像，然后将其调整到其容器中。在托管图片之前，请先使用图片编辑器工具将图片调整为合适的大小。

【讨论】：

【解决方案4】：

我认为由于有 3 个文件请求而不是 1 个文件请求，性能实际上会降低。您可以尝试压缩图像（甚至更多 - 如果您已经有）。

不过，话虽如此，但如果您收集页面上的所有图像，然后将它们呈现为一个。然后，您可以根据需要使用 CSS Sprites 分配图像。这里需要注意的是，它仅适用于背景图像，不适用于 <img> 标签中分配的图像

对 SEO 的影响可以忽略不计，将您的网站保持在 0-5 秒（最好是 0-3 秒）之间就可以了。我读到只有 1% 的 SERP 受到页面速度的影响。

【讨论】：

【解决方案5】：

SEO 与加载时间无关。这是关于图像的，所以它不会影响到你。

另外，我认为最好只有 1 张图片。

【讨论】：