在不損失質量的情況下優化 Web 圖像的 5 個技巧

古老的短語“一張圖描繪一千個字”經常用於營銷企業，以說明圖像對成功銷售產品的重要性。 這是因為，客戶在很大程度上依賴於產品插圖（以了解產品的質量、顏色和其他規格）而不是書面內容。 您的網站訪問率可能會急劇上升或下降，具體取決於其圖像的質量。 因此，不言而喻，您在網站中提供的圖像應該是高分辨率和清晰的。 但是，有一個問題。

不正確導出的低質量圖像往往在網頁上看起來很單調，而質量極高的圖像會導致網站加載緩慢，因此，在這兩種情況下，您最終都會失去用戶的參與度。 研究表明，如果網站加載時間超過 3 秒，53% 的人會離開移動網站。 加載時間過長的網站也往往會受到高跳出率的影響，最終導致谷歌討厭你的網站。 反過來，這會在很大程度上影響您的 SEO 排名。

因此，如您所見，為了提高您的對話率，並保持您的 SEO 排名以及網站的性能，減少頁面加載時間至關重要。 由於圖像佔網站加載時間的很大一部分。 在圖像質量和圖像文件大小之間找到完美平衡以改善網站加載時間並進而改善 SEO 變得至關重要。

您可以使用某些技巧和技術來優化您的網絡圖像，這樣那些空白區域和加載緩慢的高清照片就不會讓您的訪問者失望地轉身離開。 看看這五種優化圖像的一流方法，以確保每個圖形都漂亮、清晰、賞心悅目。

1.將圖像保存在適當的色彩空間中

計算機使用兩種顏色空間來顯示圖像； RGB 和 CMYK。 RGB 代表紅色、綠色和藍色，是相機和計算機等數碼設備使用的默認色彩空間。 除此之外，您還會遇到另一種顏色配置文件 CMYK（代表青色、品紅色、黃色和黑色），通常用於打印機。 如果您想將這些圖像用於您的網站，則必須將顏色轉換為 RGB，以使圖像看起來生動明亮。

您可以使用 Illustrator 或 Adob​​e Photoshop 等軟件將 CMYK 圖像轉換為 RGB。 例如，如果您的系統上安裝了 Photoshop，只需轉到菜單欄中的“圖像”選項，然後選擇下拉菜單“模式”並選擇 RGB 顏色。 然後訪問文件部分以保存文件。 完成編輯後，您會立即註意到顏色看起來更有光澤和活力。

2.壓縮文件大小

圖像質量很大程度上取決於最終文件大小和壓縮設置等因素。 此外，您還需要確保圖像清晰且沒有像素化。 將圖像從 Web 中保存時，請確保文件大小小於 2MB（2048 KB），以保持快速的頁面加載速度。

使用正確的壓縮設置，您將能夠獲得良好的圖像質量以及最佳的文件大小。 一般來說，為避免像素化，您可以嘗試以 70-80% 的圖像壓縮級別或單個色點保存文件。 但是，您必須記住，壓縮量會因涉及原始圖像格式和文件大小的許多因素而異。 如果您想進一步壓縮文件大小，可以使用 Imagify 等免費工具。

3.使用正確的文件格式

主要有四種主要的文件類型可用於保存 Web 中的圖像和圖形：PNG、GIF、JPG 和 SVG。 這些格式中的每一種都有其缺點、優點和預期的用例，在開始格式化這些圖片之前，您需要了解特定的圖像類型。

首先，您必須檢查您的文件是光柵圖像還是矢量圖像，並相應地保存文件。 光柵圖像通常使用基於像素的程序創建的相機或掃描儀捕獲。 這些類型的圖像具有有限數量的像素，當您嘗試將其縮放為更大的格式時，它們的質量很快就會下降。 最適合光柵圖像的 PNG、JPEG 和 JPG 格式。

另一方面，矢量圖形是使用矢量軟件創建的，並且可以無限放大（也不會損失質量）。 SVG 和 GIF 文件格式最適合矢量圖像，同時也可以保存為 JPG 或 PNG。 但是，在後一種情況下，您可能會失去無限縮放圖形的能力。

4.導出多種圖片尺寸

由於移動設備的屏幕分辨率高於典型的台式計算機，因此用戶大多更喜歡使用移動設備來查看數字內容。 當大多數台式計算機的標準是 72 PPI 時，這些採用 HiDPI、Retina 技術的高密度顯示器具有超過 200 像素/英寸 (PPI)。 如果有人在他們的移動設備上查看 72 PPI 的圖像而不是在計算機上查看，與保存更多像素的圖像相比，它看起來不會那麼清晰。

這是確保您的圖片質量適合移動設備和桌面瀏覽器的有效方法：

以@2x 和@3x 比例導出圖像，即圖像的修訂版本將是 2x (200%) 或 3x (300%)

原始大小。 這將允許用戶移動網絡瀏覽器在同一空間內自動以原始尺寸的 2 倍或 3 倍顯示圖像。

5. 使用替代文字描述圖片來源

替代文本，也稱為替代文本或替代屬性，是用 HTML 代碼編寫的短語，提供有關圖像來源的信息。 谷歌將 alt-text-images 置於相對較高的價值，因為這些圖像不僅服務於取悅觀眾的基本目的，而且因為它在您的網站 SEO 優化中起著至關重要的作用。 這是因為您有機會在 SEO 關鍵字中包含文本和短語，從而在 Google 中獲得高排名。 例如，沒有 alt 文本的 HTML 代碼顯示為 https://pexels.com/photo/dog
而當包含替代文本時，它顯示為

<img src=http://pexels.com/photo/dog.jpg alt=“dog-play-in-the-stairway”>

這些替代文本對於有視覺障礙的網站讀者也很有用。 屏幕閱讀器會大聲朗讀這些替代文本，並解釋圖像的含義以及圖像在頁面上的功能。 它還可以幫助互聯網連接速度較慢的用戶了解照片的背景，並降低您在此過程中的跳出率。

還有各種在線平台，如 compressPNG.com、Smush.it、webresizer.com 等，您可以使用它們來優化您的網站圖像，而不會對圖像質量造成太大影響。

好像很麻煩，何必呢？

好吧，如前所述，大圖像對網站加載時間的影響將不利於您的增長。 除此之外，您還需要考慮以下影響，

 Google 將懲罰數據量大、速度慢的網站，使其在 SERP 結果中的優先級較低。

 大圖像佔用大量服務器空間，最終會花費您更多的錢。

 網頁越大，用戶查看和添加跳出率所需的數據就越多（因為移動數據限額受限的用戶會懷疑在您的網站上停留的時間過長）

在我看來，圖像優化主要是尊重您的網站用戶。 您的觀眾一定會欣賞流暢而快速的體驗，並且更有可能一次又一次地返回您的頁面。 當然，谷歌會讚賞它，因為快速加載、移動友好的網站受到搜索引擎的高度青睞。

不用說，您的壓縮級別會根據圖像的複雜程度而不斷變化。 本博客旨在為您提供基本策略，以便您可以在最短的時間內執行必要的優化。 但是，互聯網上有大量可用信息，如果您想增加知識，只需在搜索引擎中輸入“不影響質量的網絡圖像優化”並直接進入。