哪種圖像格式最適合您的 WordPress 網站

已發表: 2022-04-21

在您的 WordPress 網站上擁有引人入勝、清晰且快速加載的圖像是吸引用戶/客戶的最有效方式之一。汽車經銷商花費大量時間確保新車型一塵不染和閃閃發光是有原因的。 產品的視覺影響通常可以決定成敗之間的成敗。 在線陳列室也不例外,此外還有圖像如何影響加載速度的複雜性。 這是一個使用廣泛且著名的指標,如果加載時間超過 3 秒,用戶將離開網站。 如果一個網站的加載時間確實超過了 3 秒,那麼您網站上的圖片很可能是該原因的一部分。

因此,作為 WordPress 網站所有者,您可以做些什麼來確保您網站上的圖片既能吸引用戶又能讓您的網站快速加載。 您最初的直覺可能只是將圖像從 1800×1400 大小的圖像縮小到 300×200 大小的圖像。 這將是錯誤的做法,因為雖然您的圖像文件大小現在可能要小得多,但圖像質量和用戶體驗會因此受到影響。 例如,如果您有一個汽車陳列室銷售網站,客戶將希望能夠很好地了解汽車並能夠看到所有功能和細節。 通過使圖像變得如此之小,現在不可能對汽車進行任何詳細檢查——這讓潛在客戶感到沮喪並轉向別處。

那麼你有什麼選擇呢? 值得慶幸的是,您可以選擇數十種不同的圖像文件選項,從高質量但大文件大小的 BMP、久經考驗的 JPEG 到廣為人知的新 WebP 格式。 除了選擇正確的格式外,重要的是要記住,無論您選擇哪種格式,您都可以通過WP-Optimize使用稱為“壓縮”的過程來額外減小圖像文件的大小。

網站速度是爬取您網站的谷歌機器人在搜索結果中對您的網站進行排名時觀察到的十大最重要因素之一。 加載速度不佳會嚴重影響您網站的排名,並且很容易將您的網站從首頁帶到無法被 Google 索引。 谷歌對他們如何在搜索算法中對網站進行排名非常嚴格,如果他們發現該網站由於加載時間慢而提供了糟糕的用戶體驗,他們甚至可能不會費心去爬它並通過谷歌搜索發現它.

您應該選擇哪種圖像格式?

由於高質量的圖像對於任何現代 WordPress 網站都非常重要,因此您需要知道要使用哪種格式、它們如何影響您的網站性能以及如何充分利用您的文件選擇。

兩種最流行的網站圖像文件格式是 PNG 和 JPEG/JPG。 w3techs 稱,超過 70% 的網站使用這些文件類型。 大約 30% 的網站使用 SVG,22% 使用 GIF。

這是圖像文件類型發揮作用的地方,因為您用於上傳圖像的文件類型起著重要作用。 由於有很多不同的文件類型,我們將在下面介紹最受歡迎的文件類型及其優缺點:

在我們進入文件類型之前,我們需要先了解一些概念,比如什麼是光柵圖像和位圖圖像? 什麼是壓縮? 有損壓縮和無損壓縮有什麼區別?

壓縮——有損與無損

這兩種壓縮類型都旨在減少文件大小,但真正重要的是它們刪除的內容。 在有損壓縮中; 刪除與圖像質量相關的重要數據。 在某些情況下,這可能會反映在被像素化的圖像中,因為您的計算機可能無法重建圖像。

在無損壓縮中,圖像中存在的不相關數據(例如元數據)被減少,這有助於減小文件大小。 在此過程中,圖像質量完全不受影響。

光柵與矢量

最常用的圖像文件類型通常是基於光柵的。 這意味著它們具有與每個像素相關聯的固定 RGB 顏色值,並且所有這些像素被組合併用於創建整個圖像。

此類文件格式的示例包括 jpg、png 和 gif。

或者,使用可以無限縮放而不會被像素化的形狀和線條創建矢量圖像。 矢量是使用數學公式創建的,允許用戶更改值,同時不影響圖像的質量。

現在我們已經了解了圖像的基礎知識,現在可以查看不同文件類型的詳細信息。

JPEG:

這是一種包含壓縮圖像數據的數字圖像格式。 使用 10:1 壓縮比的 JPEG 圖像非常緊湊。 JPEG 格式包含重要的圖像細節,是互聯網上共享照片和其他圖像的最流行的圖像格式。 JPEG 圖像的小文件大小還可以讓用戶存儲數千張圖像(例如在藝術網站上),而無需在您的網站上增加額外的存儲空間。

JPEG 是一種適用於照片的有損壓縮文件類型,但建議您在處理圖形時使用另一種格式,例如 PNG。

JPEG 圖像文件示例。 上傳時可以看到細節和質量都得到了保持。

PNG:

PNG 是一種流行的位圖圖像格式,是“便攜式圖形格式”的縮寫。 此格式是作為圖形交換格式 (GIF) 的替代格式而創建的。 PNG 有一些很棒的功能,例如包含 24 位 RGB 調色板、灰度圖像和顯示透明背景。 在處理高質量圖像或圖形時,無損數據壓縮方法也用於 PNG 圖像。 PNG 圖像也經常用於圖像編輯,因為它們可以為用戶提供比傳統 JPEG 格式更多的圖像控制和選項。

PNG 還使用無損壓縮算法,這意味著這種格式可以保留比 JPG 更多的數據。 使用 PNG 圖像文件時,用戶還可以將這些圖像保存為透明背景。 通過使用這種格式,用戶可以選擇使用可以顯示清晰背景的分層圖像(例如 - 僅下圖中的花朵而不是背景牆),使用戶無需將圖像添加到其他圖像中將其剪掉並移除現有背景——就像使用 JPEG 圖像一樣。 這是為什麼它是圖表和插圖等圖形的首選的主要原因之一。 眾所周知,PNG 更受使用圖形的用戶歡迎,而不是上傳標準照片。

PNG圖像保持高質量,同時還允許您更好地控製圖像

動圖:

您可能從在消息應用程序上發送的無數短片中最了解“GIF”一詞。 GIF 代表“Graphics Interchange Format”,主要用於支持沒有音頻的動畫

與 JPEG 和 PNG 不同,GIF 用於更小眾的情況,通常不用於靜態圖像(儘管這是可能的)。 如果您在 WordPress 網站上使用 GIF,很可能是為了向訪問者展示簡單的動畫或流程。 GIF 的顏色範圍有限,最適合用於簡單的圖形。 它們使用無損壓縮,並且往往比 JPG 小。 通常建議您僅在您的站點中謹慎使用 GIF,因為它們會增加加載時間(考慮到文件大小)並且限制為 256 種顏色。

GIF 圖像的示例。 為了製作動畫,大大降低了原始圖像的質量。

SVG:

可縮放矢量圖形 (SVG) 是一種網絡友好的矢量文件格式。 與 JPEG 等基於像素的光柵圖像文件不同,矢量文件通過基於網格上的點和線的數學公式存儲圖像。 這意味著像 SVG 這樣的矢量文件可以在不損失任何質量的情況下顯著調整大小,這使其成為徽標和復雜在線圖形的理想選擇。

矢量僅適用於簡單的圖形、形狀和插圖。 SVG 是徽標的不錯選擇,特別是如果您需要您的徽標具有響應性並且大多數瀏覽器都支持,包括 Chrome、Firefox、Edge 和 Opera。

用於徽標的 SVG 格式向日葵示例。

BMP:

BITMAP 現在被認為是一種過時的圖像格式。 BMP 以無損圖像格式加載圖像,由於缺乏壓縮,這可能導致文件很大。 考慮到加載速度的重要性以及網站創建者希望如何將圖像大小保持在最低限度(更不用說 SVG 和 JPEG 格式的流行),這種格式在很大程度上已不再用於在線圖像。

以 BMP 格式上傳時,圖像的原始質量保持不變,但文件大小會嚴重降低您的網站速度,不推薦使用。

網頁版:

這種圖像格式由 Google 於 2010 年創建,並開始受到向其網站上傳大量圖像的人的歡迎,因為它與 JPEG 和 PNG 相比具有多個優勢,例如具有更好的有損和無損壓縮性能。

鑑於 WebP 改進的壓縮性能,它通常還以比 JPEG 或 PNG 格式更小的文件大小上傳,並且將佔用您網站上的更少空間 - 使其加載速度更快。 雖然並非所有瀏覽器都支持它,但所有最流行的瀏覽器都支持它——包括 Chrome、Firefox、Edge 和 Opera。

儘管不如 JPEG 和 PNG 那樣廣為人知,但 WebP 可能會成為未來首選的圖像格式。

結論:

可以在您的 WordPress 網站上使用多種類型的圖像格式,但重要的是評估圖像的用途。 例如,如果您的網站是為婚禮攝影師設計的,您將希望保持高質量的圖像,這些圖像仍然可以快速加載並且用戶友好 ( JPEG )。 但是,如果您在在線海報商店銷售圖像,那麼您將希望保留盡可能多的細節和圖像信息 ( PNG )。

作為一般經驗法則,如果您只是為您的在線商店、博客、投資組合、社交媒體或社交媒體網站上傳標準圖像,那麼建議您以標準 JPEG 格式上傳圖像,然後使用 WP-Optimize進一步壓縮您的圖像

但是,如果您希望圖像適應未來並儘可能提高加載速度,那麼 WebP 可以提供卓越的有損和無損壓縮,同時仍保持高水平的細節。 無論您決定什麼,請記住始終使用 WP-Optimize 壓縮您的圖像,以實現市場領先的壓縮。