通過使用 Cloudimage 為任何設備自動優化所有圖像來提高網站性能

已發表: 2020-04-22

根據 Lighthouse 的說法,圖像優化是網站速度和性能不佳的最常見問題之一。

未優化的圖像可能會使您的頁面加載速度減慢 9 秒以上,在某些情況下甚至更多。

緩慢的頁面導致更高的跳出率和更低的 SERP 定位,這反過來意味著更少的流量和更少的付費客戶。

圖像優化包括什麼?

通過使用 Cloudimage 1 為任何設備自動優化所有圖像來提高網站性能

優化您網站上的所有圖像是一項非常複雜的工作,需要專業知識和相當多的時間才能正確完成。

插件可以幫助節省一些時間,但如果處理不當,它們也會破壞您的整個網站結構並永久刪除您的一些媒體。

要了解為什麼我們認為這是一項複雜的工作,這裡有一個 Cloudimage 認為對正確圖像優化至關重要的 20 點清單:

  1. 整合 CDN 交付
  2. 優化 TTFB
  3. 使用 360 度產品視圖
  4. 確保您的圖像是響應式的
  5. 正確調整圖像大小
  6. 使用正確的圖像格式
  7. 壓縮圖像
  8. 優化alt屬性
  9. 清楚地說明圖片
  10. 照顧好你的產品角度
  11. 知道如何混合顏色
  12. 創建情感融合的視覺效果
  13. 使用產品對應背景
  14. 優化您的縮略圖
  15. 使用圖片站點地圖
  16. 應用色度二次採樣
  17. 延遲加載非關鍵圖像
  18. 部署圖像精靈
  19. 開始緩存圖片資源
  20. 預加載關鍵圖像資產

從技術方面來看,上面列表中最重要的點是調整大小、格式優化、延遲加載、圖像壓縮、響應性和 CDN 交付。

如果您的網站上有 11.000 張圖片。

完成優化需要多長時間?

現在想像一下能夠自動做到這一點!

這就是 Cloudimage 所做的。

通過使用 Cloudimage 2 為任何設備自動優化所有圖像來提高網站性能
通過使用 Cloudimage 3 為任何設備自動優化所有圖像來提高網站性能

您可以通過我們的軟件批量上傳所有圖片,它們將自動兌現並上傳到雲端。

之後是優化。

圖像調整大小

Cloudimage 的大小調整服務器,位於全球三個數據中心(加拿大、法國和新加坡),將從 origin_image_url 下載您的原始圖像,根據操作和過濾參數進行轉換,最後通過火箭顯示在您的網站或移動應用程序上- 快速 CDN。

原始圖像託管在您的 Web 服務器、Amazon S3 存儲桶或任何其他可通過 HTTP 訪問的存儲上的示例。

當您同時指定寬度和高度時,可以忽略或保持原始圖像比例。 此外,您可以選擇向圖像添加填充。 Cloudimage 提供以下調整大小模式:

通過使用 Cloudimage 4 為任何設備自動優化所有圖像來提高網站性能

莊稼

保持圖像比例切割圖像以適合定義的寬度和高度。

合身

調整圖像大小,保持比例添加填充以滿足所需的尺寸。

邊界

嘗試在保持比例的同時調整圖像大小。 類似於 fit 但沒有填充。

覆蓋

忽略原始圖像比例,將圖像調整為給定的寬度和高度。

旋轉

將圖像逆時針旋轉指定角度

修剪

移除圖像周圍的單色框。

圖像壓縮

您可以使用壓縮過濾器更改圖像的壓縮(輸出格式和質量)。

您可以在調整大小操作和圖像過濾器的同時使用壓縮過濾器。

默認情況下,Cloudimage 將圖像作為 WebP 交付。 如果客戶端瀏覽器不支持該格式,則會回退到 JPEG 或 PNG。

通過使用 Cloudimage 5 為任何設備自動優化所有圖像來提高網站性能

Optipress – 基於機器學習的圖像壓縮

JPEG 壓縮的主要挑戰是為每個不同的圖像找到最佳的壓縮因子。

使用相同壓縮參數壓縮的不同圖像可能會導致不同的感知質量。

此外,不同尺寸的相同圖像可能需要不同的壓縮策略來實現最大尺寸增益,而不會造成明顯的質量損失。

為了克服這個問題,我們開發了 Optipress JPEG 壓縮算法。

Optipress 通過分析特定圖像特徵和當前壓縮參數找出最佳 JPG 壓縮方法。

機器學習模型確定此圖像的最佳壓縮策略。

然後基於人類視覺系統的模擬模型評估質量,以實現最佳壓縮,而不會感知質量下降。

轉換預設

如果您希望在許多圖像上應用相同的變換,您可以定義預設並僅使用預設名稱 (X) 應用變換。

p=X

任何調整大小的轉換或圖像過濾器都可以包含在預設中,以及水印和圖像壓縮參數。

這使得批量優化過程可以節省超過 50% 的圖像優化時間,並且任何相關人員都可以輕鬆完成。

響應式圖像變得容易

響應式圖像根據最終用戶的屏幕尺寸調整圖像尺寸,從而使您的網站或移動應用程序能夠更快地在各種屏幕尺寸上加載。

Cloudimage 團隊開發了一個 JS 插件來為您自動化一切。

通過使用 Cloudimage 6 為任何設備自動優化所有圖像來提高網站性能
https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

Cloudimage JS 庫將自動調整您的所有 URL,並提供內置的響應式設計、延遲加載和更多功能,以使您的網站響應迅速,並為您的圖像添加漂亮的加載效果。

通過延遲加載和啟用緩存,您可以確定您的網站加載時間將至少提高 40%。 將 CDN 添加到其中,百分比甚至上升到 60%。

內容交付網絡

Cloudimage 利用內容交付網絡來加速您的圖像在全球範圍內的交付。 我們與多家 CDN 提供商合作,以優化您的圖像交付並提供卓越的可靠性。

通過使用 Cloudimage 7 為任何設備自動優化所有圖像來提高網站性能

除了加速您的圖像之外,CDN 還提供 DDoS(分佈式拒絕服務)保護,這將充當您的服務器的屏障並避免任何停機時間。

只要最終用戶請求圖像,CDN 通常會緩存圖像。

分分鐘實施

Cloudimage 的獨特之處在於它的服務可以非常快速地實現。

如果您的網站正在經歷瘋狂的流量高峰,您可以隨時聯繫 cloudimage,優化您的圖像,並確保這些高峰會立即被吸收。

這使您在各種設備上都能獲得完美的性能和快速的頁面加載速度。

此外,實施非常簡單,使團隊(負責網站從內容製作到發布和監控的團隊)之間的協作過程簡單高效。

當我們大多數人在接下來的一段時間內被迫使用我們的家庭辦公室時,這一點尤其重要。
有關 Cloudimage 服務如何工作的更多信息,請訪問我們的 cloudimage.io