如何確保手機網站速度的最佳圖像尺寸

您正在手機上，準備購買您一直在關注的產品，並且網站只是…。突然，您不耐煩地敲擊，想知道您的互聯網是否被損壞或詛咒網站。老實說，您可能只是反彈。你並不孤單。

您是否知道如果加載需要超過3秒鐘，則有53％的移動用戶會放棄頁面？現在考慮有關您網站的信息。這是大量的潛在客戶消失，永無止境。加載時間緩慢不僅使遊客感到沮喪；他們傷害了您的底線。它們會影響您的搜索引擎排名（SERP），並使人們首先很難找到您。在這篇文章中，我們將向您展示如何控制這些較重的圖像頁面，並確保手機網站速度的最佳圖像尺寸。我們還將向您介紹一些好的工具，例如Divi，可以幫助您響應地展示圖像。

為什麼移動速度很重要？

緩慢的網站的影響不僅僅是令人討厭。它可以影響用戶體驗（UX），搜索引擎優化（SEO）和您的底線。

想像一下，您正在瀏覽新的夏季禮服或最熱門的新耳塞。您可以在網站上點擊，感覺就像您正在看油漆乾燥。挫敗感陷入了困境，您可能會保釋，找到另一個帶有更快網站的零售商。這稱為反彈，這對在線業務來說是個壞消息。根據Databox的數據，平均跳出率約為44％。更高的事情可能會導致收入損失和缺乏參與，從而殺死在線業務。

讓我們不要忘記移動SEO。 Google就是要提供最佳的用戶體驗，包括確定快速加載的移動網站。他們使用移動優先索引，這意味著他們在確定搜索排名時主要查看網站的移動版本。

但是，不良移動速度的影響超出了沮喪的用戶和較低的排名。它可以並且將達到您的底線。想像一個使用WordPress構建的緩慢加載的電子商務網站。這些額外的秒數（超過1-2個超過1-2個）可能會使您銷售。保持網站在移動設備上的快速運行至關重要，因此確保您不會失去客戶，因為您的網站花費太長時間至關重要。

有很多方法可以加快您的網站，但是低懸垂的水果是確定手機網站速度的最佳圖像尺寸。

WordPress的圖像優化基礎知識

圖像對於使您的網站看起來不錯並保持用戶參與度至關重要。太大的圖像確實可以減慢您的網站。正如我們了解到的，研究表明，大多數人不會永遠等待。那麼，如何在不犧牲速度的情況下保持圖像看起來不錯？讓我們探索一些基礎知識，以使您的網站快速，平穩地運行。

1。選擇正確的圖像格式

您可以在WordPress網站上使用多種圖像類型，包括JPG，PNG和WebP。哪一個最適合使用？讓我們深入研究每種圖像類型，最好使用哪些情況。

• JPG：這些就像您的日常照片。它們非常適合具有寬色變化和平穩過渡的圖像，例如風景或肖像。它們適合大多數情況，例如英雄背景，團隊照片，博客文章的特色圖像等。也就是說，JPG的尺寸可能不適當，使它們的文件大小更大。
• PNG： PNG非常適合具有鋒利邊緣的圖像，例如徽標或帶有文本的圖形。它們也非常適合具有純色大圖像的圖像，因為它們保持顏色清晰且乾淨。但是，PNG傾向於具有較大的文件大小，因此請使用PNG文件來減少設計的較小區域以減小其尺寸。
• WebP： Google的創意，WebP通常提供最佳的壓縮，即使使用大圖像，也會導致文件大小要小得多（示例：1920px x 1080px）。圖像質量不如JPG，但兩者之間的大小差異很大。

2。調整圖像大小

圖像大小很重要。為了保持尺寸，上傳圖像僅在您網站上所需的大小。無需上傳巨型圖像，然後縮小它。它為您創造額外的工作，並將減慢您的網站。

重要的是要記住，一種尺寸並不適合圖像。智能手機上的訪客是否需要為較大的桌面屏幕設計的巨大圖像？他們沒有。在可能的情況下，使用響應式圖像為每個屏幕尺寸提供完美尺寸的圖像。我們將在稍後再進行更多，但是確保您的圖像對WordPress響應的最佳方法之一是使用WordPress主題（例如Divi），該主題允許您在每個瀏覽器斷點上上傳圖像，從而使文件大小降低。

3。擠出不必要的

當涉及圖像大小時，較小的更好。在WordPress中使用圖像時，我們希望在不犧牲質量的情況下使圖像盡可能小。您可以使用諸如圖像優化插件之類的壓縮工具為您進行繁重的舉重。 EWWW圖像優化器之類的工具很好，但是我們將在本文的後面更深入地研究工具。

許多WordPress插件和在線圖像調整工具都使用有損或無損壓縮來減少圖像的大小。無損壓縮就像小心地折疊一張紙一樣 - 您可以完美地展開它，並在需要時取回原始的。它非常適合具有鋒利邊緣的圖像，但可能並不總是會導致最大的文件尺寸減小。

另一方面，無損壓縮更具侵略性。這就像皺著眉頭一樣。您可能會失去一些細節，但是您的文件大小要小得多。

4。裝載圖像準備被看到時

您可以採取的另一個步驟是在WordPress上懶負載圖像。想像一下向下滾動長頁。您真的需要一次加載所有照片嗎？可能不是。懶惰加載只會加載您需要查看頁面的圖像，將頁面下方放置在頁面上，等待加載一旦您到達它們。像WP Rocket一樣，插件可以輕鬆地將懶惰加載添加到WordPress網站上。它將加快初始頁面加載時間，這對於保持訪問者的滿意和頁面大小降低至關重要。

圖像維度最佳實踐

在圖像尺寸方面，有一些關鍵實踐需要牢記以確保您的網站迅速加載，並且在所有設備上看起來都很好：

使用響應式圖像尺寸

不同的設備具有不同的屏幕尺寸和分辨率，因此一種尺寸適合的方法無法使用。例如，台式機可能需要大小為1920px寬的圖像，而移動設備僅需600px寬。您可以使用響應式圖像為每個設備提供適當的尺寸。諸如HTML中的秘密屬性或響應式WordPress主題之類的工具可以使DIV中包含的圖片根據用戶的設備提供適當的圖像大小。

縱橫比很重要

在圖像上保持一致的方面叛徒可以幫助避免失真或怪異的裁剪。例如，如果您的桌面圖像具有16：9的縱橫比，則移動版本應保持相同的比率，即使它是較小的圖像。這樣可以確保您的圖像在所有屏幕尺寸上看起來都是相稱和專業的。

避免過度尺寸

上載比必要的圖像更大是一個常見的錯誤，可以減慢您的網站。例如，如果您的網站的內容區域只有1080px寬，則不需要上傳2000px寬的圖像。超大圖像消耗帶寬和存儲，導致頁面加載時間較慢。始終調整圖像大小以匹配您網站上顯示的最大尺寸。

跨設備測試

即使有正確的維度，圖像在各種設備和瀏覽器上的行為也會有所不同。始終在多個設備（台式機，平板電腦和智能手機）上測試您的圖像，以確保它們看起來敏捷而迅速。諸如Google的移動友好測試或瀏覽器的開發人員工具之類的工具可以幫助您找到並修復所有屏幕尺寸的圖像問題。

考慮圖像壓縮

即使有正確的尺寸，圖像仍然太大。壓縮工具可以減少文件尺寸而不犧牲質量。例如，高質量的JPG或WebP圖像可以被壓縮以更快地加載，同時看起來不錯。將適當的尺寸與壓縮結合在一起，可確保您的圖像看起來不錯，並保持頁面尺寸最小。

在WordPress中尺寸尺寸的最佳工具是什麼？

有幾種方法可以輕鬆調整WordPress的圖像：帶有插件，諸如Divi（例如Divi）或Divi AI的內置功能。讓我們更多地探索它們，以便您更好地了解它們的作用。

1。WordPress插件

使用圖像優化插件是調整圖像大小的最佳方法之一。它們通常允許您在上傳到WordPress Media Gallery時執行諸如圖像的批量優化或調整圖像大小的操作。許多人還提供高級功能，例如WebP轉換，懶惰加載和各種級別的圖像壓縮。

• EWWW Image Optimizer：一個可靠的選項，具有諸如批量優化，背景優化和轉換為WebP格式之類的功能。 EWWW Image Optimizer提供了一個免費計劃，使用有限的使用量和付費計劃起價為每月8美元。
• 縮短像素：以其出色的壓縮算法和能夠顯著減少圖像文件大小的同時保持質量的能力而聞名。 Shortpixel提供了一個免費的計劃，使用有限的使用情況，每月每月$ 9.99。
• Optimole：強調速度和性能。使用基於雲的系統進行圖像優化和交付。 Optimole提供了免費的計劃，使用有限的使用量和付費計劃每月22.99美元。
• WP Smush ：一種受歡迎且評價高度的選項。 Smush提供免費的付費計劃（每月3美元起），其功能具有自動優化，有損/無損壓縮，懶惰加載和WebP轉換。
• 富有想像力：一個由AI驅動的插件，側重於高質量的壓縮，最小的損失。 Fimify提供了一個免費的計劃，使用有限的使用和付費計劃，起價為每月11.99美元。

2。divi（WordPress主題和頁面構建器）

Divi不僅僅是WordPress主題，它是建立響應式網站的完整框架。它提供了一個強大的前端視覺構建器，並具有響應式控件，使您可以使用最佳的圖像尺寸來用於手機網站速度。

Divi通過其響應式編輯系統和設計設置來處理移動圖像大小。當您在Divi中添加圖像時，您可以為桌面，平板電腦和移動視圖設置不同的圖像。這是Divi響應式設計功能的一部分，使您可以優化每種設備類型的圖像。您可以調整設置，例如尺寸，位置，水平偏移等，特別是用於移動設備的設置，確保您的圖像在所有屏幕尺寸中看起來都很完美。

更改較小屏幕的圖像

在任何包含圖像的設計模塊中，Divi的響應控制措施允許您顯示一個背景圖像，而台式機則顯示了另一個用於平板電腦和移動設備的背景圖像。例如，在Divi網站上編輯英雄部分時，您可以添加測量1920px x 1080px的背景圖像，這是大屏幕的理想尺寸。根據所使用的圖像，在移動設備上查看相同的圖像看起來不太好。因此，Divi包括設置，允許您為較小的屏幕添加較小的背景圖像（或完全不同的圖像）。

背景定位

Divi還使您可以控制背景圖像在不同屏幕尺寸上的位置。每個模塊，列，行和部分都有這些控件，無論設備訪問者使用哪種設備，都可以輕鬆確保圖像看起來不錯。

例如，您可以設置一個以台式機上為中心的背景圖像，但將其重新定位到移動設備上的頂部或底部。這樣可以確保圖像中最重要的部分總是可見的，無論屏幕尺寸如何。這是使用一張圖像並將頁面尺寸保持在最低限度的好方法。

Divi內置了懶惰的加載

當您使用Divi添加圖像或背景時，主題會通過自動施加懶惰加載來照顧繁重的舉重。直到用戶滾動到該部分，圖像才會加載，以保持頁面快速響應。 Divi利用了現代瀏覽器支持的HTML屬性，以確保圖像被最小的處理開銷延遲。結果是更快的頁面速度和更平滑的用戶體驗。通過減少預先加載的圖像數量，Divi有助於改善關鍵指標，例如最大的內容塗料（LCP），並提高您的核心網絡生命力性能。

要了解有關在Divi中使用圖像的更多信息，請查看我們在Divi中使用圖像的最終指南。

得到Divi

3。Diviai

您可以使用Divi來確保手機網站速度的最佳圖像尺寸是使用Divi AI生成完美尺寸的圖像。 Divi AI就像您網站的個人設計助理。文本提示可以生成文本，代碼，網頁，完整網站和像素完美照片。

例如，您需要一張雄偉的雪山脈山脈的圖像，以進行單板滑雪業務。您已經搜尋了免版稅的庫存圖像網站，但找不到想要的東西。 Divi AI可以使用指定的大小為您生成該圖像。

多虧了Divi的響應控制，您也可以使用Divi AI來生成較小屏幕的圖像。

Divi AI不僅創建漂亮的圖像。它創建智能圖像。您可以告訴Divi AI確切需要什麼尺寸，並且可以提供。

獲取Divi AI

Divi使移動網站的調整圖像變得輕而易舉

找到適合手機網站速度的最佳圖像尺寸並不一定是一個挑戰。如果您選擇構建Divi的網站，那麼您將有足夠的能力來處理緩慢載荷的圖像。 Divi的內置圖像優化功能，包括響應式調整和懶惰加載，在幕後工作，以確保圖像在任何屏幕尺寸中都完美顯示。但是，Divi的好處並不止於此。使用Divi AI，您可以在所需的確切尺寸中生成高質量的圖像，從而消除笨重的，緩慢的網頁。

要獲得更多控制權，請利用諸如EWWW Image Optimizer之類的插件的功能來進一步壓縮圖像並微調網站的速度。將Divi的優勢與強大的工具相結合，您可以創建一個看起來令人驚嘆和快速負擔的網站，使您的訪客快樂和業務蓬勃發展。

您想了解更多有關加速您的網站的更多信息嗎？從我們的博客中查看這些帖子：

• 如何提高WordPress的Google PagesPeed Insights得分
• 12個最佳WordPress速度優化插件（排名）
• Divi速度優化：最終指南
• 5個最快的WordPress託管公司（測試）