WordPress中的圖像優化 – 加速網站速度的6個技巧

[ad_1]

無論您的網站如何優化,圖像始終是頁面上載入速度最慢的元素之一。如果你想要將WordPress加速到最大,你需要實現一個專門針對圖像的策略 – 在WordPress中也稱為圖像優化。

今天的帖子分享了六個通過減小文件大小來優化圖像的快速提示 – 所有這些都以速度的名義。如果你想要一個閃電般快速的WordPress網站,請繼續閱讀!

WordPress提示#1中的圖像優化:選擇正確的文件類型

使用Photoshop和其他圖像編輯軟體時,您可以指定要保存的文件類型。絕大多數在線圖像屬於兩種文件格式 – JPEG和PNG。

那麼你應該使用哪一個?嗯,這取決於。兩種選擇都有優點和缺點,選擇在很大程度上取決於場景。

  • JPEG – JPEG是顯示各種顏色的照片和其他圖像的最佳選擇。它們也可以被壓縮,犧牲質量以減小文件大小。
  • PNG – PNG贏得了圖形,繪圖,文字和一些截圖。與JPEG不同,它們還支持透明度。此格式使用無損壓縮,從而產生更高的質量,但也會產生更大的文件。

通常,文件格式由我們正在使用的圖像類型決定,如上所述。但是,就文件大小而言,選擇錯誤的文件格式會產生什麼後果?

好吧,讓我們來看幾個場景來測試它。

我的WordPress儀錶板的這個全尺寸屏幕截圖是PNG格式的150kb,但是作為JPEG格式的259kb。請記住,截圖通常是PNG的域名 – JPEG大約75%。

WordPress示例中的圖像優化 -  PNG屏幕截圖

(編者註:PNG對大多數截圖都做得很好,但不是全部。如果你有一些使用多種顏色的截圖 – 比如你的截圖中包含一張照片 – 你就是用JPG更好。)

但是,我拍攝的這張照片的全尺寸版本會返回相反的結果。 JPEG格式的照片是1.26mb;巴布亞紐幾內亞高達7.23mb。這意味著PNG的重量超過550%(呀!)。

WordPress示例中的圖像優化 -  JPEG圖片

這表明正確的文件格式對圖像大小的重要性。如果按下,請堅持以下規則:照片和多種顏色的東西,JPEG;其他一切,PNG。

2.調整圖像大小

縮小圖像的尺寸時,可以減小其文件大小。沒有例外。

為了使您的網站保持輕盈靈活,請確保儘可能減少圖像的物理尺寸 – 通常是您想要顯示圖像的尺寸。如果你的網站的最大寬度是1000像素,那麼上傳寬度超過1000像素的圖像是沒有理由的。大於必要的尺寸可確保圖像承載不必要的體積,從而使您更難在WordPress中正確進行圖像優化。

儘管WordPress縮略圖功能可以以較小的尺寸顯示圖像,但這並不會改變相關圖像的基礎文件大小。顯然,可以為攝影師和其他藝術家提供例外,他們可能希望顯示鏈接到其全尺寸,高解析度作品的縮略圖。

再次,請允許我展示您可以節省的成本。

我以前的照片的全尺寸版本尺寸為2592 x 1456像素,為1.26mb。但是,讓我們看看在將圖像大小調整為幾個常用寬度時文件大小會縮小多少。

WordPress中圖像優化的一個示例:

  • 1200像素寬:394kb
  • 1000像素寬:298kb
  • 800像素寬:219kb
  • 600像素寬:154kb

正如您所看到的,節省的尺寸確實令人咋舌!

要以節省時間的方式調整圖像大小,您可以在WordPress網站上安裝Optimole,它將在自動駕駛儀上執行所有操作。此外,它還帶有圖像大小調整以實現最佳顯示效果,這意味著圖像不會以完整大小載入,但它們會適應每個用戶的視口。換句話說,無論您使用何種設備或屏幕尺寸,Optimole都會載入完美的圖像尺寸。

WordPress中的Optimole圖像優化

3.裁剪圖像

調整圖像大小是減少文件大小的快捷方法。它會為您的圖像創建一個精確的副本,但是一切都會變小。

縮小圖像超過某一點意味著某些元素幾乎不可見。當圖像的焦點不再清晰時,這尤其成問題。

裁剪是調整大小的替代方法。而不是縮小整個圖像,你基本上修剪邊緣 – 就像在照片上使用一把剪刀。您嘗試顯示的圖像部分變得更加突出,您可以消除背景中的所有干擾。

下面是一個演示如何使用可靠的WordPress屏幕截圖來裁剪圖像比簡單地調整圖像更好。

調整大小的圖像:

調整大小的圖像

裁剪後的圖片:

裁剪圖像

當然,裁剪的好處在於,就像調整大小一樣,它會縮小圖像尺寸,縮小文件大小,因此是在WordPress中進行圖像優化的好方法。

4.降低圖像質量(有損壓縮)

完成裁剪和調整圖像大小後,您可以通過壓縮來進一步減小文件大小。雖然PNG也可以被壓縮,但這種技術對於JPEG來說特別有效並且很流行。

現在,JPEG支持一種稱為有損壓縮的壓縮。這意味著一些圖像數據被剝離以減小文件大小。

例如,如果兩個相鄰像素顯示最微小的色差,我們可以使它們相同。肉眼幾乎察覺不到這種變化,但顏色較少會使文件尺寸變小。

使用圖像編輯軟體保存JPEG文件時,系統會要求您選擇0-100的質量得分。這實質上是圖像質量和文件大小之間的權衡。

  • 得分越高:壓縮越低;更高的品質;更大的文件大小。
  • 分數越低:壓縮越高;質量較差;文件較小。

一般來說,質量得分的微小變化對圖像的整體質量幾乎沒有影響。事實上,您的訪客不太可能分辨出差異。

為了說明這一點,請參閱下面的兩張照片。一個的質量得分為100,其中一個為80.哪個是哪個?

WordPress圖片A中的圖像優化:

照片A.

照片B:

照片B.

點擊此處顯示

照片B的質量得分為100。

這很難區分,對嗎?然而,當涉及文件大小時,差異是白天和黑夜:418kb對90kb。

但是,你不能永遠地降低質量,因為在某些時候,質量會下降。下圖的質量得分為20:

質量較低的圖像

當然,它可能只有28kb,但我不希望這個在我的網站上,對嗎?

現在,完美的壓縮級別沒有黃金法則。然而,違反直覺的是,圖像越複雜,您在通過WordPress進行最終圖像優化的過程中降低質量就越多。

5.在CDN上提供圖像

網上發生的一切都在瞬間發生,對吧?不,實際上。訪問者位置與網站伺服器之間的地理距離會對網站速度產生影響 – 距離越大,等待時間越長。

要解決此延遲問題,請考慮安裝CDN。 CDN將您的網站存儲在遍布全球的多個伺服器上,然後將您的訪問者連接到地理位置最接近他們的訪問者。延遲問題解決了,您的網站服務更快。

如果你想加速WordPress,你會很高興得知Optimole插件附帶了自己的免費CDN – 僅用於圖像。

您需要做的就是安裝並激活Optimole。 Voilà – 您的圖像將以創紀錄的時間顯示。

對於一些更複雜 – 也更好 – 的CDN解決方案,請查看我們的其他帖子。

6.懶惰載入

默認情況下,WordPress軟體會平等對待所有圖像。但是,這顯然是對資源的低效使用,特別是如果您想在WordPress中進行任何圖像優化。

畢竟,頁面底部的圖像要比頁面頂部的圖像晚得多才能看到 – 第一張圖像是否值得優先?

優先處理圖像正是延遲載入所實現的目標。頁面頂部的圖像按優先順序排列,而折頁下方的圖像僅在訪問者向下滾動頁面時載入。這使得延遲載入「及時」相當於網頁載入。

如果你想使用延遲載入來加速WordPress,Optimole會再次幫助你。這個插件的酷炫之處在於它提供了低質量的圖像佔位符功能,即延遲載入中間低質量圖像,直到完整顯示全尺寸圖像。

它也是完全免費的。

給你

最後我們將介紹六個快速提示,它們將幫助您在WordPress中進行圖像優化。如您所見,通過結合其中幾種策略,您可以大大節省圖像的文件大小。您的訪問者會愛上這一點 – 您的網站載入速度會明顯加快!

如果您使用的是Optimole這樣的插件,那麼優化圖像實際上非常簡單,它會自動為您完成所有工作(並且主要是免費的)。

如果您有任何圖像優化問題,請在下面的評論部分分享!

想讓您的網站更快?不要忘記我們關於如何加速WordPress的免費電子郵件課程:

相關文章