web img

web图像常见的应用策略与技巧 https://isux.tencent.com/articles/web-image-application.html

圖片最佳化

圖片最佳化

清除及取代圖片

• 消除不必要的圖片資源
• 儘量運用 CSS3 效果
• 使用網路字型，避免在圖片中將文字編碼

  向量和點陣圖片

• 向量圖片非常適用於由幾何圖形組成的圖片
• 向量圖片不受縮放和解析度的影響
• 如果複雜的畫面中包含許多不規則的圖形和細節，請使用點陣圖片
• • 向量(SVG) / 點陣(GIF、PNG、JPEG 或 JPEG-XR 和 WebP)

    高解析度螢幕的意涵

• css 一格：裝置像素可為1:1格、1:4格、1:9格。
• 解析度增加一倍時，實際螢幕和總像素數量會增加四倍。
• "每個"點陣圖片的"多個版本"最佳化後再進行發送。無論解析度高低，圖片最佳化技術都一樣。

  最佳化向量圖片

• SVG 是一種 XML 圖片格式
• 請將 SVG 檔案迷你化，以便縮減檔案大小
• 請使用 GZIP 壓縮 SVG 檔案

  最佳化點陣圖片

• 點陣圖片是一格像素。
• 每個像素都會包含顏色和透明度資訊
• 圖片壓縮器會使用多種技術縮減每個像素所需的位元數，藉此降低圖片的檔案大小
• 當圖片經過瀏覽器解碼後，每個像素一律會佔用 4 位元組的記憶體。

失真和無失真圖片壓縮

• 因為人類眼睛運作機制的緣故，圖片非常適合採用失真壓縮
• 圖片最佳化是失真和無失真壓縮的一項功能
• 將圖片最佳化時，使用失真或無失真演算法會造成圖片格式略有不同
• 並沒有所有圖片都適用的最佳格式或「品質設定」：每種特定的壓縮器和圖片內容組合都會產生獨一無二的結果

  選擇正確的圖片格式

• 請先選取通用的格式：GIF、PNG、JPEG
• 反覆實驗後，為每種格式選取最佳設定：品質、調色盤大小等
• {"考慮為現代用戶端新增 WebP 和 JPEG XR 資產 scaled-images"=>nil}
• 傳送可放大的資產是最簡單有效的最佳化作業
• 請特別留意大型資產，因為這類資產會耗費大量資源
• 透過將圖片放大為正常顯示大小，可減少不必要的像素數量
• 確定每個資產的最佳圖片格式和設定之後，請考慮增加一個以 WebP 和 JPEG XR 編碼的版本。這兩種格式都是新格式
• WebP 和 JPEG XR 都未獲得普遍支援，您需要為應用程式或伺服器額外增加一個邏輯，以放送適合的資源：
  • CDN
  • 開放原始碼的工具
  • 新增邏輯來偵測、檢查用戶端支援的格式

    工具和參數微調

提供縮放的圖片資產

圖片最佳化可以歸納為兩個標準：將用於為每個圖片像素進行編碼的位元組數最佳化，以及將像素總數最佳化：圖片的檔案大小就是像素總數乘以用於為每個像素進行編碼的位元組數。專注在這兩方面就對了！

圖片最佳化檢查表

• 優先選用向量格式：向量圖片不受解析度和縮放程度影響，最適用於多裝置或高解析度的情況。
• 縮減及壓縮 SVG 資源：大多數繪圖應用程式產生的 XML 標記通常包含不必要的中繼資料，可以放心刪除；請確保伺服器設定為對 SVG 資產採用 GZIP 壓縮。
• 選擇最佳點陣圖片格式：確定功能要求，然後選擇適合每個特定資產的格式。
• 試驗點陣格式的最佳品質設定：請大膽降低「品質」設定，效果通常非常好，節省的位元組可能會很可觀。
• 刪除不必要的圖片中繼資料：許多點陣圖片包含不必要的資產中繼資料：地理資訊、相機資訊等。請使用適合的工具刪除這些資料。
• 提供可縮放的圖片：調整伺服器上的圖片大小，確保「顯示」大小盡可能接近圖片的「自然」大小。請特別留意較大的圖片，因為調整這些圖片的大小時，通常會產生最大的間接成本！
• 自動化、自動化、自動化：請投資自動化工具和基礎設施，如此可以確保所有圖片資產一定會經過最佳化。

HTML tag

響應式圖片的解決方案：利用html5 標籤在不同裝置載入不同解析度圖片

依不同的螢幕解析度指定使用不同的圖片

<picture>
    <source srcset="large.jpg" media="(min-width: 960px)">
    <source srcset="middle.jpg" media="(min-width: 720px)">
    <source srcset="small.jpg" media="(max-width: 480px)">
    <img src="default.jpg" alt="My default image">
</picture>

分辦高解析的螢幕

<picture>
    <source srcset="large.jpg, large-2x.jpg 2x" media="(min-width: 960px)">
    <source srcset="middle.jpg, middle-2x.jpg 2x" media="(min-width: 720px)">
    <source srcset="small.jpg, small-2x.jpg 2x" media="(max-width: 480px)">
    <img src="default.jpg" alt="My default image">
</picture>

分辦瀏覽器是否支援 webp 格式，反之則顯示 default.jpg。

<picture>
<source type="image/webp" srcset="default.webp">
<img src="default.jpg" alt="My default image">
</picture>

的使用規則：

• source 的順序很重要
• 在 <picture> 結束前放上一個標準的 <img>
• Picturefill.js 舊版瀏覽器也能支援<picture>， 在網頁中載入 picturefill.js 就可以了！<script src="picturefill.js"></script>

• 因為IE9無法判別在 <picture> 裡的 <source>，所以我們必須多加一層 <video>，好讓 IE9可以讀取到 <source> 的描述資訊。以下就是針對 IE9 的解決方法。

    <picture>
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source srcset="large.jpg" media="(min-width: 960px)">
        <source srcset="middle.jpg" media="(min-width: 720px)">
        <source srcset="small.jpg" media="(max-width: 480px)">
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <img src="default.jpg" alt="My default image">
    </picture>