如何在 GIMP 中為 WordPress 調整圖像大小（以及為什麼它很重要）

您是否希望將圖像上傳到您的 WordPress 網站，但不確定圖像應該是什麼大小或文件類型？您是否不熟悉為 Web 調整大小和壓縮圖像的過程？在本文中，我將解釋為什麼使用適當的圖像大小對您的網站很重要，並向您展示如何使用免費的照片編輯器 GIMP 調整圖像大小和壓縮圖像。

為什麼調整網站圖片的大小很重要

讓我們從為什麼調整網站圖像大小如此重要開始。

根據 WordPress.org，圖像的整體“物理尺寸”在網站頁面的性能中起著巨大的作用。 “[圖像的]文件大小決定了加載頁面所需的時間；文件越大……加載 [一頁] 所需的時間就越長。” 換句話說，將大文件上傳到您的網站會減慢您添加內容的任何頁面的性能，通常在您網站的分析數據中顯示為較慢的頁面加載速度。

“[圖像的]文件大小決定了加載頁面所需的時間；文件越大……加載 [一頁] 所需的時間就越長。”
-WordPress.org

頁面加載速度，也簡稱為“速度,”是“頁面上的內容加載速度”，根據搜索引擎優化網站 Moz. 頁面速度較慢可能會導致更高的“跳出率,”這是一個奇特的指標，表示站點訪問者在查看單個頁面後離開您的站點的會話。較慢的頁面還可以減少訪問者在您網站頁面上花費的時間，因為人們可能會不耐煩地等待頁面內容加載並更快地離開您的網站。

這些指標很重要，因為您通常希望用戶在您的網站上花費更多時間並查看您網站上的更多頁面。

它們也很重要，因為它們在您的網站在搜索引擎結果頁面或“SERP”中的排名方面發揮著作用。 養老金計劃 只是當您在 Google 中輸入單詞或短語並按 Enter 鍵時顯示的結果頁面。由於較大的圖像表明不良的網頁設計實踐並對用戶在您網站上的體驗產生負面影響，因此 Google 等搜索引擎可能懲罰您的網站擁有這些較大的圖像和 將您的網站排在其他表現更好的網站之後.

例如，您的網站在 Google 上的排名越低，您的網站獲得的流量就越少，而更多流量將流向在搜索結果中排名高於您的競爭對手。

通過減少您網站上圖像的文件大小，您可以改善您的速度從而改善其他指標，例如 跳出率 及時間e 最終提高您在搜索引擎上的排名。

請注意，還有許多其他重要的變量會影響搜索排名，因此修復圖像只是實體的一部分 （搜索引擎優化） （搜索引擎優化）策略。但是，這對於幫助您的網站在 Google 等網站上排名更高以幫助增加您網站的流量當然非常重要。

如何在 GIMP 中為 WordPress 調整圖像大小

那麼如何正確調整 WordPress 的圖像大小？

您可以通過使用減小圖像的整體大小來減小圖像的文件大小鱗屑及種植在您將其上傳到您的網站之前。另外，您可以應用所謂的“壓縮” 到您的圖像以進一步減小其大小。

GIMP，免費和開源的照片編輯器，可以完成所有這些任務，同時還可以導出為推薦的“下一代”文件格式，以進一步減小圖像文件大小並提高網站性能。

縮放圖像

要開始此過程，請在 GIMP 中打開要上傳到站點的圖像。您可以通過將圖像從計算機拖放到 GIMP 的圖像窗口中來完成此操作，或者您可以在 GIMP 中簡單地轉到文件>打開。

如果使用文件>打開方法，從出現的“打開圖像”對話框中導航到計算機上圖像的位置，找到圖像文件後雙擊它以將其打開到 GIMP 中（或單擊對話窗口右下角的“打開”按鈕）。

GIMP 窗口的最頂部是一個名為“標題欄”的功能（上圖中的紅色箭頭）。在這裡，您將看到圖像的當前尺寸（照片中放大的綠色框）。我的圖像是 1920×1280——第一個數字 1920 代表圖像的寬度（以像素為單位），第二個數字 1280 代表圖像的高度。您要用於圖像的最終圖像尺寸將取決於您打算在 WordPress 中使用圖像的位置以及您使用的主題。

在本教程中，我會將圖像調整為推薦用於博客文章圖像的標準 1200×630 像素大小。

考慮到這一點，我要做的第一件事是裁剪圖像，使原始圖像的縱橫比與推薦尺寸的縱橫比相匹配。為此，我將通過按鍵盤上的 shift+c 或單擊 GIMP 工具箱中的裁剪工具圖標（上圖中的紅色箭頭）來獲取我的裁剪工具。

接下來，在此工具的工具選項中，我將選中“固定”（綠色箭頭）旁邊的框，然後單擊下拉菜單以選擇“縱橫比”（藍色箭頭）。

我將在下拉菜單（黃色箭頭）下方的文本字段中輸入“1200:630”來設置我的縱橫比。這與我希望最終圖像的推薦圖像大小的縱橫比相匹配。

使用裁剪工具，我現在將在圖像上單擊並拖動鼠標以繪製裁剪區域。當我鬆開鼠標時，裁剪區域之外的所有內容都將變暗（上圖中的紅色箭頭 - 假設在工具選項中選中“突出顯示”，通常默認情況下）。

默認情況下，我的裁剪區域的參考線設置為“中心線”（上圖中的黃色箭頭）。我可以使用工具選項底部的指南下拉菜單更改此設置。例如，我會將指南更改為“三分法則”（綠色箭頭）。此處的各種指南選項均基於攝影原理，這使您可以輕鬆地使用這些原理構圖。

您可以將鼠標懸停在裁剪區域的任意邊或角上（即上圖中紅色箭頭所指的突出區域），然後單擊並拖動以調整裁剪區域的邊界。請注意，您始終可以在“工具選項”中的“大小”字段中查看裁剪區域的大小（上圖中以綠色勾勒）。您需要保持裁剪區域的整體尺寸大於圖像的 1200×630 最終尺寸。

您還可以在裁剪區域（紅色箭頭）的中間單擊並拖動鼠標以重新定位圖像上的裁剪。

準備好裁剪圖像後，在裁剪區域內單擊一次，您的圖像將被裁剪。

請注意，如果未選中“工具選項”中的“刪除裁剪像素”選項（上圖中的綠色箭頭），您的原始圖像邊界仍將通過黃色虛線（紅色箭頭）顯示在圖像周圍。您可以通過轉到圖像>使畫布適合圖層來恢復原始圖像，從而撤消裁剪。 只會導出畫布邊界內的圖像區域。

我們的圖像現在被裁剪成我們想要的縱橫比，但是如果你再次查看我們在“標題欄”中的圖像尺寸，你會看到圖像是 1532×804（在上面的照片中以綠色勾勒並放大 -根據您在圖像上繪製裁剪區域的大小，您的尺寸可能會略有不同）。我們現在需要縮放我們的圖像以匹配我們想要的尺寸。

為此，請轉到圖像>縮放圖像（紅色箭頭）。

在出現的“縮放圖像”框中，在“圖像大小”下，確保“寬度”和“高度”框旁邊的鏈接圖標已鏈接（上圖中的紅色箭頭）。然後，將圖像的“寬度”更改為 1200（綠色箭頭）。按製表鍵。圖像高度將自動更新為“630”。在“質量”下，確保“插值”下拉菜單（藍色箭頭）設置為“NoHalo”或“LoHalo”，以獲得縮放後的最佳圖像質量。（有關插值的更多信息，查看我關於該主題的教程).

點擊“縮放”按鈕縮放圖像（黃色箭頭）。

縮放完成後，檢查標題欄中的圖像尺寸。您現在應該看到 1200×630 的圖像尺寸——我們想要的確切尺寸！那麼，我們現在該怎麼辦？

通過導出到 WebP 來壓縮圖像

裁剪和縮放圖像通過將圖像的高度從 1920 減少到 1200 像素，將寬度從 1280 減少到 630 像素來減小文件大小，但是我們可以通過在導出圖像時應用壓縮來進一步減小圖像大小。

因此，我們現在需要將圖像導出為一種文件格式，該文件格式將對圖像應用壓縮，而不會顯著降低圖像質量。雖然 JPEG 始終是一個不錯的選擇，但現在有一個更好的選擇： WEBP.

WebP 格式比 JPEG 應用更多的壓縮，同時對圖像質量的影響小於 JPEG。換句話說，您將獲得具有更小文件大小的更好看的圖像。此外，所有排名前 5 位的網絡瀏覽器都支持 WebP 格式。

要導出到 WebP，請轉到文件>導出為（紅色箭頭）。

單擊“位置”部分中的任何文件夾（以綠色輪廓顯示）以選擇計算機上要保存圖像的圖像。您只需雙擊文件夾即可進入，然後在“保存在文件夾”標題（紅色箭頭）旁邊查看您所在的文件夾。然後，將您的圖像重命名為您想要的任何名稱——只需確保您的圖像名稱以擴展名“.webp”（藍色箭頭）結尾即可以 WebP 格式導出圖像。準備好後，單擊窗口右下角的“導出”（黃色箭頭）。

接下來，將出現“將圖像導出為 WebP”對話框。確保未選中“無損”（紅色箭頭）。我通常將“圖像質量”設置為 80（藍色箭頭 - 這是一個百分比，因此百分比越低，圖像質量越低，但圖像文件大小越小）。如果您的圖像不包含透明度（即沒有背景的徽標），您不必擔心“Alpha 質量”滑塊（事實上，在我執行的一個實驗中，實際上將 Alpha 質量從 100 降低到 90將具有透明背景的圖像的文件大小從 8.50 kb 增加到 8.52 kb）。您可以將“源類型”下拉菜單設置為“默認”。

是否要選中或取消選中任何元數據選項（包括 Exif 數據、ITPC 數據和 XMP 數據）取決於您。 Exif 和 XMP 數據是通常由您的相機分配的元數據，用於描述有關您的照片的信息，例如使用的相機型號或使用的鏡頭類型。另一方面，ITPC 被媒體成員使用，並為您的圖像分配信息，例如所有權、權利和許可。如果您不確定該怎麼做，只需選中這些選項即可。

同樣，您可以不選中“保存顏色配置文件”選項，因為大多數瀏覽器會自動使用 sRGB 顏色空間來顯示您的圖像，這是 GIMP 使用的。如果您使用不同的顏色配置文件，則需要保留此選項。此外，如果您擔心某些瀏覽器無法正確顯示圖像，則選中它只會使整體圖像大小增加幾 kb。

最後，“保存縮略圖”選項可以保持未選中狀態，這將進一步節省我們一些千字節。

單擊“導出”（上圖中的黃色箭頭）將圖像導出為 WebP 格式。將導出的 WebP 文件與大小相同且質量設置為“80”的 JPEG 文件進行比較時，WebP 圖像的大小比 JPEG 小約 30 kb，或大約 25%。