在 Divi 中使用图像的终极指南

Divi 使向您的网站添加图像变得容易。 然而，一些人面临的挑战是知道在每个实例中使用的正确图像大小。 所有网站都没有标准的“完美”尺寸，因为每个网站都不同。 但是，作为网页设计师，您可以做一些事情来确保您的图像非常适合您的Divi 网站。 这就是这篇文章的来源！

在本文中，我将消除在 Divi 中使用图像的猜测​​工作，并教您每次如何为您的 Divi 网站查找（或创建）完美的图像尺寸。

大图

为您的 Divi 网站寻找完美的图像尺寸取决于三个主要因素：

1. 纵横比：图像的高度和宽度。
2. 列布局：图像的最大宽度。
3. 响应性：在不同屏幕尺寸上对图像尺寸所做的更改。

在下面的部分中，我将详细展示如何在整个 Divi 中使用对这三个因素的理解，从而为任何用例生成完美的图像大小。

Divi 图像优化指南

使用 Divi 的图像纵横比（16:9、4:3、3:4）

纵横比表示图像或屏幕的宽度和高度的比例尺寸。 冒号左边的数字代表宽度（x轴），冒号右边的数字代表高度（y轴）。 两种最流行的纵横比是 4:3 和 16:9。 如果您之前调整过电视屏幕或显示器设置，这些应该看起来很熟悉。 4:3 纵横比是旧电视和显示器的标准屏幕尺寸，具有更像盒子的显示效果。 今天较新的高清电视和显示器具有 16:9 的纵横比，显示更宽。 3:4 的纵横比在 Divi 中用于显示肖像。

Divi 在构建时考虑了三种纵横比 - 16:9、4:3 和 3:4。 对于这篇文章，我将根据这些纵横比来推荐所有推荐的图像尺寸。 如果您还没有这样做，您可以查看 Divi 的图像模板以查看为您的图像推荐的标准尺寸和纵横比。

注意：有一些有用的纵横比计算器也可以帮助您找到正确的图像尺寸。

上传前优化图像

在将图像上传到 WordPress 之前，最好先优化（调整大小、压缩、裁剪等）您的图像。 还要尽量将所有图像文件大小保持在 60kb 到 200kb 之间。 这样您就不会过多地减慢页面加载时间。 有关如何优化图像的完整指南，请访问此处。

不要忘记搜索引擎优化

在阅读图像时，搜索引擎依赖于图像的文件名、'alt' 文本、标题、文件类型、文件大小等......这些信息位于显示图像的 img 标签中。 确保在将新图像上传到媒体库时将此信息添加到图像中。

此外，Divi Builder 允许您从某些模块中添加“alt”文本和标题文本。 使用某些 Divi 模块时请注意这些。

根据我的研究，Google 不会自动读取背景图片，因为它们没有包含在 img 标签中。 背景图像使用 CSS 显示，主要用于设计目的。

文件格式

通常，网络上的大多数图像都是 JPEG、PNG 或 GIF 格式。 JPEG 适合大多数情况，因为它具有兼容性、颜色的使用和较小的文件大小。

JPEG 应该用于您所有的全彩色照片，如特色图像和背景图像。

PNG 也是一种非常兼容的网络格式。 PNG 非常适合具有大量细节的较小图像。 PNG 格式还支持透明背景功能，非常适合徽标和图形元素。

GIF 适合色彩有限的小图像。 GIF 是独一无二的，因为它们可以制作动画，这有时很有用。

基于 Divi 列布局的图像尺寸指南

以下图像尺寸指南基于 Divi 的默认布局设置。 这包括 1080 像素的内容宽度和 3 的装订线宽度。更改这些设置可能需要您稍微调整图像的尺寸。

一般的经验法则是让您的图像至少与它所在的列一样宽。 以下是根据每个列布局需要的图像尺寸。

这并没有解决您的图像需要的高度。 因此，这里是根据 4:3 和 16:9 纵横比的尺寸列表。 这有助于将图像保持在适合移动设备的宽度和高度。

以下图片尺寸遵循 16:9 宽高比标准

1 列：1080 x 608
3/4 列：795 x 447
⅔ 列：700 x 394
1/2 列：510 x 287
⅓ 列：320 x 181
1/4 列：225 x 128

以下图片尺寸遵循 4:3 宽高比标准

1 列：1080 x 810
3/4 列：795 x 597
⅔ 列：700 x 526
1/2 列：510 x 384
⅓ 列：320 x 241
1/4 列：225 x 170

不同 Divi 模块的图像尺寸

图像模块

使用图像模块时，您可以简单地按照 16:9 和 4:3 布局来选择每个列布局所需的图像大小。

例如，如果您使用的是纵横比为 4:3 的 4 列布局，您将为每列插入一个 225 像素 x 170 像素的图像。

为每一列使用特定大小的好处是它可以为您提供所需的确切图像大小，而不会浪费图像文件大小，这可能会减慢页面加载时间。

缺点是它不会在平板电脑等较小的屏幕上填充列宽。 当屏幕尺寸低于 1080px 断点时，4 列布局更改为 2 列布局。 这个 2 列布局可以容纳宽度为 370 像素的图像大小。 因此，如果您希望图像填充平板电脑显示器上的列宽，您可能需要从宽度为 370 像素而不是 225 像素宽度的图像大小开始。

以下是 225px x 170px 图像的 4 列布局在 2 列平板电脑显示器上的样子：

这看起来不错，但是如果您从 370 像素宽的图像开始，您将得到一个填充 2 列平板电脑显示器上列宽的图像，如下所示：

因此，如果您希望图像填充所有设备上列的最大宽度，我建议在使用图像模块时为每个列布局使用以下尺寸。

对于 4:3 纵横比：

1 列：1080 x 810
⅔ 列：770 x 578
3/4 列：770 x 578
1/2 列：770 x 578
⅓ 列：770 x 578
1/4 列：370 x 278

对于 16:9 纵横比：

1 列：1080 x 608
⅔ 列：770 x 433
3/4 列：770 x 433
1/2 列：770 x 433
⅓ 列：770 x 433
1/4 列：370 x 208

滑块和后滑块背景图像

滑块背景图像应该至少是它所在列的宽度。因此决定图像大小非常简单。 只需使用每个列宽的图像大小指南。

滑块背景图片的高度将由滑块的内容决定，因此您可能需要调整背景图片的高度。

以下图像尺寸遵循 16:9 宽高比标准：

1 列：1080 x 608
3/4 列：795 x 447
⅔ 列：700 x 394
1/2 列：510 x 287
⅓ 列：320 x 181
1/4 列：225 x 128

以下图像尺寸遵循 4:3 纵横比标准：

1 列：1080 x 810
3/4 列：795 x 597
⅔ 列：700 x 526
1/2 列：510 x 384
⅓ 列：320 x 241
1/4 列：225 x 170

如果您希望滑块跨越移动设备上的列宽，请使用以下指南：

对于 4:3 纵横比：

1 列：1080 x 810
⅔ 列：770 x 578
3/4 列：770 x 578
1/2 列：770 x 578
⅓ 列：770 x 578
1/4 列：370 x 278

对于 16:9 纵横比：

1 列：1080 x 608
⅔ 列：770 x 433
3/4 列：770 x 433
1/2 列：770 x 433
⅓ 列：770 x 433
1/4 列：370 x 208

全宽滑块背景图像

建议最小宽度：1920px

全角滑块背景图像的宽度始终由浏览器宽度决定。 根据标准屏幕尺寸，我们建议您的图片宽度至少为 1280 像素。 但对于更大的显示器，更安全的选择是使用 1920 像素宽的图像。

同样，对于滑块，高度始终由内容量决定，因此您可能需要调整高度以满足您的需要。

滑块和后滑块特色图片

幻灯片特色图像只会出现在 ⅔ 列、3/4 列或 1 列宽度的滑块中。 我们建议您的幻灯片图像至少是这样宽，以便针对桌面和移动设备进行调整。

1 列：450
3/4列：330
⅔ 列：320

注意：小于 768 像素的浏览器宽度将隐藏图像并仅显示帖子摘录。

灯箱显示中的图像

如果您对图像使用灯箱功能，您可能需要使用更大的图像。 通常，1500 x 844 非常适合在大型显示器的灯箱显示中获得良好的全屏图像。

音频模块封面图片

宽度：至少 780px

即使图像开始时很小 (230 x 130)，它也会在小于 780 像素的屏幕上覆盖内容部分的整个宽度。

博客模块特色图片全宽布局

图片宽度：等于其列宽的大小

将特色图片添加到您的帖子中以使用博客模块显示非常简单。 特色图片应该与其所在的列一样宽。例如，如果您在带有右侧边栏的三分之二列中使用博客模块，则您需要使用至少 700 像素宽度的特色图片，因为这是Divi 中三分之二列的宽度。

不要忘记，特色图片也将用于您的单个帖子模板（单击帖子摘录后显示完整帖子的页面）。 因此，请确保您的单页模板也使用三分之二的列来显示您的特色图片。

1 列：1080
3/4 列：795
⅔ 列：700
1/2列：510
⅓列：320
1/4 列：225

具有网格布局的博客模块特色图像

宽度：等于单帖列宽的大小（默认795px）

而且，就像博客模块全宽布局一样，特色图片需要很大才能显示单个帖子。 博客网格布局的优点在于，Divi 使用上传到媒体库的精选图片的较小版本（宽度为 400 像素）。 由于这个较小的图像是自动创建和显示的，因此无需担心页面加载的图像文件对于网格列来说太大。

投资组合模块特色图像（全角和网格布局；标准和可过滤）

宽度：等于您的单个帖子列宽（默认值：795px）

当您单击以从网格布局查看您的投资组合项目时，特色图像将跨越内容部分的宽度。 就像博客模块一样，

就像博客模块一样，Divi 创建了用于投资组合模块网格布局的投资组合特色图像的较小版本（400 像素宽）。 这有助于减少文件大小并缩短页面加载时间。 因此，在创建新的投资组合项目时，重要的是您的特色图像至少与单个投资组合帖子模板的列一样宽。

模糊模块图像

最大宽度：550px

模糊图像遵循相同的图像宽度与列宽匹配规则，除了 1 列，其最大宽度为 550 像素而不是正常的 1080 像素。 因此，一个安全的选择是插入最大宽度为 550 像素的图像。 以下是每个列布局中 Blurb 模块的图像宽度。

1 列：550px
1/2 列：510px
⅓ 列：320px
1/4 列：225px

图库模块图像（滑块和网格布局）

推荐尺寸：1500 x 844

由于图库模块图像在灯箱显示中打开，我建议在灯箱中查看图像时使用足够大的图像来填充浏览器窗口（对于大型显示​​器，大约 1500 像素宽）。

对于网格布局，Divi 创建了一个较小版本（400 像素宽）的画廊。 因此，为灯箱保留的大图像文件大小不会显示在画廊网格上。 这有助于减少文件大小并缩短页面加载时间。

对于滑块显示，重要的是要尽量保持所有图像的宽度和高度相同，因为在您浏览幻灯片时图像的高度会发生变化。

人物模块图片

推荐尺寸

宽度：600px

对于人物模块，是时候介绍 3:4 的纵横比，这是非常适合人像的尺寸。 以下是每个纵横比的推荐人物模块图像尺寸：

3:4 – 600 x 800（推荐用于人像）
16:9 – 600 x 338
4:3 – 600 x 400

响应式功能

1 列布局上的人物模块图像将显示在内容的左侧 320 像素。

当屏幕尺寸小于 767 像素时，图像跨越内容区域的宽度，最大宽度为 600 像素。

下面的 gif 显示了在不同屏幕尺寸上使用 600 x 800 图像（使用 3:4 纵横比）的人物模块。

帖子标题模块特色图片

宽度：等于列宽

帖子标题模块显示您当前帖子的标题，以及可选的帖子特色图片。 您可以选择将精选图片放置在标题上方、标题下方或标题背景。 无论您选择什么，图像仍将跨越内容部分的宽度。 因此，如果您的帖子标题模块使用 1 列布局，则 1080 像素宽度是您的特色图片的理想选择。

商店模块产品图片

建议

推荐宽度：330px
推荐列数：3 或更多

商店模块允许您以一栏布局一直到六栏布局展示您的产品。 以下是在每个列布局上显示的产品图像的宽度：

6 列：150px
5 列：183px
4 列：240px
3 列：332px
2 列：520px
1 列：1080px

功能

Divi 生成较小版本的产品图像（最大宽度为 400 像素），因为 Shop Module 确实是为在 ⅓ 列或更小的列上显示产品而构建的。 这意味着您的两列和一列布局可能会显示您的产品图像的模糊版本。

此外，一旦您单击商店模块中的产品，单个产品页面就会以 300 像素显示您的产品图片。

为了适应 3 列布局和单个产品页面，我建议坚持使用至少 330 像素宽的产品图像大小。

推荐人像图片

基于模块设置的图像大小

默认情况下，Divi 将您的肖像图像转换为 90 x 90 尺寸和 90 边框宽度，将其显示为圆形。 因此，如果您保持默认设置，我建议您的图像尺寸恰好为 90 x 90。您可以使用没有 1:1 纵横比的非常大的图像，但这会浪费很多文件大小，而且会减慢速度降低页面加载时间。

您可以在推荐模块的高级设置中自定义肖像图像的尺寸和边框半径。

更改这些设置时，如果您想让带圆圈的图像看起来不错，请确保保持宽度和高度相同，并且边框半径为 100。

背景图像的一般准则

为您的模块使用背景图像时，背景图像始终需要至少与它所在的列一样宽。 只需遵循 Divi 列宽的准则：

1 列：1080
3/4 列：795
⅔ 列：700
1/2列：510
⅓列：320
1/4 列：225

以下是一些需要背景图像以匹配其列宽的模块：

投资组合模块
可过滤的投资组合模块
号召性用语模块
后滑块模块
帖子标题模块
滑块模块
文本模块

全角背景图像的一般准则

如果使用全宽部分背景图像，这些图像将扩展到浏览器的全宽。 这意味着您应该使这些图像的宽度至少与大多数大约 1920 像素的大型显示器一样宽。

以下模块需要 1920 像素宽度的背景图像：

全角标题
全宽投资组合
全宽滑块
全角帖子标题
全角帖子滑块
全角图像

此外，请务必注意，对于所有这些模块，背景图像的高度由模块内的内容量决定，因此您可能需要根据需要调整图像的高度。

全宽头模块

全屏背景图片

不要与全宽背景图像混淆，全屏背景图像是指全宽标题模块上的设置，它允许您的标题跨越浏览器窗口的全尺寸（宽度和高度）。

由于大多数显示器遵循 4:3 和 16:9 的纵横比，并且只有 1280px 或 1920px 宽，我建议全屏背景图像使用以下尺寸：

4:3 – 1280 x 960（推荐用于人像）
16:9 – 1920 x 1080

全角标题模块徽标图像

全角标题模块允许您在标题内容区域内放置徽标。

徽标没有标准的图像尺寸。 作为一般准则，我建议保持徽标足够大，以便在大型台式机上清晰可见，但又足够小以适合智能手机等较小的设备。

Divi 的主题标志是 93 x 43，这给了你一个好主意。

全角标题图像

推荐尺寸：510 x 288

除了徽标之外，全角标题模块还允许在标题内容区域中显示标题图像。 默认情况下，标题图像将显示在 2 列布局的右列。 由于图像位于 1/2 列中，因此 510 x 288 图像最适合大多数情况。

更改模块常规设置中的文本和徽标方向选项将允许标题图像显示在左列或居中（如果您喜欢该设置）。

如果您希望图像紧贴标题的底部，您还可以将垂直对齐调整到底部。

最后的想法

正如我之前提到的，对于所有网站和屏幕尺寸，没有一种完美的标准图像尺寸。 但是，了解 Divi 列布局以及每个模块如何显示某些图像将允许您创建适合您的 Divi 站点的尺寸。

我希望这可以作为您未来项目的有用资源。 我期待在评论中阅读您的反馈。

干杯!