如何為 WordPress 優化圖像

已發表: 2019-11-12

您的圖像應該是積極的,而不是對您網站的設置有害。 它們應該可以幫助您實現為網站設定的目標。

緩慢的網站是每個人的噩夢。 作為網站所有者,您應該知道原始格式的圖像對您網站的速度來說是個壞消息。 緩慢的網站速度會影響您的 SEO 排名,並使您的受眾付出代價。 除了速度之外,您的圖像還應該定位良好,以幫助您獲得併留住盡可能多的用戶。

在這篇文章中,我們將帶您了解如何為 WordPress 優化圖像的各種方法。 優化圖像無法通過單一操作實現。 它是多種措施的組合,可以使您的網站像您想要的那樣令人印象深刻。 讓我們帶您完成這些簡單的操作。

選擇正確的圖像格式

選擇正確的圖像格式

如果您的圖像是多色的並且具有高對比度,那麼 JPEG 是查看差異的最佳格式。 您可以以這種格式壓縮照片以減小文件大小,但這會在一定程度上影響質量。 另一方面,如果您的圖像在顏色方面不太複雜,那麼 PNG 是您的最佳選擇。 PNG 在支持圖像透明度方面優於 JPEG。 但是,壓縮 PNG 照片會產生更好的照片質量,但文件大小會更大。

在計算機上編輯圖像時,您需要選擇要保存圖像的文件類型。 最常見的圖像格式是 JPEG 和 PNG。

要點:對於多張彩色照片,選擇並壓縮 JPEG。 對於更普通的照片和透明的照片,請使用 PNG。

調整圖像大小

減小圖像的尺寸——無論它們的格式如何——都會減小它們的文件大小。 你製作的圖像越小,它的尺寸就越小。 但是,不要得意忘形並且做得過火:考慮您網站的寬度並確保圖片的寬度更小。 如果您將新照片製作得太小,它們的內容可能不太明顯。

可以上傳寬度超過您網站大小的圖像,您的網站將顯示在縮略圖中。 但這並不會消除您網站上的大圖像會減慢您的網站速度的事實。 您可以通過調整大小將文件大小減少一半以上。

如果您在上傳之前沒有調整圖像大小,您可以在 WordPress 媒體庫中選擇特定照片,選擇編輯並調整它們的大小。

縮放圖像

裁剪圖像

調整大小和裁剪的區別在於調整大小會保留原始圖像的所有元素。 另一方面,裁剪會切掉原始圖像的一些邊緣。

調整圖像大小意味著它們的某些元素將變得很小,並且在任何屏幕尺寸上都幾乎看不到。 裁剪可以幫助您,尤其是當您有圖像的焦點時。 您可以剪掉圖像中不必要的部分,使文件更小,同時使感興趣的元素更好地可見。

壓縮圖像

調整大小並裁剪圖像後,您可以通過壓縮圖像來加倍努力。 您可以在稱為有損壓縮的過程中壓縮 JPEG 圖像。 在此過程中,您會丟失原始圖像的一些數據以創建較小的圖像文件。

在這裡,您必須在圖像大小和質量之間進行選擇。 縮小尺寸是最終目標,但它是以質量為代價的。 因此,您應該在不影響圖像所需功能的情況下盡可能減小尺寸。 但是,圖像質量不會因壓縮而下降太多。 您只需要檢查質量分數並決定是否喜歡它。

使用在線提供的圖像壓縮工具可以進行壓縮過程。TinyPNG 是唯一擁有超過 10 億張 PNG 和 JPEG 優化圖像的圖像壓縮工具。 它提供了在將圖像上傳到您的網站之前優化圖像的完美方式。

TinyPNG 如何與 PNG 配合使用?

對於 PNG 文件,TinyPNG 使用智能有損壓縮來減小文件大小。 儘管這意味著選擇性地減少圖像顏色,但肉眼完全察覺不到,文件大小也大大減小。

常規的未壓縮 PNG 圖像包含 24 位顏色的組合。 使用 TinyPNG 壓縮後,您可以將它們轉換為越來越少的 8 位彩色圖像。 這個過程也稱為量化,也需要剝離任何不必要的元數據。 使用 TinyPNG,您可以將文件大小減少 70% 以上,並使您的圖像與透明度完全兼容。

它在現代瀏覽器中的表現如何?

TinyPNG 與眾不同的另一個方面是它支持所有現代瀏覽器。 儘管 Internet Explorer 6 拒絕承認 PNG 的透明度,但 TinyPNG 使瀏覽器的背景透明。 如果您的瀏覽器支持動畫 PNG(Chrome、Firefox 和 Safari),請隨意嘗試。

JPEG 壓縮

如果您想要 JPEG 壓縮,請不要再猶豫了。 TinyPNG 最初是為支持智能 JPEG 圖像壓縮而構建的,並且做得非常出色。

如果您對網站加載緩慢感到沮喪,請在將圖像上傳到您的網站之前使用 TinyPNG 並體驗壓倒性的差異。 通過壓縮所有 JPEG 和 PNG 圖像,它將節省您的帶寬並使您的網站加載速度更快。

從 CDN 提供圖像

遠離您網站的服務器的用戶可能會遇到較慢的加載速度。 為了解決這個問題,您可以安裝 CDN。 CDN 允許訪問者通過離他們最近的服務器進行連接。 獲得 CDN URL 後,將其複製到您使用的緩存插件中。 替換圖像 URL,使其包含 CDN 的 URL。 這樣,您的圖像也將通過相同的 CDN 標準提供給您的訪問者。

使用延遲加載

WordPress 的本質是在您請求頁面的那一刻同時加載頁面上的所有內容。 由於圖像的加載速度比文本慢,因此它們必然會減慢頁面的加載速度。

延遲加載確保查看器界面下方的圖像不會在頁面開始加載時立即加載。 相反,頂部的圖片將首先加載; 然後,其餘部分將在訪問者向下滾動到它們時加載。 這樣,儘管您的頁面中有圖像,但您的頁面將快速加載。 一些促進延遲加載的插件會顯示一個低質量的圖像版本,直到實際加載完成。

緩存您的圖像

如果您打算擁有一個快速的網站,那麼您必須嘗試緩存插件,如果您還沒有嘗試過的話。 在您的網站和頁面上緩存內容意味著創建它們的版本,以便在請求時立即可用。 一個出色的緩存插件讓您可以選擇通過“瀏覽器緩存”緩存您的圖像 - 一種易於訪問的替代方案。

適當地命名您的圖像文件

上傳圖片時,請確保為它們命名。 當您這樣做時,您可能會發現您的插件會自動向它們添加替代文本。 這種情況是理想的,因為命名圖像的最佳方式是通過簡單的描述。 添加太多關鍵字並不適合您。 關鍵字在 SEO 方面為您提供優勢。 但是,當您的圖像上有太多它們時,您將面臨遭受填充處罰的風險!

優化您的圖像以在 Google Snippets 中出現

在搜索結果中獲取豐富的片段並不容易。 您需要有一些關鍵字可以為用戶提供準確而簡潔的答案。 創建描述您定位的關鍵字的圖像。 事實內容的用戶質量參考,以激發點擊。 如果您發現您沒有出現在關鍵字的第一頁上,請進行編輯以改進您的內容。

此外,使用結構化數據(模式)插件來提高您擁有豐富網頁摘要的機會。

使用原始圖像

避免使用來自其他網站的圖片。 它們會減慢您的速度,因為它們需要額外的請求來滿足您借用照片的網站的服務器。

底線

這些是我們關於如何為 WordPress 優化圖像的說明。 正如我們所提到的,你不能選擇一個並運行它,期待好的結果。 圖像優化需要多種策略的統一努力。 確保你理解這些想法,應用它們,並準備好讓你的訪客和你自己都驚嘆不已。