在 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 站點的尺寸。

我希望這可以作為您未來項目的有用資源。 我期待在評論中閱讀您的反饋。

乾杯!