如何為 SEO 和 Google 的 Pagespeed 優化圖像並改進網絡節省

Question

幾乎在我為所有網站進行的每一次 Pagespeed 測試中，我都會收到評論“通過無損壓縮圖像 X 優化圖像”，這通常會大大提高我的頁面排名。

我已經用 Photoshop 保存了每張圖片，但我想知道如何“通過無損壓縮來優化圖片”。 據我所知，我已經在盡我所能。

真的很納悶。。

^{題外話，但我注意到 Google 的 PageSpeed 使用 Retina 設備進行檢查，因為我所有的 Retina 圖像都被加載而不是常規圖像。 由於這些區域大於我在移動部分獲得 1/100 分的區域。 哈哈。}

Answer 1

這是我很多網站遇到的一個實際問題，但是我使用了免費版本的kraken來“寬松地壓縮”我的所有圖像，並且通過了Google測試，從而提高了排名！

https://kraken.io/web-interface

我一定已經使用了超過10,000張圖像！

Answer 2

您在 Photoshop 和 Illustrator 等程序中創建的圖像看起來很棒，但通常文件大小非常大。 這是因為圖像的制作格式使它們更容易以不同的方式進行操作。 如果您將這些文件放在您的網站上，加載速度會非常慢。 為網絡優化圖像意味着根據圖像包含的內容以網絡友好的格式保存或編譯圖像。

它是如何工作的？ 我們需要了解兩種壓縮形式，有損和無損。

以有損格式保存的圖像在未壓縮時看起來與原始圖像略有不同。 請記住，這只有在非常接近的情況下才能看到。 有損壓縮適用於 Web，因為圖像使用少量內存，但可以與原始圖像足夠相似。

以無損格式保存的圖像保留了生成原始圖像所需的所有信息。 出於這個原因，這些圖像攜帶更多的數據，並且作為回報是非常大的文件大小。

我們還可以通過將圖像保存為適當的尺寸來優化網絡圖像。 使用 CSS 調整網頁本身的圖像大小很有幫助，但問題是網絡瀏覽器仍會下載整個原始文件，然后調整大小並顯示它。

你能想象拍攝一張海報大小的圖像並將其用作縮略圖嗎？ 當我們可以一直加載 20 像素的圖像時，加載 20 像素乘 20 像素的小圖像將花費與原始海報一樣長的時間。

如何優化圖像？

簡單來說，通過刪除圖像中保存的所有不必要的數據來優化您的圖像，以根據圖像在您網站中的使用位置來減小圖像的文件大小。 為網絡優化圖像可以將您的總頁面加載大小減少多達 80%。

圖像的全面優化可能是一門完美的藝術，因為您可能要處理的圖像種類繁多。 以下是優化網絡圖像的最常用方法。

減少圖像周圍的空白——一些開發人員使用空白作為填充，這是一個很大的禁忌。 裁剪圖像以刪除圖像周圍的任何空白並使用 CSS 提供填充。 使用正確的文件格式。 如果您有圖標、項目符號或任何顏色不多的圖形，請使用 GIF 等格式並使用較少的顏色保存文件。 如果您有更詳細的圖形，請使用 JPG 文件格式來保存圖像並降低質量。 以適當的尺寸保存您的圖像。 如果您必須使用 HTML 或 CSS 來調整圖像大小，請立即停止。 以所需大小保存圖像以減小文件大小。 要調整圖像大小，您必須使用某種形式的程序。 對於基本壓縮，您可以使用簡單的編輯程序，例如 GIMP。 要進行更高級的優化，您必須將特定文件保存在 Photoshop、Illustrator 或 Fireworks 中。