來自 2019 年夏季圖片最佳化問卷調查的意見回饋

來自問卷調查作答者對各種圖片最佳化技巧的意見

本文列出 Google Web DevRel 在 2019 年夏季圖片最佳化技術問卷調查中收到的任何形式意見回饋。我們會透過 Web Fundamentals@ChromiumDev 來徵詢回覆。問卷調查的動機,是探究大多數網站為何都未遵循圖片最佳化最佳做法,但這些做法似乎相對容易改善效能。這裡沒有列出回應資料,因為問卷調查方法有瑕疵。

  • 如果您是網頁程式開發人員,或許可以參考這篇實用文章,瞭解如何發掘新的圖片最佳化技術,或是其他網頁開發人員如何解決您遇到的問題,以及各項技術的費用、好處和限制。
  • 如果您是圖片服務或圖片 CDN 供應商,這篇文章或許可以協助您發掘新市場商機。
  • 如果您是架構、建構工具或 CMS 開發人員,這篇文章可能會提供一些實作新功能的靈感。

註解

WebP

  • 「我很喜歡 WebP,但它還沒完全就緒。此外,我們的 WordPress 並不支援 WebP。此外,最受歡迎的相片編輯應用程式 Photoshop 也不支援現成的 WebP 版本。因此,我們無法採用第三方應用程式或服務壓縮圖片。」
  • 「讓 WebP 在 Safari 上使用。」
  • 「如果可以從 Photoshop/Figma/Sketch 匯出,且所有瀏覽器都支援 WebP,我很樂意使用 WebP。」[注意:Sketch 支援 WebP]
  • 「下一個生成式格式解決方案會是不錯的選擇。」
  • 「停止推送 WebP,在瀏覽器支援功能不佳的情況下停止推送 WebP,並考慮使用 PNG 而非 JPEG 螢幕截圖。」
  • 「Google 文件不支援 WebP。」
  • 「我們只會使用 WebP,但擔心瀏覽器相容性的問題。」
  • 「首先修正瀏覽器相容性並更新舊版瀏覽器,或加入舊版瀏覽器,使用者會更傾向採用 WebP 等新型圖片...」
  • 「鼓勵外掛程式/主題開發人員考慮為 WebP 和其他新一代圖片類型提供支援,讓非開發人員不必為此加工。」

SVG 與向量圖片

  • 「如果可能,使用 (動畫) SVG,就多半修正了這個問題。不過,如果您深入研究他們的運作方式,一般網站就必須建構類似內容,才能正確顯示圖片。瀏覽器應該接下這項責任。」
  • 「可以記錄如何使用 lottie.js 建立 SVG 動畫嗎?」
  • 「我們大部分時間都嘗試在網站上使用尺寸較小的 JPEG 圖片,避免載入時間過長。為提供回應式設計的品質,我們也確保在必要時使用可擴充向量圖形。」
  • 「我們盡可能在所有圖片中使用最佳化的向量圖形,盡可能地處理圖片。」

其他圖片格式

  • 「我們 [需要] 更好地教導人們停止使用 GIF。」

延遲載入

  • 「考慮延遲載入等功能時,請將使用者納入考量,因為這樣會造成許多麻煩。」
  • 「請確保延遲載入屬性可搭配背景圖片使用。」
  • 「架構應立即進行改善的資產處理作業。」
  • 「我們很久以前就從延遲載入作業完成轉換,使用者回報數百萬張圖片和網站「未載入」。我們團隊就能理解這部分。沒有技術背景的使用者很難描述問題。」
  • 「我希望能更加瞭解如何運用 Intersection Observer API 進行延遲載入,而不是使用傳統技術。」
  • 「這對我有效:pwafire.org/developer/codelabs/progressive-loading。」

背景圖片

  • 「我通常會在 CSS 中將圖片載入做為背景。」
  • <img> 標記發生問題,而且難以控管詳細的詳細資料,尤其是使用者提交的內容。我們更常使用 <div> 和背景圖片樣式,因為這項功能可使用背景大小、背景位置,以及避免用滑鼠右鍵按一下儲存圖片。

透明度

  • 「今天是 2019 年,JPG 圖片對於沒有 Alpha 透明效果的做法有什麼影響?
  • 「只有在我需要透明背景時,我才會真正使用 PNG 檔案做為相片。」

低畫質圖片預留位置 (LQIP)

  • 「我們使用 LQIPS,這是確保訪客持續參與的絕佳技術,而無需盡早載入高畫質圖片。」

效能

  • 「我們最近發現圖片出現效能問題,當使用者向下捲動瀏覽我們的網站時,就會看到接下來的 60 張資訊卡,其中包含縮圖。由於同一個網域有 6 個連線限制,因此系統會封鎖縮圖,並且會在使用者繼續向下捲動時,顯示下 60 張資訊卡。
  • 「我們想要使用 HTTP/2,但大多數客戶都使用 IE11!因此,我們正在研究網域資料分割 / 載入其他網域的 AJAX JSON 資料要求。」

規模調整

  • 「很抱歉,由於內建大小,對我而言比較適合使用高/寬。」
  • 「正在尋找減少尺寸的方法,現在約有 12 種了。」
  • 「如果沒有 JS,動態調整圖片大小確實很難,無法做到。」
  • responsivebreakpoints.com 這類工具適用於 web.dev :)。」

高畫質和高解析度影像

  • 「如何下載壓縮圖片而不失去 DPI 品質?」
  • 「我們是一家文件管理公司,我們的應用程式處理的高解析度掃描圖片 (通常是 TIFF 或 PDF 檔) 多達數百萬張,
  • 「使用方式就是這麼簡單,高解析度 img 檔案是列印格式的必要項目,必須針對網路最佳化。縮減網頁圖片大小並不容易,但如果作者只針對目標為印刷版出版的圖片提供輕量檔案,就能大幅改善圖片品質。我們會傳送各種不同訊息,說明提交手稿的提交規定。然後,我們將完成複雜的工作流程來處理這些資料。」

瀏覽器功能

  • 「由於 [內建] 功能會將所有圖片裁剪為 4 種大小並編寫所有標記,使用瀏覽器進行自動回應式 src 裁剪功能非常實用。如果我們可以上傳一張大型相片,並撰寫簡單的圖片標記,瀏覽器會自動建立可獲得最佳效果的多個 src 屬性。」
  • 「我個人認為當 CSS 為回應式圖片 (max-width: 100%;高度自動或高度:寬度:100%;高度自動) 設定的圖片時,我就很難避免頁面自動重排,特別是結合了自動調整圖片/圖片標記的藝術方向。避免的最佳方法是使用「負的邊框間距駭客」設定固定圖片比例,然後將圖片放在這個比例方塊中。更棒的瀏覽器支援/回應式圖片處理,肯定能助我們一臂之力!」
  • 「請只擷取第一個畫面,藉此停用 GIF 為「autoplay」。」

CDN 和圖片服務

  • 「Google 應該像 Cloudflare 一樣提供免費 CDN。」
  • 「也許有更多的工具可以設定動態資源調度,對不同供應商的 CDN 來說是個好事。」
  • 「使用單一超大型壓縮映像檔是非常不錯的解決方案,而且不需要額外的製作成本。行動裝置需要約 1,000 像素的寬幅圖片 (轉譯寬度為 500 像素),同時也需要調整大小,以配合大型/電腦非 Retina 顯示器的螢幕。雖然我曾經用過調整圖像大小的 CDN,但我認為是很糟糕的解決方案。CMS 應能處理大小調整作業,而且設定太複雜,無法有效設定,但單一解決方案目前是個好方法。」
  • 「CloudFlare 會自動縮放圖片,使圖片最符合使用者的螢幕。我們可以縮短載入時間,因為圖片會相對於使用者的螢幕畫面載入。舉例來說,如果使用者使用手機,就不會載入電腦版尺寸的背景。
  • 「Cloudflare 會在背景執行這項作業,您不必採取任何行動。如要這麼做,只要勾選設定面板中的核取方塊即可。」
  • 「再複習一下,我唯一能成功使用 srcset 等屬性的原因,在於操作很簡便。但 Cloudinary 昂貴,而且速度飛快,感覺就像是開發經驗的一大孔。」
  • 「我們需要巧妙地自動裁剪圖片,以便在不同情況下配合不同長寬比。」
  • 「我也會使用來自其他供應商 (例如 Unsplash) 的圖片,因為解析度、品質和壓縮功能較不明顯。」

CMS、平台和架構

  • 「當我透過 CMS 建立網站時,仍然很難找出使用圖片的最佳方式。作者通常會設定不同尺寸的圖片,並期望圖片不會縮小或縮放。我不確定是否可以設定圖片的寬度上限或高度上限
  • 「過去幾個專案使用 gatsby 映像檔,且從未使用過。」
  • 「由於使用者將圖片存放在 CMS 中,圖片通常最難處理,可能會使用任何尺寸、格式,有時無法使用理想圖片格式和尺寸的原始圖片。」
  • 「如要維護圖片,不易維護,因為除非作業會自動執行,不影響解析度,否則我們的系統可自行添加控制項並不容易。此外,我們的圖片在行動裝置和電腦上看起來也會不正確
  • 「我協助使用者最佳化網站 (WordPress),我觀察到的圖片最重大問題如下:需要仰賴 CDN 或外掛程式來建立 WebP。srcset/Picture 就必須讓主題開發人員正確編寫程式碼。大多數延遲載入外掛程式都會緩慢載入,造成使用者體驗不佳。背景圖片很難延遲載入。」

成本/福利

  • 「新做法很有效,但會增加網站的開發時間。」
  • 「由於缺少 srcset 和 WebP 等新標準,許多《財富》雜誌全球 500 大公司採用的適應期太慢。因此,許多公司拒絕了這項變更,因為這是目前網站的非必要開發成本。使用者並未充分討論或回報效能提升情形 (UX)。否則就會難以儲存網路上的圖片。」
  • 「建立及管理多個大小和版本的費用高昂。」
  • 「他們在伺服器佔用大量空間。」

搜尋引擎最佳化 (SEO)

  • 「很難在可接受的圖片品質與檔案大小之間做出平衡,另一方面,我想要加快載入速度,藉此改善搜尋引擎最佳化 (SEO) 的優勢,但另一方面,如果圖片品質不佳,使用者體驗就會大打折扣。」

網路圖片的角色

  • 「網路上的內容過多。停止使用不會修飾過後的圖片內容。」
  • 「當網路上沒有圖片,而我們以 ASCII-art 格式分享自拍照時,你還記得嗎?」

工具、指南、標準和最佳做法:挫折與要求

  • [有一位參與者為了回覆這份問卷調查而撰寫了一篇網誌文章]
  • 「需求似乎不斷改變,網頁程式開發人員在一開始就儲存圖片會非常耗時,因此感到相當困擾。我們會盡力而為之,當我們先查看網站,幾個月後,Google 決定圖片壓縮程度更小,或需使用不同格式。這代表我們無法為客戶提供最佳解決方案,持久性地創造成本優勢,讓我們的客戶和我們都受益。我們有部分小型企業客戶預算不足,無法依照規定繼續修正圖片,並重新儲存圖片。我們沒有預算在他們的管理套件中進行這項工作。編寫程式碼來針對不同裝置呼叫不同大小的圖片,也相當耗時。我們希望能製定出一套儲存時間,保持一致的映像檔。」
  • 「是,我覺得 Lighthouse 工具中的「保留要求計數太少,檔案大小不大」全都錯誤。如果網站透過 HTTP1.x 提供服務,那麼如果網站是透過 HTTP2 提供,則要求數量不重要,即使來自同一主機名稱也不是問題。我有一個精簡版網站,但我在同一個主機名稱上透過 HTTP2 載入約 35 個要求的小型 WebP 檔案,共載入約 35 個要求。Lighthouse 將其標記為「保持要求計數低且檔案大小較小」問題時,雖然速度非常快,且由於同一主機名稱上的 HTTP2 要求數量不會造成問題。當然,這類檔案已經很小 (通常介於 1 KB 到 2 KB 以下)。我可以載入 Sprite,但系統還需要更多的 CSS 運算作業。因此,請更新 Lighthouse 中的「保留要求計數較少且檔案大小較小」報告,將 HTTP2 而非相同的主機名稱納入考量。
  • 「曾經有人要記得壓縮圖片是件苦差事。」
  • 「跨瀏覽器行為一直無法預測,因此最簡單的解決方案通常就是最安全的。」