如何在WordPress網站上提供縮放圖像

[ad_1]

您是否通過性能測試工具來運行網站,只是被告知需要「提供縮放的圖像」?基本上,該工具會告訴您需要調整圖片尺寸,以匹配圖片在網站上的顯示方式。

幸運的是,WordPress有一些很棒的工具可以幫助您。您可以使用圖像優化插件自動提供縮放後的圖像,也可以使用多種不同的技術自己縮放圖像。這樣做對優化頁面載入時間和提高跳出率有很大幫助。

這就是為什麼您需要提供縮放圖像的原因

縮放後的圖像本質上是經過調整大小以適合您所使用的確切尺寸的圖像。一方面,過小的圖像和放大的圖像將變得模糊。另一方面,雖然瀏覽器將縮小太大的圖像,但不必要地增加了頁面的文件大小。

此外,大圖像會導致瀏覽器花費時間和資源來載入它們,而不是儘可能快地載入頁面本身。這會大大減慢您的頁面載入時間,並對網站的性能產生負面影響。

例如,如果您的主題以100 x 100像素顯示圖片,則您希望載入100 x 100像素的圖片。如果您載入的圖像尺寸為50 x 50像素,則放大至100像素時,圖像會變得模糊。另一方面,如果您載入200 x 200像素的圖像,則看起來不錯,但由於頁面仍僅以100像素顯示,因此無需增加頁面尺寸。

當然,較慢的頁面可以將訪問者趕走。它們不僅可以帶來不利的用戶體驗(UX),而且還可以在用戶感到沮喪並單擊遠離您的站點時提高您的跳出率。

這就是為什麼幾乎所有性能測試工具都強調需要提供縮放圖像的原因:

GTmetrix中的「按比例縮放圖像」警告

三個插件可幫助您在WordPress中提供縮放圖像

好消息是,正確提供縮放圖像的最簡單方法之一就是使用插件來幫助您。通過以下選項,可以輕鬆優化沉重的圖像並清理pages腫的頁面。讓我們來看看!

1.擎天柱

我們的第一個產品是Optimole。這個方便的插件可以優化您的圖像,並以適合不同設備的理想尺寸提供它們。因此,它不僅可以幫助您提供縮放後的圖像,還可以根據用戶的設備自動將其縮放到最佳尺寸。

它具有最少的設置過程,如果您需要最大的質量和最小的麻煩,那就非常有用。

除了縮放和壓縮圖像之外,Optimole還通過Amazon CloudFront支持的全球內容交付網路(CDN)為它們提供服務,從而加快了您在全球範圍內的載入時間。

使用免費計劃,您可以優化和縮放無限制的圖像,每月最多訪問5,000次。之後,付費計劃每月僅需$ 9。

2.撲鼻

可以用來提供正確縮放的圖像的另一個插件是Smush。這是一個非常受好評的熱門選擇,它可以通過掃描每個圖像,去除不必要的數據然後設置理想的尺寸來優化圖像。完成後,每個圖像都會保存在您的媒體庫中。

要縮放圖像,您可以讓它自動將圖像調整為一定尺寸以上以符合您的站點要求。

此外,該插件還可以一次「抓取」多達50張圖片,並且您可以將其設置為在載入時自動優化每張圖片。此外,您可以將其設置為壓縮任何目錄中的映像,包括存儲在雲服務中的映像。

因此,免費版本是一個很好的起點,它將優化無限的圖像,儘管單個圖像的大小不能超過5 MB。

3. ShortPixel

我們的最終建議是ShortPixel。對於那些希望在預算內尋求高質量圖像壓縮和縮放解決方案的人來說,該插件是理想的選擇。它每月可以免費優化多達100張圖像。另外,它簡單易用。

具體來說,ShortPixel可幫助您在將WordPress圖像上傳到指定尺寸時自動縮放WordPress圖像。

ShortPixel還提供針對JPEG,PNG和GIF圖像的無損和有損圖像壓縮-您還可以優化PDF。它為您提供了一個選項,可以在您上載圖像時自動轉換圖像(包括WebP)或對其進行手動處理。

如上所述,免費版本使您每月最多可以優化100張圖像。除此之外,付費計劃每月起價為4.99美元,每月最多可優化5,000張圖像。

如何在不使用插件的情況下在WordPress中提供縮放圖像(3種方法)

如果您希望在不使用插件的情況下提供縮放後的圖像,則還有其他解決方法。例如,您可以在媒體庫中裁剪圖像,在管理媒體設置中調整它們,或使用圖像編輯器(例如開源GIMP或Photoshop)。

但是,在討論如何在不使用插件的情況下提供縮放圖像之前,我們應該提到WordPress隨附的本機功能srcset。此核心功能使您的圖像能夠響應不同的屏幕尺寸。它通過為瀏覽器提供三個不同的選項來工作,然後將使用針對該用戶最優化的選項。當然,這確實有助於頁面載入時間,但縮放圖像將為您提供更高的性能。

說到其中,讓我們看一下第一種方法-在WordPress中裁剪圖像。

1.在媒體庫中裁剪圖像

實現此方法的第一個調用埠是前往WordPress後端。在您的帖子或頁面之一中,首先單擊要縮放的圖像並選擇“編輯圖像'':

WordPress中的「編輯圖片」按鈕。

從那裡,您需要轉到媒體庫屏幕,選擇您的圖像,然後單擊編輯圖像鏈接。在下一個屏幕上是縮放圖像的選項:

如何從WordPress儀錶板手動提供縮放圖像

系統會為您顯示圖像的原始尺寸,以及一個用於輸入新的縮放尺寸的框。但是,請注意,文件名通常與其他字元串一起保存,如果您使用特定的圖像SEO策略,這可能會影響您。

2.在「設置」>「媒體」屏幕中調整圖像尺寸

您還可以通過直接調整WordPress中的設置來縮放圖像。為此,請導航至WordPress,然後轉到「設置」>「媒體」:

這將帶您進入“媒體設置''頁面。在這裡,您可以設置將圖像上傳到WordPress時要使用的最大尺寸,這是它將顯示在瀏覽器中的三個選項中的每一個選項(正如我們在上面有關srcset的討論中所述):

使用WordPress縮略圖大小提供縮放圖像

您可以在此處更改縮略圖,中圖像和大圖像尺寸的寬度和高度。

然後,WordPress將使用這些尺寸自動創建每個圖像的縮放版本。您可以從WordPress編輯器中選擇要插入的尺寸。

但是,應注意,儘管在某些情況下使用這些設置您可以縮短頁面載入時間,但它們並不能在每種情況下都能完美地優化您的圖像。為此,您可以考慮使用最後一種手動方法。

3.使用圖片編輯器(例如,GIMP或Photoshop)

當然,我們手動縮放圖像的最後一種方法是使用離線圖像編輯器。您可能會認為此方法是最明顯的方法,儘管它可以說是最有效的選擇。例如,在Photoshop中,您可以轉到工具欄中的圖像並選擇圖像大小:

如何更改圖像大小Photoshop以縮放圖像

將出現一個彈出屏幕,其中包含圖像的基本尺寸。然後,您可以根據需要縮放圖像,然後再將其上傳到WordPress。

如何在Photoshop中提供縮放圖像

除了寬度和高度,您還可以在此處選擇其他選項。例如,可以根據需要將圖像的解析度設置為更高或更低(72 PPI通常是網路的標準)。

結論

在本文中,我們討論了如何手動縮放圖像,並提供了三個有用的插件。快速回顧一下,它們是:

  1. Optimole:此插件提供了一種設置即忘的方法來提供縮放圖像。

  2. Smush:一種流行且高度評價的圖像優化解決方案。

  3. ShortPixel:對於那些喜歡輕量級選項的人,此插件是理想的選擇。

您對投放縮放後的圖像有任何疑問,或者投放縮放後的圖像意味著什麼?在下面的評論部分中詢問他們!

相關文章