如何優化圖像以提高網站的頁面速度和 SEO

已發表: 2022-02-07

在為他們的 SaaS SEO 策略查看實時和當前起草的網頁時，我看到的一個常見錯誤是，圖像總體上沒有針對網站健康和速度進行優化。 我們都聽過這句話：“一張照片勝過一千個字”。 儘管這是陳詞濫調，但它是真實的，也許更值得。

圖像抓住了我們的注意力並幫助我們與所看到的事物聯繫起來。 他們構建了一個故事，並且往往給人留下更持久的印象，而不僅僅是一大段文字。 許多人喜歡從 Unsplash 等無版權的圖庫攝影網站獲取庫存圖片。

谷歌高度優先考慮快速頁面。 通過忽略圖像優化的必要步驟，您正在為一場艱苦的戰鬥做好準備。 添加到頁面的圖像數量直接影響加載速度時間。 頁面的圖片越多，加載速度就越慢。 在本指南中，我們將介紹我在針對頁面速度和搜索引擎優化圖像時所經歷的 5 個步驟。

裁剪和調整圖像大小

默認情況下，我們下載的照片非常大且質量很高。 決定該圖像的大小或分辨率取決於您的圖像將被查看的最大尺寸。 人們認為他們擁有最高質量的形象來打動他們的客戶甚至他們自己，但他們沒有意識到這種非常負面的影響。 在決定圖像的尺寸時，請考慮查看圖像的最大尺寸。

如果僅用於以 300 x 300 像素顯示的小輪廓圖像或頭像，則不需要圖像尺寸為 6000 x 6000 像素。 根據我的經驗，我發現頁面上最大的圖像將是頂部的英雄圖像。 在保持質量的同時保持安全的尺寸是使其成為 1920 x 1080 像素的標準高清尺寸。

提示和技巧：如果博客或網頁的橫幅圖像顯示質量略低於您的預期，請考慮應用透明覆蓋。 這將使它看起來像是設計的一部分，並使任何文本更易於閱讀。

下面，我使用 Figma 來調整和裁剪我的圖像。 這個過程非常簡單，因為您所要做的就是拖放然後根據自己的喜好更改圖像。 這是在 Windows 上使用 Figma 正確編輯圖像所需的兩個控件。

  • Shift + Drag - 將在保持相同比例的同時向上或向下縮放整個圖像。
  • Ctrl + 拖動 - 僅更改高度或長度而不拉伸圖像。

導出為不同的文件類型

重要的是要考慮要使用哪種文件格式。 許多格式可以用於不同的目的。 根據用戶的觀點，每個都有自己的優缺點。 以下是我經常看到的一些最常見的：

  • PNG - 適用於您需要查看小細節的圖形設計或圖像 這是以更大的文件大小為代價的。
  • JPEG - 用於人物和地點的真實攝影。 它可以壓縮得更多，但會丟失更多信息，因為您不需要這些細節。
  • SVG - 非常適合圖標和徽標，因為它們可以放大和縮小而不會損失任何質量。 這僅適用於創建的圖像文件。
  • WEBP - 可以替換 PNG 和 JPEG 的較新版本的圖像。 WEBP 具有與兩者相似的圖像質量，同時能夠節省 25%-40% 的空間。 唯一的缺點是目前，Apple 的 Safari 瀏覽器不支持此功能，因此您需要備份 JPEG 或 PNG 才能加載。
  • GIF - 這些是傾向於循環播放的視頻或動畫剪輯。 這些對於捕捉場景或展示產品界面的工作方式非常有用。 本文提供了一些很好的示例來說明如何使用它們。 由於它們是一系列動畫圖像，因此與單個圖像相比，它們的文件大小通常會更大。

我喜歡盡可能使用 JPEG，因為它需要的數據最少，但在這裡我使用 PNG 來使屏幕截圖更加清晰。 與 WEBP 一樣，可能還有更新的格式，因此最好的做法是不斷研究 Google 如何查看和排名每個可用的格式，以便為您的網頁找到最快和最佳的答案。 以下是有關最流行圖像類型的更深入指南的鏈接。

使用圖像壓縮器

下一步是嘗試通過壓縮和減小文件大小來使您擁有的文件盡可能小。 通過使用圖像壓縮器並處理圖像，我們有時可以將圖像的文件大小縮小多達 90%。 我喜歡使用的一個非常有用的工具叫做 Compressor。 通過使用此工具，您可以在其免費計劃中每天最多壓縮 50 張圖像。

在這裡，我正在拍攝我導出的圖像，並將其拖入圖像放置部分。 幾秒鐘後，新圖像就可以下載了，大約只有原始大小的十分之一。 您還可以導入多個圖像並一次下載它們，如底部的選項所示。

“懶惰”與“渴望”加載圖像

既然您的圖像格式正確並壓縮到正確的大小，您可能會認為一切順利，但還有一些事情需要確保您這樣做。 在許多模板和網站中，圖像加載速度設置為由瀏覽器默認加載，這可能會導致頁面上的所有圖像同時加載。 對此的解決方案是延遲加載圖像。

“延遲”加載延遲加載元素，直到它在頁面上可見。 當您擁有多個圖像時，這可以提高站點性能。 與此相反的是“急切”加載，它會立即加載元素。 這通常與默認的 Web 設置一致，因為沒有設置首先或最後加載哪個圖像的首選項。

這是 HubSpot 博客編輯器中的示例。 導航到插入圖像的高級選項後，我們可以看到我們可以設置其加載設置。 選擇“懶惰”並點擊應用。 現在，只要用戶滾動得更近，圖像就會出現，並減少了那些寶貴的加載時間。

記得添加替代文字

最後要訪問的是在圖像中包含 Alt 文本。 這可能不會影響您的頁面加載速度，但始終需要考慮和添加。 當您將該部分留空時，您會錯過許多提高 SERP 排名的機會。

需要注意的重要一點是，Alt 文本解釋了圖像與內容相關的“原因”。 它被谷歌索引，並為視障人士通過文本到語音朗讀。 如果您只是在圖像中塞入一個無法解釋正在發生的事情的關鍵字，那麼這可能不是最好的方法。

在這裡，我將替代文本添加到圖像中。 我基於短語 SEO 頁面速度健康。 不僅包括關鍵字，還解釋圖像中的操作方式或內容。 我決定使用“使用圖表檢查 SEO 頁面速度健康”這一短語來詳細說明。

這對於圖像可能對 Google 索引有什麼影響提供了更多信息，並為視障者提供了更大的可訪問性。

讓我們回顧一下創建/優化圖像的步驟：

  1. 將圖像拖到 Figma 等圖像編輯器中進行裁剪和調整大小。
  2. 將其導出為適當的圖像類型（PNG、JPEG、SVG、WEBP 等）
  3. 將其帶到圖像壓縮器站點，例如 Compressor 或 Image Resizer Online
  4. 將壓縮圖像作為延遲加載插入到您的內容中。
  5. 添加描述頁面上圖像的替代文本。
  6. 您現在擁有適合您網站的完美圖片！
  7. 查看 Google Search Console 以檢查您的性能提升。

按照這些步驟，您將正確地維護和優化您的圖片以進行 SEO 並加快您的頁面速度，創造出色的用戶體驗！