如何為 Web 優化圖像

一張圖片勝過千言萬語，因為它可以傳達更多信息。在這個數字世界中，大約 64% 的網站（無論是媒體、電子商務、旅遊網站）都有圖像。由於我們人類是視覺生物，而人類大腦的很大一部分專門用於處理圖像。今天的網站利用這個眾所周知的事實來吸引用戶的注意力。但是某些圖片不正確和質量低劣的網站並沒有那麼有說服力。

加載時間超過 3 秒的網站往往會失去用戶參與度，並且 Google 排名較低。因此，如果您的網站缺乏訪問者，那麼您需要優化圖片並遵循以下說明的某些提示：

在我們了解圖像優化之前，讓我們先了解什麼是圖像優化以及為什麼圖像優化很重要。

什麼是圖像優化？

圖像優化是在不損失圖像質量的情況下減小文件大小的過程。這意味著通過保持盡可能小的尺寸，您可以獲得格式、尺寸、尺寸和分辨率正確的高質量圖像。可以通過壓縮大小、調整大小和緩存等不同方式優化圖像。這有助於提高網站性能並提高網頁加載速度。

為什麼圖像優化很重要？

用戶往往會放棄加載時間超過 3 秒的網站，從而增加跳出率，最終影響網站轉化率。但是通過圖像優化可以提高頁面加載速度，可以提高網站的SEO排名，可以增強用戶體驗。

頁面加載速度是網頁完全加載所需的時間。加載時間少於 2 秒的網站最受歡迎和喜愛。因此，在網站排名中起著關鍵作用，使圖像優化變得重要。不僅這種圖像優化還與 SEO 排名和轉換有關。

以下是一些優化 Web 圖像並使頁面加載速度更快的技巧。

1.以適當的配色方案保存圖像

RGB 和 CMYK 主要是計算機用來顯示圖像的兩種配色方案。其中 RGB 代表（紅、綠、藍），CMYK 代表青色、品紅色、黃色和黑色。RGB 是相機、計算機使用的標準色彩空間，CMYK 用於打印。

因此，如果在 Web 上使用 CMYK 圖像，它們會減慢頁面加載速度，而且它們不像 RGB 那樣明亮生動。因此，為了吸引用戶並提高頁面加載速度，將使用 RGB 配色方案圖像。

要將 CMYK 圖像轉換為 RGB，可以使用 Adob​​e Photoshop。更改圖像的顏色配置文件後，應使用另一個名稱重新保存文件，以便輕鬆區分這兩個文件。

另請閱讀：-

10 款適用於 Windows 2021 的最佳圖像轉換器軟件在使用 Windows 時，您可能偶爾會遇到“不支持圖像格式”警報。現在解決這個問題...

2.壓縮圖片文件大小

不應使用大小超過 2MB 的 Web 文件，因為它會降低頁面加載速度。因此，將大小限制為 2MB（2048 KB）是一個好主意。除了用於網站的此圖像不應像素化。這意味著圖像應該清晰，圖像質量應該視情況而定。圖像質量取決於壓縮設置、最終文件大小。通過正確的壓縮設置，可以實現更小的文件大小和良好的圖像質量。

通常，以 70-80% 之間的圖像壓縮級別保存的圖像不會像素化。為此可以使用圖像壓縮工具。

3. 以正確的文件格式保存圖像

有四種主要的文件格式 JPG、PNG、GIF 和 SVG，可以保存圖形和圖像。但是每種文件格式都有自己的優點和缺點。因此，每個圖形或圖像都需要基於光柵或矢量以特定格式保存。

光柵圖像具有有限數量的像素，可以使用基於像素的程序（如掃描儀或相機）捕獲。當放大的光柵圖像質量下降時，最適合光柵圖像的格式是 JPG、PNG 和 GIF。

雖然矢量圖形是使用矢量軟件創建的，但可以在不影響質量的情況下擴展這些圖像。最適合矢量圖像的格式是 SVG 和 GIF。但是矢量圖像也可以保存為 JPG 或 PNG 格式。但是這樣做會使圖像失去無限縮放圖形的能力。

JPG

JPG 的優點

• 最小文件大小
• 最佳高質量圖像
• 與網絡和其他現代設備兼容

JPG 的缺點

• 壓縮時圖像質量降低
• 不支持透明背景

何時使用 JPG

當需要高質量的非運動圖像時，可以使用 JPG。但它們不應該用於彩色背景。

PNG

另一種比 JPG 更通用的光柵格式是 PNG。它可以支持超過 1600 萬種顏色、alpha 通道或透明背景。

另請閱讀：-

如何在不丟失 Mac 上調整圖像大小...將 Mac 的數據傳輸到閃存驅動器？在不損失質量的情況下調整圖像大小，它將節省您的時間...

PNG 的優點

• 提供透明背景以在彩色背景上分層圖像
• 可以在不損失質量的情況下壓縮圖像

PNG的缺點

• 圖像文件大小大於 JPG
• 不支持動畫

何時應使用 PNG

當需要具有非白色背景、文本、銳邊、徽標、圖標和其他設計的圖形時，應使用 PNG 圖形。

動圖

GIF 是另一種光柵格式，它允許通過在彼此之上對圖像進行排序以創建運動來獲得運動圖像。

GIF 的優點

• 可以創建動畫消息和圖像
• 支持透明背景

GIF 的缺點

• 圖像文件的大小和質量與顏色有關。更多的顏色意味著更清晰的圖像，但這會增加文件大小。雖然較少的顏色會使圖像更有顆粒感
• 只能使用 256 色的圖像

什麼時候應該使用 GIF

GIF 允許在同一圖形中顯示多個具有彈性和有趣變化的圖像。但是，具有多種顏色的圖形會增加文件大小。

SVG

與 JPG、PNG、GIF 不同，SVG 是一種矢量格式。它允許在網絡上操作具有清晰圖形的對象。可以使用 Inkscape、Adobe Illustrator和 Sketch等程序編輯和創建矢量圖像。

SVG 的優點

• 更小的文件大小
• 文件可以調整大小而不會失去質量
• 對開發者有幫助
• 像 Adob​​e Illustrator 這樣的程序可用於編輯矢量圖像
• 允許動畫
• Microsoft Office 支持圖形

SVG的缺點

• 圖像文件的大小和質量與顏色有關。更多的顏色意味著更清晰的圖像，但圖像文件較大。更少的顏色會使圖像更粗糙
• 使用只有 256 色的圖像的限制

什麼時候應該使用 SVG

由於 SVG 圖像可以在不損失圖像質量的情況下進行縮放，因此它們可以用於圖形、徽標、圖標和 Web 上的其他插圖。除此之外，這些圖像還可用於移動設備，因為它們在智能手機等高像素密度顯示器上看起來很棒。

另請閱讀：-

從圖像中提取文本的最佳 OCR 軟件考慮將手寫筆記或掃描文檔轉換為組織良好的可編輯文檔？你可以在幫助下做到這一點...

4. 為智能手機顯示器導出多種尺寸

隨著智能手機的流行，用戶希望在他們的移動設備上訪問所有內容。但由於這些設備的顯示超過 200 PPI，而不是正常的 72 PPI，這是 PC 和 Web 的標準。

為了使圖像支持兩種類型的 PPI，可以使用 Adob​​e Illustrator 和 Photoshop。這將有助於導出 2X 和 3X 比例的圖像。這意味著將創建原始圖像以及 200% 和 300%。此外，可以導出更高分辨率的圖像。

5. 將較小的圖像尺寸增加 115%

如果使用較小尺寸的光柵圖像，則需要將它們放大 115% 以減少像素化，以便可以使用 Adob​​e Photoshop。

使用上面提到的技巧，我們可以獲得清晰和聚焦的圖像。由於這些優化的圖像有助於吸引用戶的注意力並使它們在網頁上停留更長時間。它們不僅會使網頁看起來更漂亮，而且還有助於減少頁面加載時間。

圖像優化不僅對網頁有幫助，還有助於存儲圖像並使它們看起來有吸引力。沉重的圖像使用了很多用戶不喜歡的帶寬，因此需要優化圖像。