如何為您的網站優化圖像並讓它們適用於所有設備(移動設備,桌面設備,平板電腦的響應式圖像)

為什麼還要優化圖像呢?讓我問你一下;你最後一次看到沒有任何圖片的網站是什麼時候? 「從不」將是正確的答案。 ?♂️圖像太重要了。這甚至不是那個令人畏縮的股票照片,沿著你的「10個在線營銷技巧」帖子。圖像可用於多種用途。想想布局,設計元素,徽標,個人資料圖片,還有博客圖片。

坦率地說,如果沒有使用至少一些圖像,你就不能在2019年擁有一個網站。話雖這麼說,圖像並不是一個直截了當的網站所有者。即使撇開使用什麼圖像的挑戰以及在哪裡,也存在從純技術角度展示這些圖像的問題:

  • 如何跨多個設備提供響應式圖像?
  • 如何讓它們在所有這些設備上看起來都很棒?
  • 而且,最重要的是,如何確保它們在適當的時間內載入?

這些是我們今天要回答的問題。以下是有關如何為您的網站優化圖像並使其在所有設備上看起來很棒的終極指南:

如何為您的網站優化圖像並使其適用於所有設備 目錄:

  • ?為什麼要優化網站上的圖像
  • ?♂️如何提供優化的圖像
    • ?選擇正確的格式
    • ?️壓縮圖像
    • ?提供正確尺寸的圖像
    • ?優化Retina和HiDPI屏幕
    • ⌛延遲圖像載入
    • ?通過CDN傳送圖像
    • ?在慢速連接上為用戶提供較小的圖像
  • ?工具工具!
  • ?♂️TL; DR:

?為什麼要聽我們說話?

圖像一直是我們最近的一個重要主題,這是因為我們家族中的一種新工具 – Optimole。

Optimole是一種「一勞永逸」的圖像優化服務和工具。我們認為它是網上最好的解決方案,我們可以證明這一點!但這是另一次的談話。無論哪種方式,多年來,我們已經學到了很多關於如何正確優化圖像的知識。我們希望今天與您分享一些知識。

?為什麼要優化網站上的圖像

除了看起來很棒之外,圖像還消耗大量的磁碟空間和帶寬。更具體地說,圖像占標準網頁大小的30%-85%。

速度測試

這是巨大的 – 而且它不像刪除圖像是一種選擇 – 所以我們可以做的最好的事情是學習如何以簡單佔用更少磁碟空間的方式優化圖像。

收益可能很大,特別是在處理重複圖像時 – 需要在每個網頁上載入的圖像。這些是背景,設計元素,徽標,圖標等。有時只優化一個背景圖像可能會導致頁面大小減少70%+。

看這個例子:

優化圖像之前和之後的頁面大小比較

但堅持下去,情況會變得更糟!如果一般圖像性能的掙扎還不夠,還有移動領域,它帶來了一系列全新的挑戰:

首先,您可能不應該向桌面訪問者和移動訪問者顯示相同的圖像集。環境差異很大 – 這包括屏幕尺寸,方向(通常是縱向)甚至是閱讀者的心態。

此外,數據表明,圖像較少的移動設計往往在轉換方面表現更好。

總而言之,在跨多個設備提供響應式圖像時,我們需要注意一些事項:

  • 首先,優化該特定設備的圖像
  • 確保將圖像壓縮到最大可接受水平,以確保最快的載入時間
  • 考慮設備和屏幕顯示最佳圖像數量

?♂️如何優化圖像並在所有設備類型中提供圖像

最佳地處理圖像然後儘快傳送給訪問者有幾個組件。在本指南中,我們將詳細介紹它們:

?選擇正確的格式

讓我們從古老的問題開始:PNG或JPG?

大多數人都說「JPG一直都是!」但這並不是真的正確:

PNG與JPG

是的,大部分時間,或者至少在我們可能需要圖像的最常見場景中,JPG佔用的磁碟空間更少,因此帶寬也更少。

但這裡的關鍵詞是「最常見的場景。」事實上,如果你擁有的是一個複雜的圖像,有很多顏色和顏色過渡(也就是很多「顏色信息」),那麼JPG確實會是更好。想想標準照片。那些作為JPG更好地工作。

但是,如果你有一個更簡單的圖像,PNG將一直贏。

請考慮以下示例。這是四個圖像:

image-2-a「width =」2952「height =」1152「class =」size-full wp-image-50470「style =」 -  webkit-box-shadow:0px 0px 8px 2px rgba(0,0,0, 0.5);  -  moz-box-shadow:0px 0px 8px 2px rgba(0,0,0,0.5); box-shadow:0px 0px 8px 2px rgba(0,0,0,0.5);「srcset =」https: //mk0codeinwp10tp0961a.kinstacdn.com/wp-content/uploads/2019/08/image-2-a.jpg 2952w,https://mk0codeinwp10tp0961a.kinstacdn.com/wp-content/uploads/2019/08/image-2 -a-300x117.jpg 300w,https://mk0codeinwp10tp0961a.kinstacdn.com/wp-content/uploads/2019/08/image-2-a-768x300.jpg 768w,https://mk0codeinwp10tp0961a.kinstacdn.com/wp -content / uploads / 2019/08 / image-2-a-1024x400.jpg 1024w,https://mk0codeinwp10tp0961a.kinstacdn.com/wp-content/uploads/2019/08/image-2-a-60x23.jpg 60w 「sizes =」(最大寬度:2952px)100vw,2952px「>圖像2-a:JPG <img loading=

  • 圖像1-a是312 KB
  • 圖像2-a是196 KB
  • 嘗試猜測其他兩個圖像的大小……

    你的答案:

    錯誤!

    • 圖像1-b是1.3 MB(你可能已經猜到了)
    • 圖像2-b是106 KB(等等,什麼?!)

    正如您所看到的,PNG贏得了簡單的低色彩信息圖像。

    想想界面截圖,簡單插圖等等。

    ?第1課:

    不要總是去JPG。根據內容預測圖像的大小,然後使用正確的圖像類型。

    現在再問一些問題:SVG? WebP的?

    SVG和WebP

    SVG和WebP在網路上是一種不那麼常見的圖像類型,但只要你使用它們它們就應該使用它們都很棒。讓我澄清一下:

    • SVG是一種基於XML的矢量圖像格式。可以在簡單的XML文件中定義圖像的內容 – 與用於其他基本數據處理目的的XML文件相同。這使得SVG成為一種很好的格式,只要你處理一個簡單的矢量圖像。
    • WebP是Google的新格式。他們吹噓WebP的尺寸比同類JPEG小25-34%,比同類PNG小26%。

    那捕獲的是什麼?您可以通過將圖像全部轉換為SVG和WebP來優化圖像嗎?

    首先,SVG。基本上,只有在(a)圖像可以有效地保存為SVG時才使用SVG,以及(b)如果你不介意人們使用SVG並修改它。

    正如我所說,SVG是基於XML的,這意味著修改SVG圖形非常容易。這並不總是您想要的 – 特別是在處理您的品牌徽標或其他關鍵圖形時。

    在大多數情況下,SVG不是您經常使用的格式。

    現在,進入WebP。格式很棒,在大多數情況下,它確實可以像承諾的那樣節省大量磁碟空間。看看這兩個示例圖像:

    jpg圖片示例
    webp圖片示例

    • 原始JPG版本是204 KB
    • WebP是58 KB

    訣竅是並非所有瀏覽器都支持WebP。實際上,您甚至可能看不到我上面使用過的WebP圖像。在撰寫本文時,WebP可在Google Chrome,Firefox,Edge和Opera中使用。當然,舊版本不支持該格式。

    這在實踐中意味著添加WebP圖像並不像添加JPG或PNG那樣簡單。

    我的意思是,從技術上講,你可以像這樣使用一段代碼:

    …但如果用戶的瀏覽器不支持該格式,他們會看到熟悉的破碎圖像圖標。

    要有效地使用WebP,您應該提供後備圖像。例如:

    這意味著要做更多的工作。想像一下,每次要將WebP圖像添加到博客帖子或頁面時都必須構建類似的標記。讓我在那裡阻止你,不,WordPress本身不支持WebP,所以你確實必須手動完成。

    儘管如此,我還是建議您在處理網站中多個頁面上顯示的圖像時使用這種複雜的手動WebP路徑,或者圖像尺寸很大,並且您需要使用每種工具以某種方式減小該尺寸。

    您可以在Photoshop中將圖像保存為WebP,或使用XnConvert(免費)等工具。

    ?第2課:

    如果要快速優化圖像,請不要費心使用SVG。你浪費時間創造它們的時間不會得到回報(儘管可以不同意;這是一個很好的替代方案)。 PNG的使用速度要快得多,磁碟空間消耗也不會太差。

    處理多個頁面上出現的圖像或足夠大的圖像時,請使用WebP。除非您可以自動處理WebP處理,這可以通過一些其他工具來完成。在這種情況下,無處不在使用WebP。我們將在一秒鐘內討論這個問題。

    ?️壓縮圖像

    圖像壓縮就像魔術一樣。讓我演示給你看:

    這是相同的JPG圖像,僅保存在不同的壓縮級別(通常稱為質量級別):

    浣熊,100%100%的質量 浣熊,95%95%的質量 浣熊,85%85%的質量 浣熊,50%50%的質量

    如果你和大多數人一樣,那麼前三個看起來和你一樣。第四個開始看起來「有點糟糕。」(右鍵單擊和「在新標籤中打開圖像」)

    這是每個圖像佔用多少磁碟空間:

    • 100%質量:969 KB
    • 95%:439 KB
    • 85%:186 KB
    • 50%:102 KB

    巨大的,對吧?!只需將壓縮率從100%更改為95%,就可以從大約1 MB到大約500 KB,質量沒有明顯下降。

    這種JPG壓縮可以通過各種工具相當自動地處理,這是個好消息。但是,並非所有圖像都是相同的,所以有時您可能會在看起來很糟糕的圖像旁邊看到好看的圖像,即使它們經歷了相同的壓縮過程。

    總的來說,你可以在這裡實現一個飛躍,並大幅降低JPG的質量。問題的真相是,您的網站訪問者並不關心到處都是清晰的圖像。

    好的,我應該澄清一下;是的,當你想向他們展示一些東西 – 比如一張內容的關鍵圖像,例如產品圖片,酒店房間照片 – 那麼肯定的是,那些應該是清晰的。

    但在其他方面,你可以更放鬆一點。例如,背景不需要100%清晰。通常,訪問者不直接參与的所有圖像的質量都可能較低。

    我最喜歡的兩個可以幫助你的工具是:

    用於在Mac上進行桌面壓縮的ImageOptim。您只需從桌面抓取圖像,將其拖放到ImageOptim上,然後該工具就可以完成它的魔法並在完成後覆蓋源圖像。

    然後,您可以獲取該圖像並將其正常上傳到您的網站。

    ImageOptim  - 優化桌面圖像的絕佳工具

    第二個工具是Optimole。這個工具幾乎重新定義了如何在網站上處理圖像。出於本討論的目的,我們只想說,當您想要優化媒體庫中的圖像時,它確實非常有效。

    optimole  - 優化雲中圖像的好工具

    現在進入PNG。就像JPG一樣,PNG也可以被壓縮。但這一次,質量損失並沒有下降。可以使用無損演算法有效壓縮PNG。

    換句話說,永遠壓縮你的PNG!

    看看這三張圖片:

    kwf-2「width =」2550「height =」1082「class =」aligncenter size-full wp-image-50482「style =」 -  webkit-box-shadow:0px 0px 8px 2px rgba(0,0,0,0.5 );  -  moz-box-shadow:0px 0px 8px 2px rgba(0,0,0,0.5); box-shadow:0px 0px 8px 2px rgba(0,0,0,0.5);「srcset =」https:/ /mk0codeinwp10tp0961a.kinstacdn.com/wp-content/uploads/2019/08/kwf-2.png 2550w,https://mk0codeinwp10tp0961a.kinstacdn.com/wp-content/uploads/2019/08/kwf-2-300x127。 png 300w,https://mk0codeinwp10tp0961a.kinstacdn.com/wp-content/uploads/2019/08/kwf-2-768x326.png 768w,https://mk0codeinwp10tp0961a.kinstacdn.com/wp-content/uploads/2019/ 08 / kwf-2-1024x434.png 1024w,https://mk0codeinwp10tp0961a.kinstacdn.com/wp-content/uploads/2019/08/kwf-2-60x25.png 60w「sizes =」(最大寬度:2550px) 100vw,2550px「>   <img loading=它們看起來一樣,但它們實際上佔用了:

    • 346 KB
    • 215 KB
    • 100 KB

    試著猜猜哪個是哪個。

    壓縮圖像並縮小圖像的三種工具:

    • ImageOptim了。但是這個花了很多時間使用PNG,所以如果你要處理很多PNG,你可能想在工具工作時自己做一杯咖啡。
    • ImageAlpha。比ImageOptim快得多。這是我的PNG桌面解決方案。
    • Optimole。不出所料,Optimole也處理PNG壓縮。一切都發生在自動駕駛儀上。

    ?第3課:

    壓縮JPG以達到可接受的質量水平與磁碟空間。

    始終壓縮您的PNG。

    ?提供正確尺寸的圖像

    這可能是整個「響應式圖像」謎語中最關鍵的方面。我們知道,那裡有數十種甚至數百種不同的屏幕尺寸,我們必須確保我們的圖像在所有圖像上看起來都很棒。

    簡單的解決方案?服務大圖…它可以隨時縮小,對吧?從技術上講,這是正確的,但在實踐中,這將浪費大量帶寬,並使您的網站在大多數設備上載入速度非常慢。

    更好的解決方案是將所有圖像縮放到最常用設備所需的正確尺寸,然後相應地提供它們。

    正如您所料,您需要同一圖像的不同版本才能實現此目的。

    解決此問題的方法之一是從您的​​設計的基本寬度和可以使用的最大圖像大小開始,然後從那裡縮小一些常見的設備和斷點。

    例如,大多數網站的內容塊寬度不超過11​​00 px標記,因此您可以假設在這種情況下可以顯示的最大圖像寬度也是1100像素。

    然後,您可以創建800 px和550 px(常用值)的斷點,以涵蓋平板電腦和移動方案。雖然這不會在所有設備上提供100%完美的效果,但您至少可以在合理的範圍內進行優化並保持圖像的控制。

    有了這個,你現在必須創建一些你想在你的網站上使用的每個圖像的不同版本。

    以下是如何處理實際顯示代碼的示例:

    srcset屬性的神奇之處在於瀏覽器會查看其中的內容,然後根據所使用的設備選擇最佳圖像。

    您可以在上面看到的另一個自定義是sizes屬性。這個告訴瀏覽器圖像在某些屏幕上應該如何表現。在這種情況下,當在大於1100像素的視口上查看時,圖像將為1100像素,而在較小的設備上,它將佔據整個視口。

    這種解決方案可確保圖像不佔用整個3840px寬的4K屏幕。但是,在移動設備上查看時,它仍會佔據整個屏幕。

    有效使用sizes屬性是您如何使圖像真正響應。

    ⭐專業技巧:選擇尺寸比所需尺寸小10%的圖像,然後讓瀏覽器將它們放大。這將為您節省一些額外的空間和帶寬。例如,如果您需要500×500像素的圖像,則可以將圖像縮放到450×450像素,然後讓瀏覽器將其縮放到500.這取決於圖像,但在大多數情況下,用戶不會注意到。

    ?第4課:

    為您的設計使用正確的圖像尺寸。

    創建斷點。

    創建同一圖像的多個版本以覆蓋斷點。

    顯示圖像時使用srcset和sizes屬性。

    ?優化Retina和HiDPI屏幕的圖像

    圖像維度譜的另一端是關於HiDPI友好的圖像。

    故事是桌面屏幕越來越大,它們的像素越來越密集。如今將4K屏幕打包到15英寸筆記本電腦中並不罕見。 4K解析度為3840×2160像素,因此每個像素都必須非常小。

    這會給網站帶來問題。基本上,如果您的站點被定義為1100 px寬,那麼在正常情況下,它只佔用4K屏幕可用屏幕空間的大約25%。這不是最佳選擇。幸運的是,事情並不像那樣。

    為了避免這個問題,那些高解析度的屏幕就好像它們的大小一半(我過於簡單,但是聽我說)。因此,不是你的1100 px寬的網站佔據了HiDPI屏幕的一小部分,它的規模擴大了一倍,佔用了2200像素並且更好地填滿了屏幕。

    這個過程允許屏幕變得更清晰和銳利,而不會使過程中的一切看起來很小。

    然而,這種做法並非沒有缺點。首先,你的圖像受到了巨大的打擊。文本很容易擴展而不會降低質量。字體不受縮放影響。圖像不是。直接的結果是,每個尚未為HiDPI屏幕做好準備的圖像看起來都會模糊不清!

    要解決此問題,您必須為每個縮放比例提供縮放圖像。這是一些簡單的代碼:

    (如果瀏覽器不支持srcset,將使用標準的src。)

    現在,當我說「縮放圖像」時,我實際上意味著你應該從另一端開始。從一個巨大的圖像開始(將其標記為3x),然後將其縮小並使其縮小(至2x),最後使其成為1x並將其用作默認圖像。

    ?第5課:

    確保您的帖子和頁面中使用的徽標,品牌圖像和所有圖像都已準備好用於HiDPI屏幕。

    ⌛延遲圖像載入

    這原則上很簡單;應立即載入所有位於首屏上方的圖像(在頁面載入時)。其他所有內容都可以延遲使用,甚至可以「延遲載入」。

    延遲載入是按需載入圖像。即,圖像在用戶需要之前僅在一瞬間載入 – 不是更早,而不是更晚。那個「不早,不遲」的部分是關鍵。

    在理想情況下,圖像應在滾動到視口之前載入。這意味著,用戶不應該在圖像出現之前看到佔位符。如果發生這種情況,他們可能會滾動傳遞圖像而不會及時載入 – 這不是優化圖像的好方法。

    話雖這麼說,延遲載入在WordPress網站上很容易做到。您可以使用JavaScript / jQuery延遲載入,如果您願意,您甚至可以自己編寫代碼。或者,你可以獲得像a3 Lazy Load這樣的插件,或者你可以使用Optimole,它包含一個延遲載入模塊。

    ?第6課:

    懶惰載入低於首屏的圖像。

    ?通過CDN傳送圖像

    內容分發網路就像網站速度的作弊代碼。你是在作弊,因為你沒有那麼多讓你的網站更快,因為你告訴別人負擔並將網站的數據傳遞給訪問者。

    ?我們在這裡更深入地討論了CDN,請查看。

    TL; DR是CDN利用所有伺服器網路,這些伺服器都擁有您站點的副本,然後從最近的可用位置將其傳遞給訪問者。這總是比從主伺服器提供的更快。

    圖像CDN的工作方式幾乎相同,但它們只關注,你已經猜到了,圖像。

    大多數情況下,從您的角度來看,操作是無縫的。您網站上的所有圖片都會被其CDN託管版本替換(意味著圖片網址會發生變化)。

    • Jetpack有一個流行的圖像CDN內置。你可以免費使用它,這是偉大的。主要限制是它僅適用於帖子,頁面和特色圖像中的圖像。它不適用於構成您的設計的任何圖像(主題,布局等部分)。那些是可以真正使用某些CDN的圖像。
    • Optimole內置了CDN作為主要圖像優化功能的一部分。這個不僅限於您的帖子和頁面。

    ?第7課:

    將您的站點連接到圖像CDN(Jetpack或Optimole)或一般CDN(MaxCDN / StackPath)。

    ?在慢速連接上為用戶提供較小的圖像

    在決定用戶應該看到什麼類型的圖像時,不僅屏幕尺寸很重要。可能更重要的是,如果他們的互聯網連接速度很慢,他們真的不想等待10秒才能載入圖像。

    在這些情況下,降低圖像質量以換取載入時間會更好。較慢連接的用戶會欣賞他們可以看到圖像。

    您可以通過使用網路信息API來實現這一點。如果您想手動實現它,這裡有一個很酷的教程,說明它是如何工作的。

    如果你更喜歡在自動駕駛儀上進行處理,那麼,Optimole!

    ?第8課:

    在較慢的互聯網連接上為用戶提供更小,更壓縮的圖像。

    ?工具工具!

    在此過程中,我提到了許多可用於提高網站圖像傳輸效率的工具。以下是這些摘要:

    • Optimole – 讓您自動優化圖像,壓縮圖像,為訪問者的視口選擇正確的圖像大小,通過CDN提供圖像,延遲載入圖像,以較慢的連接速度工作。
    • ImageOptim和ImageAlpha – 在Mac上處理桌面圖像壓縮。你可以在Win上使用TinyPNG。在將圖像上傳到您的網站之前執行此操作
    • XnConvert – 允許您將圖像轉換為WebP。
    • a3 Lazy Load插件 – 延遲載入所有圖像。
    • Jetpack插件 – 附帶免費圖像CDN。
    • MaxCDN / StackPath – 一個普通的CDN,可以處理整個站點,而不僅僅是圖像。

    優化圖像的工具

    ?進一步閱讀:

    • Imagify vs WP Smush vs ShortPixel vs Optimole:哪個最適合優化WordPress圖像?頭對頭比較
    • 博客的免費圖像 – 如何有效地使用它們(警告!非顯而易見的建議,數據支持)
    • 11種加快WordPress性能的方法
    • 網站速度優化:2019年如何做到這一點
    • 最快的WordPress主機 – 初學者的指南找到一個

    ?♂️TL; DR:

    以下是上述所有相關課程的摘要:

    第1課:

    不要總是去JPG。根據內容預測圖像的大小,然後使用正確的圖像類型。

    第2課:

    如果要快速優化圖像,請不要費心使用SVG。你浪費創造它們的時間不會得到回報(儘管可以不同意)。 PNG的使用速度要快得多,磁碟空間消耗也不會太差。

    處理多個頁面上出現的圖像或足夠大的圖像時,請使用WebP。除非您可以自動處理WebP處理,這可以通過一些其他工具來完成。在這種情況下,無處不在使用WebP。我們將在一秒鐘內討論這個問題。

    第3課:

    壓縮JPG以達到可接受的質量水平與磁碟空間。

    始終壓縮您的PNG。

    第4課:

    為您的設計使用正確的圖像尺寸。

    創建斷點。

    創建同一圖像的多個版本以覆蓋斷點。

    顯示圖像時使用srcset和sizes屬性。

    第5課:

    確保您的帖子和頁面中使用的徽標,品牌圖像和所有圖像都已準備好用於HiDPI屏幕。

    第6課:

    懶惰載入低於首屏的圖像。

    第7課:

    將您的站點連接到圖像CDN(Jetpack或Optimole)或一般CDN(MaxCDN / StackPath)。

    第8課:

    在較慢的互聯網連接上為用戶提供更小,更壓縮的圖像。

    讓我知道您對儘可能優化網路圖像的整體挑戰的看法。另外,你對圖像做了什麼讓它們載入更快?分享評論。

    不要忘記加入我們的速成課程,以加快您的WordPress網站。通過一些簡單的修復,您可以將載入時間減少50-80%:

    Karol K的布局,演示和編輯。

    *此帖子包含會員鏈接,這意味著如果您點擊其中一個產品鏈接然後購買產品,我們將收取少量費用。不過不用擔心,您仍然需要支付標準金額,因此您無需支付任何費用。

    相關文章