問卷調查作答者針對各種圖片最佳化技巧提供的意見
Sam Dutton
這篇文章列出 Google Web DevRel 在 2019 年夏季的圖片最佳化技巧問卷調查中，收到的任意形式意見回饋。請透過網站基礎知識和 @ChromiumDev 提問。問卷調查的動機是要找出大多數網站都沒有遵循圖片最佳化最佳做法，即使它們似乎是相對輕鬆地改善效能的方法。問卷調查方法有瑕疵，因此此處未列出回應資料。
適用對象
- 如果您是網頁開發人員，這篇文章很適合用來瞭解新的圖片最佳化技術，或瞭解其他網頁開發人員如何解決您面臨的問題，以及各項技術的費用、優勢和限制。
- 如果您是圖片服務或圖片 CDN 供應商，這篇文章可協助您發掘新的市場商機。
- 如果您是架構、建構工具或 CMS 開發人員，這篇文章可能會說明導入的新功能。
留言
WebP
- 「我很喜歡 WebP，但尚未完成，此外，我們的 WordPress 並不支援 WebP。其中一個最受歡迎的相片編輯應用程式 Photoshop 也不支援立即可用的 WebP，因此我們無法仰賴第三方應用程式或服務的圖片壓縮功能。」
- 「讓 WebP 在 Safari 中使用。」
- 「如果我可以從 Photoshop/Figma/Sketch 匯出檔案，而且所有瀏覽器都支援 WebP，我很樂意使用 WebP 格式。」[注意：Sketch 支援 WebP]
- 「新一代的格式解決方案會是很棒的平台。」
- 「如果瀏覽器支援品質不佳，別再推送 WebP 困難，並考慮擷取螢幕截圖時必須使用 PNG 而非 JPEG。」
- 「Google 文件不支援 WebP。」
- 「我們只使用 WebP，但會擔心瀏覽器相容性。」
- 「首先修正瀏覽器相容性和更新舊版瀏覽器，或是加入舊版修正程式，使用者會更願意採用 WebP 等新的圖片類型...」
- 「鼓勵外掛程式/主題開發人員考慮為 WebP 和其他新一代圖片類型提供支援，這樣非開發人員就不必自行操作。」
SVG 和向量圖片
- 「如果可以的話，我會使用 (動畫) SVG 的 gatsby-image 來解決這個問題。但是當您深入探索這類軟體時，一般網站必須打造一些類似技術，才能讓圖片正確運作，這點並不切實際。瀏覽器應該承擔更多責任。」
- 「有辦法使用 lottie.js 建立 SVG 動畫嗎？」
- 「我們會盡量在網站上使用尺寸較小的 JPEG 圖片，以避免載入時間低。為了提供回應式設計的品質，我們也會視需要使用可擴充向量圖形。」
- 「我們會盡可能讓所有圖片都使用最佳化的向量圖形。」
其他圖片格式
- 「我們 [需要] 進一步引導大眾停止使用 GIF。」
延遲載入
- 「考慮延遲載入等功能時，請從使用者的角度考量，因為很多人會令人感到困擾。」
- 「請確保延遲載入屬性支援背景圖片。」
- 「架構應讓使用者立即改善資產處理作業。」
- 「我們已在很久之前轉換延遲載入功能。使用者回報數百萬個圖片和網站「未載入」。據我們所知，我們的團隊匯總了這些內容。非技術人員很難描述問題。」
- 「我希望能更深入瞭解使用 Intersection Observer API 進行延遲載入，而不採用傳統技術。」
- 「這對我來說很有用：pwafire.org/developer/codelabs/progressive-loading」。」
背景圖片
- 「我通常會在 CSS 中將圖片載入為背景。」
- 「
<img>標記有問題，而且難以控制精細的詳細資料，尤其是使用者提交的內容。我們較常使用<div>和背景圖片樣式，因為這樣我們可以使用背景大小、背景位置，以及避免使用右鍵儲存圖片。」
資訊公開
- 「今天是 2019 年，未使用 Alpha 透明度的 JPG 檔案怎麼做？
- 「我只有在需要透明背景時才會使用 PNG 格式的相片。」
低品質圖片預留位置 (LQIP)
- 「我們使用 LQIPS，這是要保持訪客參與度的絕佳技術，而不是過早載入高畫質圖片。」
效能
- 「圖片最近發生效能問題。當使用者向下捲動網站時，我們會顯示接下來 60 張含有縮圖的資訊卡。因為同一網域最多 6 個連線，縮圖會遭到封鎖；如果使用者繼續向下捲動，則會出現下一個 AJAX 要求，以取得接下來的 60 張資訊卡。」
- 「我們想要使用 HTTP/2，但大部分客戶都使用 IE11！因此，我們目前正探索如何在不同的網域上進行網域資料分割 / 載入 AJAX JSON 資料要求。」
尺寸
- 「很抱歉，對我來說，使用身高/寬度的效果更好。」
- 「希望現在能減少大小，約為 12。」
- 「如果沒有 JS 動態調整圖片大小，簡直難以調整。」
- 「像 responsivebreakpoints.com 的工具非常適合 web.dev :)。」
高品質和高解析度圖片
- 「如何下載圖片壓縮，同時保留 DPI 品質？」
- 「我們是一家文件管理公司，我們的應用程式可處理數百萬張高解析度掃描圖片，通常為 TIFF 或 PDF 檔。」
- 「使用這個應用程式很麻煩。列印格式必須採用高解析度 img 檔案，且必須針對網路進行最佳化。對網頁縮小圖片很麻煩，但如果作者只為出版專用的圖片提供輕量檔案，就會更精彩。我們希望並提出複雜的工作流程來處理這些材料。」
瀏覽器功能
- 「瀏覽器中的自動回應式 src 裁剪功能做為 [內建] 功能非常實用，因為將所有圖片裁剪為 4 種大小並撰寫所有標記，省時省力。如果我們能夠上傳一張大相片，然後編寫簡單的圖片標記，瀏覽器就會自動建立多個 src 屬性，這一切都是獲勝的功能。」
- 「我個人在透過 CSS 為回應式圖片 (上限：100%；高度自動或高度：寬度：100%；高度自動) 設定圖片時，想避免網頁重排，特別是搭配自動調整圖片/圖片標記的藝術方向時。最好避免將「負邊框間距鎖定」設為固定的圖片比例，然後將圖片置於這個比例方塊中。改善瀏覽器支援/回應式圖片處理功能，對我們來說是個很好的幫助！」
- 「只要擷取第一個畫面，即可停用 GIF「自動播放」功能。」
CDN 和圖片服務
- 「Google 應像 Cloudflare 一樣提供免費 CDN。」
- 「或許如果需要更多工具來設定動態資源配置，而且有不同供應商的 CDN 服務會更好。」
- 「單一個超大型的過度壓縮映像檔是相當不錯的解決方案，而且不會產生額外的實際工作環境費用。行動裝置的寬度需要約 1000 像素 (顯示寬度為 500 像素)，而且適用於大型/非 Retina 螢幕的尺寸。我認為調整圖片 CDN 的大小是很糟糕的解決方案，但我過去曾使用過這項技術。CMS 應該能處理調整大小，而整個設定則太複雜了，單一解決方案會是很好的折衷方案。」
- 「CloudFlare 會自動調整圖片配置，以符合使用者的螢幕。這樣我們可以節省載入時間，因為圖片是依據使用者螢幕載入。舉例來說，如果使用者使用手機，就無法在電腦大小的背景中載入。」
- 「Cloudflare 會自動在背景執行此操作，除了在設定面板中勾選方塊外，不用再執行其他操作。」
- 我想再次提醒，我們唯一能成功使用 srcset 等等的原因，是由於 Cloudinary 易於使用。但 Cloudinary 的服務費用高昂且速度快，這就像是開發體驗的一大缺口。」
- 「我們需要一種能夠以聰明的方式輕鬆自動裁剪圖片，以便它們在不同情況下都能套用不同的顯示比例。」
- 「我也會使用 Unsplash 等供應商的圖片，因為他們對解析度、品質和壓縮功能不太掌控。」
CMS、平台和架構
- 「在使用 CMS 建立網站時，我還是無法找出圖片的最佳運用方式。作者往往會設定不同尺寸的圖片，因此圖片會不會縮小或縮放。我不確定是否可以設定圖片的寬度或最大值」
- 「對最近幾個專案使用 gatsby-image 則從未回顧過。」
- 「圖片通常是使用者存放在 CMS 中時最困難的部分，使用者可能會使用任何大小、格式，有時可能無法使用理想的圖片格式和尺寸。」
- 「圖片難以維護，因為我們屬於自助式新增控制項，除非在不影響解析度的情況下自動發生，否則很難進行維護。此外，我們的圖片在行動裝置和電腦上看起來並不正確」
- 「我協助使用者最佳化網站 (WordPress)。我發現最大的圖片問題是：必須使用 CDN 或外掛程式才能建立 WebP。srcset/Picture 必須由主題開發人員正確編碼。多數延遲載入外掛程式載入速度緩慢，導致使用者體驗不佳。背景圖片難以延遲載入。」
成本/效益
- 「新做法雖然有效，但可以延長網站的開發時間。」
- 「許多財星雜誌 500 大公司都無法確實遵循新的標準，例如 srcset 和 WebP，因此，許多公司將這項變革視為目前網站不必要的開發成本。使用者 (UX) 不會廣泛討論或回報效能提升結果，也因此更難儲存網路上的圖片。」
- 「必須耗費大量成本才能建立及管理多種大小和版本。」
- 「它們在我們的伺服器上佔用大量空間。」
搜尋引擎最佳化 (SEO)
- 「很難在可接受的影像品質和檔案大小之間取得平衡。從某方面來說，我想加快載入速度以改善搜尋引擎最佳化 (SEO) 的優點，但另一方面，品質不佳的圖片會降低使用者介面/使用者體驗。」
圖片在網路上扮演的角色
- 「網路上有太多東西，停止使用不會對文字成效造成負面影響的圖片。」
- 「你還記得網路手邊沒有圖片的時候，我們會以 ASCII 圖片的身分分享自拍照嗎？」
工具、指引、標準和最佳做法：挫折和要求
- [有一名參與者回覆這份問卷調查，並撰寫了一篇網誌文章]
- 「這些需求似乎不斷改變，對於網頁程式開發人員而言，一開始儲存圖片非常耗時，因此感到非常麻煩。我們會盡可能改進了，再檢查整個網站，但幾個月後 Google 決定進一步壓縮圖片，或需要採用不同的格式。我們因此缺乏可長期協助客戶的解決方案，同時為他們和我們創造成本高昂的解決方案。我們有些小型公司客戶沒有預算，無法繼續修正圖片並重新儲存，以符合相關規定。我們沒有預算在他們的管理套件中完成這項工作。撰寫程式碼以便針對不同裝置呼叫不同圖片大小，也是非常耗時。只需要能夠制定一套系統，能夠保存較長時間的圖像。」
- 「是，我想，你應該在 Lighthouse 中收到「保持要求數量低且檔案大小」錯誤。如果網站透過 HTTP1.x 提供，則請確保網站透過 HTTP2 提供，但如果是來自相同的主機名稱，要求數量就比較不重要，甚至不是問題。我擁有精簡網站，但在同一個主機名稱上，總共透過 HTTP2 載入了約 35 個請求總計的 30 個 WebP 檔案。Lighthouse 將其標示為「保持要求數量低且檔案大小不小」問題，但問題數量超快，而同一個主機名稱上的 HTTP2 則代表要求數量沒有問題。沒錯，檔案已經很小 (大部分介於 1 KB 至 2 KB 之間)。我可以載入 Sprite，但還需要進行更多 CSS 運算。因此，請更新 Lighthouse 中的「保留要求計數低且檔案大小：小」報告，將 HTTP2 取代相同的主機名稱。」
- 「大家很難記得壓縮圖片是件困難的事。」
- 「跨瀏覽器的行為是難以預測的，因此最簡單的解決方案通常就是最安全的。」