WordPress影象大小比您想象的要複雜。瞭解影象尺寸在WordPress中的工作原理、預設影象尺寸是多少以及如何定義自定義影象尺寸以有效管理您的網站至關重要。
掌握這些知識將確保您在合適的位置擁有合適大小的合適型別的影象,以便您可以從視覺內容策略中獲得最大收益。
這些策略還將提高您帖子的分享價值,這將轉化為更多的知名度和流量。統計資料顯示,三天後讀者只記得他們閱讀的文字內容的 10%,但如果您在內容中新增視覺上吸引人的影象,這個數字會高達 65%。
在這份詳盡的指南中,您將瞭解有關WordPress影象大小的所有資訊。
- WordPress如何管理您上傳的影象
- WordPress影象大小:需要牢記的基本事項
- WordPress在哪裡以及如何儲存您的影象?
- 什麼是預設的WordPress影象大小?
- 如何更改預設影象大小(以及何時需要)
- 如何將自定義影象大小新增到WordPress
- 為您的主題新增自定義影象大小
- 更新舊縮圖
- 使用WordPress內建影象大小編輯器
- 在WordPress Gutenberg中編輯影象
- 優化您的影象
- WordPress影象編輯外掛
WordPress如何管理您上傳的影象
將影象上傳到WordPress非常簡單,但在WordPress後端處理它們時會發生很多事情。
當您上傳圖片時,WordPress做的第一件事就是建立三種不同大小的圖片。這意味著您上傳的每一張圖片都會得到四張圖片:
- 縮圖大小
- 中等大小
- 大尺寸
- 原始尺寸
WordPress建立所有這些不同的尺寸,以便為每位訪問者以最合適的尺寸提供您的影象。您的網站將始終根據讀者使用的裝置向他們顯示正確的影象,從而加快並增強他們的體驗。
您始終可以手動編輯影象以提供這些額外的尺寸,但在Photoshop等工具中準確地進行編輯並非易事。這將涉及大量繁瑣的工作,這就是WordPress為您省去麻煩的原因。
WordPress影象大小:需要牢記的基本事項
在我們深入瞭解WordPress影象大小的更多技術方面之前,您應該瞭解一些重要說明。
我們已經討論了WordPress如何為您建立三種預設影象尺寸,但是如果您需要與WordPress的預設尺寸不同的尺寸怎麼辦?如果您想要更多尺寸怎麼辦?
好訊息!你可以很容易地做到這一點。WordPress允許您更改預設影象大小並根據需要新增任意數量的其他大小。我們稍後會更詳細地解釋這一點。
但在我們開始之前,您應該知道有特定的要求才能按您的意願工作。
其中之一是您應該嘗試上傳您需要的最大尺寸的影象。雖然WordPress會使其在較小的裝置上更小,但它將使用全尺寸(原始尺寸),其中影象需要最大。
假設您上傳的影象小於您在WordPress中定義的最大尺寸。在這種情況下,WordPress不會以最大尺寸正確顯示該特定影象。另外,質量會明顯下降。
也就是說,您還必須確保不上傳大於所需的最大尺寸的影象。WordPress永遠不會使用此類影象,因為它們太大並且會佔用您伺服器上不必要的空間。
因此,在上傳到WordPress之前,您應該檢查您上傳的影象的大小,並確保它是所需的最大大小,但不能大於此大小。
WordPress在哪裡以及如何儲存您的影象?
就您的管理面板而言,WordPress將您上傳的圖片儲存在媒體庫中。您可以通過將滑鼠懸停在媒體選項上並單擊庫來檢視所有上傳的影象。
WordPress媒體庫
您可以按媒體型別(影象、視訊、音訊等)和日期對它們進行排序。但是,請注意,如果您沒有在Settings中禁用此功能,則只能按日期對影象進行排序。
右側還有一個搜尋框,可幫助您查詢上傳的圖片。只需輸入您在圖片的標題、說明或描述中使用的單詞即可找到它。
您的圖片儲存在您網站的上傳資料夾 ( wp-content/uploads/ ) 中。要訪問此資料夾,您需要使用FTP/SFTP客戶端。您網站的上傳資料夾中將有多個子目錄,按上傳日期存放您的圖片(假設您已在Settings中開啟了按日期排序的選項)。
您還可以為您的媒體檔案建立自定義資料夾,但我們建議您僅在您認為自己是高階使用者時才這樣做。
什麼是預設的WordPress影象大小?
當談到WordPress和影象大小時,我們總是檢視四種不同的影象,包括您的原始影象檔案和WordPress預設建立的三種不同大小:
- 縮圖大小: 150px(正方形)
- 中等尺寸:最大寬度和高度300px
- 大尺寸:最大寬度和高度1024px
- 全尺寸:影象的原始尺寸
同樣,正如我們之前提到的,如果您打算僅使用這些預設影象尺寸,則您需要上傳1024畫素的影象。這將使您的影象即使在最大尺寸下也能正確提供,如果您的影象尺寸小於WordPress使用的最大尺寸(預設為1024畫素),則這可能是不可能的。
如何更改預設影象大小(以及何時需要)
雖然預設的WordPress影象大小適用於大多數使用者,但某些使用者可能有不同的要求。您可能更喜歡略大的縮圖尺寸或較小的大影象尺寸。
當您發現自己正在編輯要上傳的大部分影象時,更改WordPress中的預設影象大小是有意義的,因為WordPress的預設影象大小不適合您的用例。
在預設影象大小之上新增新的自定義影象大小之前,請注意您將在站點的資料庫中儲存比您需要的更多的影象檔案。這可能會導致您的網站出現效能問題,並消耗超出其需要的空間。
對於需要堅持特定影象尺寸的基於影象的網站也是如此。攝影師、設計師和其他提供大量影象的人喜歡在整個網站的任何地方保持一致的尺寸以確保統一。
同樣,一些登陸頁面也需要顯示特定的影象尺寸,而預設的WordPress影象尺寸可能不適合。而一個電子商務商店通常需要使用較大的縮圖,其中透露更多的細節。
您可能想要更改預設影象大小的原因還有很多,但您明白了。
WordPress也理解這一點,這就是為什麼它允許您更改這些預設設定。
更改WordPress預設影象大小的步驟
這是在WordPress中更改預設影象大小的分步過程。
第 1 步:將滑鼠懸停在設定上,然後單擊出現的媒體選項:
用於更改預設影象大小的WordPress媒體設定
第 2 步:通過編輯數字將尺寸更改為您想要的尺寸,如下所示:
媒體設定中更新影象大小的示例
第 3 步:單擊底部的“儲存更改”按鈕。
現在,您從這裡上傳的所有影象都將採用這些新的預設尺寸。
一些教程會建議您輸入“0”作為預設影象大小。但是,我們建議不要這樣做,即使它可以幫助您節省空間。
如果您將這些值更改為“0”,那麼WordPress將在所有位置和所有裝置上使用您的全尺寸(原始)影象,這將導致您網站上的頻寬使用量激增。此外,這幾乎肯定會減慢顯示許多這些影象的部分的頁面載入時間。
如何將自定義影象大小新增到WordPress
如果您需要將所有過去的WordPress影象更改為這些新尺寸,您可以使用幾個很棒的外掛,我們將在下面詳細介紹。
對於傾向於使用許多不同型別影象的使用者,擁有比WordPress提供的三種預設尺寸更多的影象尺寸可能是必不可少的。
對於標準型別的影象,預設影象大小可能就足夠了,但是對於諸如彈出式圖形、小部件或滑塊圖片之類的內容,您可能需要更多的影象大小。
自定義影象大小使您可以靈活地改進WordPress網站的功能,並節省大量時間來逐個調整影象大小。
現在我們已經將其確定為我們的基線,讓我們仔細看看將這些自定義影象大小新增到您的 WordPress 站點所涉及的過程。
你在這裡有兩個選擇。第一種是使用一個外掛,只需點選幾下即可為您處理所有事情。第二種是將所需程式碼字串新增到站點檔案的手動方式。
我們先來看看外掛方法。
使用影象重新生成和選擇裁剪新增自定義影象大小
Image Regenerate & Select Crop外掛超越了Regenerate Thumbnails(在下面進一步討論),允許更多的定製和功能。
除了讓您更改預設影象大小之外,它還使您能夠重新生成任何現有影象以匹配您首選的影象大小、設定圖片的預設裁剪選項以及重新生成縮圖。
通過Image Regenerate & Select Crop外掛自定義影象大小選項。
安裝並啟用後,您可以通過標準的 WordPress設定 > 媒體頁面建立任意數量的新自定義影象大小。
手動新增自定義影象尺寸
儘管這是一個相對簡單易行的過程,但您應該做的第一件事是建立網站的備份,以防在進行這些調整時出現問題。備份過程完成後,轉到WordPress站點的管理儀表板。
在那裡,將滑鼠懸停在“外觀”選單選項上並選擇“編輯器”(在某些情況下可能會命名為“主題編輯器”)。
接下來,找到functions.php檔案,檢視下面的程式碼是否已經存在(使用搜尋功能快速定位)。如果它已經存在,則無需執行任何操作。
如果不存在,則需要將此字串新增到檔案中:
add_theme_support( 'post-thumbnails' );
將自定義影象大小的鉤子新增到functions.php
新增此程式碼後,單擊底部的“更新檔案”按鈕以啟用允許您建立自定義影象大小的功能。
現在是時候為您想要的特定自定義影象尺寸新增程式碼了。在您的functions.php檔案中查詢“add_image_size”字串,因為這是您需要進行編輯的地方:
add_image_size( 'my-custom-image-size', 800, 640 );
具體來說,您應該使用要命名新自定義影象大小的內容來更新單引號內的內容。我們建議保持簡單和描述性(例如“main-post-image”)。
處理好名稱後,您需要自行宣告影象大小。第一個數值是影象寬度,第二個數值是影象高度。
這是一個螢幕截圖,顯示了我們新增到functions.php檔案中的示例程式碼:
向functions.php新增自定義影象大小尺寸
瞭解裁剪
當影象在沒有裁剪的情況下變小時,它只是原始影象的縮小版本。但是,當它被“裁剪”或剪下時,裁剪部分將從完成的影象中刪除。
這就像物理切割圖片一樣。如果你用剪刀剪下肖像並剪掉人物肩膀以下的所有東西,你就“剪掉”了那張照片。它以相同的方式在數字上工作。
目的是減少影象的檔案大小,因為裁剪不是正確的選擇。您將在保持大檔案大小的同時刪除您可能想要保留的元素。也就是說,對於必須完全適合特定尺寸的影象尺寸,例如特色影象或個人資料圖片,裁剪可能是有意義的。
對於特色影象之類的東西,主要主題可能會變得太小。在不裁剪的情況下調整大小時,他們仍然應該獲得所需的曝光。因此,找出最適合您使用的不同型別影象的方法,並相應地設定裁剪功能。
新增自定義影象尺寸時,您可以讓WordPress根據您設定的尺寸和原始尺寸自動裁剪影象。您需要在程式碼末尾新增“true”。
同樣,這是我們上面啟用了裁剪功能的示例。
add_image_size( 'name-for-your-custom-image', 800, 640, true );
但是,如果您不想裁剪影象,您可以將“false”替換為“true”,或者將兩者都省略。不放置它們中的任何一個都會使程式碼自動採用“false”選項。這樣,WordPress就不會裁剪您的影象。
為您的主題新增自定義影象大小
建立所需的自定義影象大小後,您還需要更新主題中的程式碼。這樣做將使您的主題根據需要顯示這些自定義影象大小。
如果您是編輯程式碼的完全初學者,請在執行此操作之前再次建立您網站的備份。
現在,您需要在post迴圈中找到您的主題檔案並將以下程式碼新增到其中:
the_post_thumbnail( 'your-specified-image-size' );
要找到此檔案,請單擊外觀設定下的主題編輯器。在此處查詢index.php檔案 — 這是包含您需要編輯的 post 迴圈的主題檔案。
找到後,新增上面提到的程式碼,如下圖所示:
將自定義影象大小的鉤子新增到functions.php
同樣,最好將“new-homepage-feature”部分替換為您建立的自定義影象大小的名稱。
新增此程式碼並更新檔案後,您將在媒體庫中看到自定義影象大小。上傳一張新圖片進行試用。
更新舊縮圖
雖然建立和新增自定義影象尺寸感覺很棒,但它給您留下了另一個未完成的任務:您已經上傳的所有舊影象呢?
Regenerate Thumbnails外掛
Regenerate Thumbnails允許您自動重新上傳新尺寸的影象,包括您新增的任何自定義影象尺寸。
要安裝它,請將滑鼠懸停在Plugins選單選項上,然後單擊Add New。然後在搜尋框中輸入“Regenerate Thumbnails”。
單擊“立即安裝”按鈕安裝“Regenerate Thumbnails”外掛。
安裝Regenerate Thumbnails外掛
安裝完成後,點選啟用按鈕開始使用。
接下來,將滑鼠懸停在左側的工具選單上,然後單擊Regenerate Thumbnails:
Regenerate Thumbnails外掛的設定頁面
您可以單擊Regenerate Thumbnails for All [#] Attachments,為所有舊影象生成新的影象大小。
從上圖可以看出,Regenerate Thumbnails還將列出您網站上當前活動的所有影象尺寸。
您可能會發現一些您不知道的影象尺寸。通常,這些是由外掛建立的,尤其是當它們用於改進站點的外觀、設計或功能時。
使用WordPress內建影象大小編輯器
正如我們之前強調的,您應該只建立您經常使用的自定義影象尺寸。對於您計劃僅在極少數情況下使用的影象尺寸,使用WordPress內建影象尺寸編輯器手動編輯影象尺寸是有意義的。
我們將為您提供快速演練,解釋如何使用內建編輯器快速輕鬆地編輯影象大小。
首先,單擊要進入媒體庫的媒體選單。接下來,單擊要調整其大小的影象。
然後單擊影象正下方的“編輯影象”按鈕:
編輯影象按鈕
您將看到當前的影象大小並可以在此處進行調整。只需輸入您想要的影象大小,然後單擊“拉伸”按鈕,就可以開始了。
編輯影象尺寸
點選拉伸後,大小調整將自動儲存。如果您出於任何原因不喜歡新的影象大小,您始終可以使用“恢復原始影象”選項(影象大小欄位的正下方)恢復到原始大小。
在WordPress Gutenberg中編輯影象
如果您使用的是Gutenberg,則可以在建立文章期間新增影象時快速編輯影象的影象大小。
通過古騰堡更改影象大小
如上圖所示,當您在Gutenberg中建立文章時上傳圖片時,您可以在帖子選項中選擇現有圖片大小或更改圖片大小。
如果您已將新的自定義影象尺寸新增到主題檔案中,您將在影象尺寸下拉選單中找到它們。
您還可以使用其下方的欄位更改影象大小。您需要做的就是在欄位中輸入所需的尺寸,影象將自動調整為您的新規格。
優化您的影象
沒有提及影象優化的影象相關指南是不完整的。雖然我們已經詳細討論了優化影象,但提及一些快速提示當然不會有什麼壞處。
畢竟,當您新增自定義影象大小時,您需要知道如何優化影象以確保它們不會影響您網站的效能或消耗比它們需要的更多的伺服器資源。
話雖如此,這裡有一些快速提示,可幫助您開始進行影象優化。
決定檔案型別
只需為您的影象選擇正確的檔案型別即可顯著減小其大小。雖然有許多不同型別的影象檔案,但絕大多數是JPEG或PNG。
在彩色影象方面,JPEG勝出。此外,您還可以進一步壓縮JPEG檔案以減小其檔案大小,而質量只會略有降低(如果操作正確)。
另一方面,PNG通常成為繪圖、文字、大多數螢幕截圖和圖形的更好選擇。
調整影象大小
調整影象大小是減小影象檔案大小的一種快速簡便的方法。根據經驗,您應該確保您網站上的所有影象都只需要它們的大小。
如果您網站的最大寬度為1200畫素,那麼在您的網站上放置一張寬度大於1200畫素最大值的圖片是沒有意義的。
我們還提到了除非需要,否則不要建立新的自定義影象尺寸的重要性,因此請記住這一點。
利用有失真壓縮
在您已經使用其他方法優化影象之後,有失真壓縮是進一步減小檔案大小的好方法。
這意味著刪除一些影象資料,刪除這些資料不會對影象質量產生太大影響,但可以幫助大大減小檔案大小。
使用延遲載入
延遲載入可幫助您優先載入網站頁面上的影象。它隨著訪問者滾動頁面及時載入影象。這意味著最頂部的影象將立即載入,但摺疊下方的所有影象都不會載入,直到使用者滾動經過摺疊。
還有更多內容,但您會在我們的影象優化教程中找到所有內容,因此讓我們直接跳到一些您可以使用的影象優化外掛。
WordPress影象編輯外掛
使用這些外掛的美妙之處在於您只需點選幾下即可執行高階影象優化,而無需使用任何高階工具或程式碼。此外,大多數這些外掛都是免費的,尤其是優化一定數量的影象或使用一些基本的優化功能。
- Imagify:令人印象深刻的自定義壓縮級別和其他影象優化功能
- Kraken:有用的無失真壓縮外掛,但前提是您購買了高階版本
- ShortPixel:支援有損和無失真壓縮,適用於多種影象型別
- Optimole:用於CDN和延遲載入,這是優化影象的高效方法
小結
您現在瞭解WordPress影象大小的所有內容,以及如何在該部門充分利用WordPress提供的功能和定製。既然您知道如何從裡到外處理WordPress影象,您應該會發現優化網站的效能和功能變得更加容易。
您可以建立自定義影象大小並直接通過主題程式碼或使用為該特定任務構建的外掛來管理它們。請記住在您計劃更新影象的任何時候更新您的舊縮圖——這也是一項簡單的任務,這要歸功於我們上面列出的有用外掛。
評論留言