新聞中心

創(chuàng)新互聯(lián)公司長期為成百上千家客戶提供的網(wǎng)站建設服務,團隊從業(yè)經(jīng)驗10年,關注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務;打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為樺川企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站設計,樺川網(wǎng)站改版等技術服務。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
wordpress圖像大小比您想象的要復雜。了解圖像尺寸在WordPress中的工作原理、默認圖像尺寸是多少以及如何定義自定義圖像尺寸以有效管理您的網(wǎng)站至關重要。
掌握這些知識將確保您在合適的位置擁有合適大小的合適類型的圖像,以便您可以從視覺內(nèi)容策略中獲得最大收益。
這些策略還將提高您帖子的分享價值,這將轉(zhuǎn)化為更多的知名度和流量。統(tǒng)計數(shù)據(jù)顯示,三天后讀者只記得他們閱讀的文本內(nèi)容的 10%,但如果您在內(nèi)容中添加視覺上吸引人的圖像,這個數(shù)字會高達 65%。
在這份詳盡的指南中,您將了解有關WordPress圖像大小的所有信息。
WordPress如何管理您上傳的圖像
將圖像上傳到WordPress非常簡單,但在WordPress后端處理它們時會發(fā)生很多事情。
當您上傳圖片時,WordPress做的第一件事就是創(chuàng)建三種不同大小的圖片。這意味著您上傳的每一張圖片都會得到四張圖片:
- 縮略圖大小
- 中等大小
- 大尺寸
- 原始尺寸
WordPress創(chuàng)建所有這些不同的尺寸,以便為每位訪問者以最合適的尺寸提供您的圖像。您的網(wǎng)站將始終根據(jù)讀者使用的設備向他們顯示正確的圖像,從而加快并增強他們的體驗。
您始終可以手動編輯圖像以提供這些額外的尺寸,但在Photoshop等工具中準確地進行編輯并非易事。這將涉及大量繁瑣的工作,這就是WordPress為您省去麻煩的原因。
WordPress圖像大?。盒枰斡浀幕臼马?/strong>
在我們深入了解WordPress圖像大小的更多技術方面之前,您應該了解一些重要說明。
我們已經(jīng)討論了WordPress如何為您創(chuàng)建三種默認圖像尺寸,但是如果您需要與WordPress的默認尺寸不同的尺寸怎么辦?如果您想要更多尺寸怎么辦?
好消息!你可以很容易地做到這一點。WordPress允許您更改默認圖像大小并根據(jù)需要添加任意數(shù)量的其他大小。我們稍后會更詳細地解釋這一點。
但在我們開始之前,您應該知道有特定的要求才能按您的意愿工作。
其中之一是您應該嘗試上傳您需要的最大尺寸的圖像。雖然WordPress會使其在較小的設備上更小,但它將使用全尺寸(原始尺寸),其中圖像需要最大。
假設您上傳的圖像小于您在WordPress中定義的最大尺寸。在這種情況下,WordPress不會以最大尺寸正確顯示該特定圖像。另外,質(zhì)量會明顯下降。
也就是說,您還必須確保不上傳大于所需的最大尺寸的圖像。WordPress永遠不會使用此類圖像,因為它們太大并且會占用您服務器上不必要的空間。
因此,在上傳到WordPress之前,您應該檢查您上傳的圖像的大小,并確保它是所需的最大大小,但不能大于此大小。
WordPress在哪里以及如何存儲您的圖像?
就您的管理面板而言,WordPress將您上傳的圖片存儲在媒體庫中。您可以通過將鼠標懸停在媒體選項上并單擊庫來查看所有上傳的圖像。
WordPress媒體庫
您可以按媒體類型(圖像、視頻、音頻等)和日期對它們進行排序。但是,請注意,如果您沒有在Settings中禁用此功能,則只能按日期對圖像進行排序。
右側(cè)還有一個搜索框,可幫助您查找上傳的圖片。只需輸入您在圖片的標題、說明或描述中使用的單詞即可找到它。
您的圖片存儲在您網(wǎng)站的上傳文件夾 ( wp-content/uploads/ ) 中。要訪問此文件夾,您需要使用FTP/SFTP客戶端。您網(wǎng)站的上傳文件夾中將有多個子目錄,按上傳日期存放您的圖片(假設您已在Settings中打開了按日期排序的選項)。
您還可以為您的媒體文件創(chuàng)建自定義文件夾,但我們建議您僅在您認為自己是高級用戶時才這樣做。
什么是默認的WordPress圖像大???
當談到WordPress和圖像大小時,我們總是查看四種不同的圖像,包括您的原始圖像文件和WordPress默認創(chuàng)建的三種不同大?。?/p>
- 縮略圖大?。?/strong> 150px(正方形)
- 中等尺寸:最大寬度和高度300px
- 大尺寸:最大寬度和高度1024px
- 全尺寸:圖像的原始尺寸
同樣,正如我們之前提到的,如果您打算僅使用這些默認圖像尺寸,則您需要上傳1024像素的圖像。這將使您的圖像即使在最大尺寸下也能正確提供,如果您的圖像尺寸小于WordPress使用的最大尺寸(默認為1024像素),則這可能是不可能的。
如何更改默認圖像大?。ㄒ约昂螘r需要)
雖然默認的WordPress圖像大小適用于大多數(shù)用戶,但某些用戶可能有不同的要求。您可能更喜歡略大的縮略圖尺寸或較小的大圖像尺寸。
當您發(fā)現(xiàn)自己正在編輯要上傳的大部分圖像時,更改WordPress中的默認圖像大小是有意義的,因為WordPress的默認圖像大小不適合您的用例。
在默認圖像大小之上添加新的自定義圖像大小之前,請注意您將在站點的數(shù)據(jù)庫中存儲比您需要的更多的圖像文件。這可能會導致您的網(wǎng)站出現(xiàn)性能問題,并消耗超出其需要的空間。
對于需要堅持特定圖像尺寸的基于圖像的網(wǎng)站也是如此。攝影師、設計師和其他提供大量圖像的人喜歡在整個網(wǎng)站的任何地方保持一致的尺寸以確保統(tǒng)一。
同樣,一些登陸頁面也需要顯示特定的圖像尺寸,而默認的WordPress圖像尺寸可能不適合。而一個電子商務商店通常需要使用較大的縮略圖,其中透露更多的細節(jié)。
您可能想要更改默認圖像大小的原因還有很多,但您明白了。
WordPress也理解這一點,這就是為什么它允許您更改這些默認設置。
更改WordPress默認圖像大小的步驟
這是在WordPress中更改默認圖像大小的分步過程。
第 1 步:將鼠標懸停在設置上,然后單擊出現(xiàn)的媒體選項:
用于更改默認圖像大小的WordPress媒體設置
第 2 步:通過編輯數(shù)字將尺寸更改為您想要的尺寸,如下所示:
媒體設置中更新圖像大小的示例
第 3 步:單擊底部的“保存更改”按鈕。
現(xiàn)在,您從這里上傳的所有圖像都將采用這些新的默認尺寸。
一些教程會建議您輸入“0”作為默認圖像大小。但是,我們建議不要這樣做,即使它可以幫助您節(jié)省空間。
如果您將這些值更改為“0”,那么WordPress將在所有位置和所有設備上使用您的全尺寸(原始)圖像,這將導致您網(wǎng)站上的帶寬使用量激增。此外,這幾乎肯定會減慢顯示許多這些圖像的部分的頁面加載時間。
如何將自定義圖像大小添加到WordPress
如果您需要將所有過去的WordPress圖像更改為這些新尺寸,您可以使用幾個很棒的插件,我們將在下面詳細介紹。
對于傾向于使用許多不同類型圖像的用戶,擁有比WordPress提供的三種默認尺寸更多的圖像尺寸可能是必不可少的。
對于標準類型的圖像,默認圖像大小可能就足夠了,但是對于諸如彈出式圖形、小部件或滑塊圖片之類的內(nèi)容,您可能需要更多的圖像大小。
自定義圖像大小使您可以靈活地改進WordPress網(wǎng)站的功能,并節(jié)省大量時間來逐個調(diào)整圖像大小。
現(xiàn)在我們已經(jīng)將其確定為我們的基線,讓我們仔細看看將這些自定義圖像大小添加到您的 WordPress 站點所涉及的過程。
你在這里有兩個選擇。第一種是使用一個插件,只需點擊幾下即可為您處理所有事情。第二種是將所需代碼字符串添加到站點文件的手動方式。
我們先來看看插件方法。
使用圖像重新生成和選擇裁剪添加自定義圖像大小
Image Regenerate & Select Crop插件超越了Regenerate Thumbnails(在下面進一步討論),允許更多的定制和功能。
除了讓您更改默認圖像大小之外,它還使您能夠重新生成任何現(xiàn)有圖像以匹配您首選的圖像大小、設置圖片的默認裁剪選項以及重新生成縮略圖。
通過Image Regenerate & Select Crop插件自定義圖像大小選項。
安裝并激活后,您可以通過標準的 WordPress設置 > 媒體頁面創(chuàng)建任意數(shù)量的新自定義圖像大小。
手動添加自定義圖像尺寸
盡管這是一個相對簡單易行的過程,但您應該做的第一件事是創(chuàng)建網(wǎng)站的備份,以防在進行這些調(diào)整時出現(xiàn)問題。備份過程完成后,轉(zhuǎn)到WordPress站點的管理儀表板。
在那里,將鼠標懸停在“外觀”菜單選項上并選擇“編輯器”(在某些情況下可能會命名為“主題編輯器”)。
接下來,找到functions.php文件,查看下面的代碼是否已經(jīng)存在(使用搜索功能快速定位)。如果它已經(jīng)存在,則無需執(zhí)行任何操作。
如果不存在,則需要將此字符串添加到文件中:
add_theme_support( 'post-thumbnails' );
將自定義圖像大小的鉤子添加到functions.php
添加此代碼后,單擊底部的“更新文件”按鈕以激活允許您創(chuàng)建自定義圖像大小的功能。
現(xiàn)在是時候為您想要的特定自定義圖像尺寸添加代碼了。在您的functions.php文件中查找“add_image_size”字符串,因為這是您需要進行編輯的地方:
add_image_size( 'my-custom-image-size', 800, 640 );
具體來說,您應該使用要命名新自定義圖像大小的內(nèi)容來更新單引號內(nèi)的內(nèi)容。我們建議保持簡單和描述性(例如“main-post-image”)。
處理好名稱后,您需要自行聲明圖像大小。第一個數(shù)值是圖像寬度,第二個數(shù)值是圖像高度。
這是一個屏幕截圖,顯示了我們添加到functions.php文件中的示例代碼:
向functions.php添加自定義圖像大小尺寸
了解裁剪
當圖像在沒有裁剪的情況下變小時,它只是原始圖像的縮小版本。但是,當它被“裁剪”或剪切時,裁剪部分將從完成的圖像中刪除。
這就像物理切割圖片一樣。如果你用剪刀剪下肖像并剪掉人物肩膀以下的所有東西,你就“剪掉”了那張照片。它以相同的方式在數(shù)字上工作。
目的是減少圖像的文件大小,因為裁剪不是正確的選擇。您將在保持大文件大小的同時刪除您可能想要保留的元素。也就是說,對于必須完全適合特定尺寸的圖像尺寸,例如特色圖像或個人資料圖片,裁剪可能是有意義的。
對于特色圖像之類的東西,主要主題可能會變得太小。在不裁剪的情況下調(diào)整大小時,他們?nèi)匀粦摣@得所需的曝光。因此,找出最適合您使用的不同類型圖像的方法,并相應地設置裁剪功能。
添加自定義圖像尺寸時,您可以讓WordPress根據(jù)您設置的尺寸和原始尺寸自動裁剪圖像。您需要在代碼末尾添加“true”。
同樣,這是我們上面啟用了裁剪功能的示例。
add_image_size( 'name-for-your-custom-image', 800, 640, true );
但是,如果您不想裁剪圖像,您可以將“false”替換為“true”,或者將兩者都省略。不放置它們中的任何一個都會使代碼自動采用“false”選項。這樣,WordPress就不會裁剪您的圖像。
為您的主題添加自定義圖像大小
創(chuàng)建所需的自定義圖像大小后,您還需要更新主題中的代碼。這樣做將使您的主題根據(jù)需要顯示這些自定義圖像大小。
如果您是編輯代碼的完全初學者,請在執(zhí)行此操作之前再次創(chuàng)建您網(wǎng)站的備份。
現(xiàn)在,您需要在post循環(huán)中找到您的主題文件并將以下代碼添加到其中:
the_post_thumbnail( 'your-specified-image-size' );
要找到此文件,請單擊外觀設置下的主題編輯器。在此處查找index.php文件 — 這是包含您需要編輯的 post 循環(huán)的主題文件。
找到后,添加上面提到的代碼,如下圖所示:
將自定義圖像大小的鉤子添加到functions.php
同樣,最好將“new-homepage-feature”部分替換為您創(chuàng)建的自定義圖像大小的名稱。
添加此代碼并更新文件后,您將在媒體庫中看到自定義圖像大小。上傳一張新圖片進行試用。
更新舊縮略圖
雖然創(chuàng)建和添加自定義圖像尺寸感覺很棒,但它給您留下了另一個未完成的任務:您已經(jīng)上傳的所有舊圖像呢?
Regenerate Thumbnails插件
Regenerate Thumbnails允許您自動重新上傳新尺寸的圖像,包括您添加的任何自定義圖像尺寸。
要安裝它,請將鼠標懸停在Plugins菜單選項上,然后單擊Add New。然后在搜索框中輸入“Regenerate Thumbnails”。
單擊“立即安裝”按鈕安裝“Regenerate Thumbnails”插件。
安裝Regenerate Thumbnails插件
安裝完成后,點擊啟用按鈕開始使用。
接下來,將鼠標懸停在左側(cè)的工具菜單上,然后單擊Regenerate Thumbnails:
Regenerate Thumbnails插件的設置頁面
您可以單擊Regenerate Thumbnails for All [#] Attachments,為所有舊圖像生成新的圖像大小。
注:小心選中用于刪除舊的未注冊尺寸的縮略圖文件( deleting thumbnail files for your old unregistered sizes)的復選框,因為如果網(wǎng)站上仍有您不再使用的舊尺寸的舊圖像,您最終可能會在您的網(wǎng)站上看到損壞的圖像。
從上圖可以看出,Regenerate Thumbnails還將列出您網(wǎng)站上當前活動的所有圖像尺寸。
您可能會發(fā)現(xiàn)一些您不知道的圖像尺寸。通常,這些是由插件創(chuàng)建的,尤其是當它們用于改進站點的外觀、設計或功能時。
使用WordPress內(nèi)置圖像大小編輯器
正如我們之前強調(diào)的,您應該只創(chuàng)建您經(jīng)常使用的自定義圖像尺寸。對于您計劃僅在極少數(shù)情況下使用的圖像尺寸,使用WordPress內(nèi)置圖像尺寸編輯器手動編輯圖像尺寸是有意義的。
我們將為您提供快速演練,解釋如何使用內(nèi)置編輯器快速輕松地編輯圖像大小。
首先,單擊要進入媒體庫的媒體菜單。接下來,單擊要調(diào)整其大小的圖像。
然后單擊圖像正下方的“編輯圖像”按鈕:
編輯圖像按鈕
您將看到當前的圖像大小并可以在此處進行調(diào)整。只需輸入您想要的圖像大小,然后單擊“拉伸”按鈕,就可以開始了。
編輯圖像尺寸
點擊拉伸后,大小調(diào)整將自動保存。如果您出于任何原因不喜歡新的圖像大小,您始終可以使用“恢復原始圖像”選項(圖像大小字段的正下方)恢復到原始大小。
在WordPress Gutenberg中編輯圖像
如果您使用的是Gutenberg,則可以在創(chuàng)建文章期間添加圖像時快速編輯圖像的圖像大小。
通過古騰堡更改圖像大小
如上圖所示,當您在Gutenberg中創(chuàng)建文章時上傳圖片時,您可以在帖子選項中選擇現(xiàn)有圖片大小或更改圖片大小。
如果您已將新的自定義圖像尺寸添加到主題文件中,您將在圖像尺寸下拉菜單中找到它們。
您還可以使用其下方的字段更改圖像大小。您需要做的就是在字段中輸入所需的尺寸,圖像將自動調(diào)整為您的新規(guī)格。
優(yōu)化您的圖像
沒有提及圖像優(yōu)化的圖像相關指南是不完整的。雖然我們已經(jīng)詳細討論了優(yōu)化圖像,但提及一些快速提示當然不會有什么壞處。
畢竟,當您添加自定義圖像大小時,您需要知道如何優(yōu)化圖像以確保它們不會影響您網(wǎng)站的性能或消耗比它們需要的更多的服務器資源。
話雖如此,這里有一些快速提示,可幫助您開始進行圖像優(yōu)化。
決定文件類型
只需為您的圖像選擇正確的文件類型即可顯著減小其大小。雖然有許多不同類型的圖像文件,但絕大多數(shù)是JPEG或PNG。
在彩色圖像方面,JPEG勝出。此外,您還可以進一步壓縮JPEG文件以減小其文件大小,而質(zhì)量只會略有降低(如果操作正確)。
另一方面,PNG通常成為繪圖、文本、大多數(shù)屏幕截圖和圖形的更好選擇。
調(diào)整圖像大小
調(diào)整圖像大小是減小圖像文件大小的一種快速簡便的方法。根據(jù)經(jīng)驗,您應該確保您網(wǎng)站上的所有圖像都只需要它們的大小。
如果您網(wǎng)站的最大寬度為1200像素,那么在您的網(wǎng)站上放置一張寬度大于1200像素最大值的圖片是沒有意義的。
我們還提到了除非需要,否則不要創(chuàng)建新的自定義圖像尺寸的重要性,因此請記住這一點。
利用有損壓縮
在您已經(jīng)使用其他方法優(yōu)化圖像之后,有損壓縮是進一步減小文件大小的好方法。
這意味著刪除一些圖像數(shù)據(jù),刪除這些數(shù)據(jù)不會對圖像質(zhì)量產(chǎn)生太大影響,但可以幫助大大減小文件大小。
使用延遲加載
延遲加載可幫助您優(yōu)先加載網(wǎng)站頁面上的圖像。它隨著訪問者滾動頁面及時加載圖像。這意味著最頂部的圖像將立即加載,但折疊下方的所有圖像都不會加載,直到用戶滾動經(jīng)過折疊。
還有更多內(nèi)容,但您會在我們的圖像優(yōu)化教程中找到所有內(nèi)容,因此讓我們直接跳到一些您可以使用的圖像優(yōu)化插件。
WordPress圖像編輯插件
使用這些插件的美妙之處在于您只需點擊幾下即可執(zhí)行高級圖像優(yōu)化,而無需使用任何高級工具或代碼。此外,大多數(shù)這些插件都是免費的,尤其是優(yōu)化一定數(shù)量的圖像或使用一些基本的優(yōu)化功能。
- Imagify:令人印象深刻的自定義壓縮級別和其他圖像優(yōu)化功能
- Kraken:有用的無損壓縮插件,但前提是您購買了高級版本
- ShortPixel:支持有損和無損壓縮,適用于多種圖像類型
- Optimole:用于CDN和延遲加載,這是優(yōu)化圖像的高效方法
小結(jié)
您現(xiàn)在了解WordPress圖像大小的所有內(nèi)容,以及如何在該部門充分利用WordPress提供的功能和定制。既然您知道如何從里到外處理WordPress圖像,您應該會發(fā)現(xiàn)優(yōu)化網(wǎng)站的性能和功能變得更加容易。
您可以創(chuàng)建自定義圖像大小并直接通過主題代碼或使用為該特定任務構建的插件來管理它們。請記住在您計劃更新圖像的任何時候更新您的舊縮略圖——這也是一項簡單的任務,這要歸功于我們上面列出的有用插件。
本文名稱:您需要了解的有關WordPress圖像大小的所有信息
文章位置:http://m.fisionsoft.com.cn/article/djdpphd.html


咨詢
建站咨詢
