背景图像需要一段时间才能加载到 wordpress divi 主题中答案

【问题标题】：Background image takes while to load in wordpress divi theme背景图像需要一段时间才能加载到 wordpress divi 主题中
【发布时间】：2018-10-28 05:01:33
【问题描述】：

我有一个website，其中需要加载标题背景图像。

我已在模块设置中应用了背景图片，如下图所示，并开启了视差效果。

应用在背景图片上的 CSS 代码是：

element.style {
    background-image: url();
    height: 627px;
    transform: translate(0px, 101.1px);
}

.et_parallax_bg {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

问题陈述

我想知道是否需要在 CSS 代码中添加任何内容以使背景图像加载更快，或者我需要调整图像大小。

【问题讨论】：

我只是使用 gimp 并亲自调整它的大小。
@Scath CSS 代码不需要更改？
我遇到了同样的问题，但找不到任何东西。您还可以降低 gimp 的质量。我想我把我所有的都降到了 75 或 80 你无法区分。
我使用 adobe photoshop。我想知道我怎么能在那里做到这一点。你要我把它调整到图片的 75 % 还是 80 % 吗？
没有免费的 gimp，它有一个降低图像质量的工具 youtube.com/watch?v=TpnIJLFLZGc

标签： css wordpress image

【解决方案1】：

问题在于您的图像；与 CSS 或主题无关。尝试使用一些在线图像优化器来优化您的图像。

Google：在线图像优化器或在线图像压缩器。这是一个建议：www.optimizilla.com；这将修复加载时间并保持图像质量。

您当前的背景信息：4793x1905px 宽x高，文件大小为 924KB，差不多 1MB。

不知道你们为什么要设计这么大的尺寸？

试试这个优化后的图片，让我们知道结果？

图片：1900x755px 和 139KB。

在过去，标准页面应该超过 150KB。

在 Photoshop 中尝试以下方法来减小图像大小和质量：

A) Photoshop 菜单 --> 图像 --> 图像大小...然后调整

B) 当您保存为 PNG 时，请尝试将质量调整为公平的：

这是how to in GIMP。

或者您可以尝试online image resize 来获取图片大小和质量。

注意：不仅图片会导致您的网站加载缓慢；您可能需要一些 WordPress 速度优化大师或研究互联网如何做到这一点。

您的网站存在很多速度问题。

检查并比较：

这是加载当前背景的速度。

这是优化图像的速度（尽管尺寸和质量仍然很大）

这是整个网站的首页加载时间；尺寸太大，加载时间慢。

【讨论】：