chromium源碼閱讀--圖片處理

JavaScript 圖像替換

JavaScript 圖像替換技術檢查設備能力，而後「作正確的事」。 您能夠經過 window.devicePixelRatio 肯定設備像素比，獲取屏幕的寬度和高度，甚至可經過 navigator.connection 或發出假請求來執行某種網絡鏈接嗅探。收集了全部這些信息後，您就能夠決定加載哪一個圖像。

此方法的一大缺陷是，使用 JavaScript 意味着您將延遲加載圖像，至少要等到先行解析器結束。 這意味着，圖像要等到pageload 事件觸發後才能開始下載。此外，瀏覽器極可能會同時下載 1x 和 2x 圖像，致使頁面重量增長。

內聯圖像：光柵圖像和矢量圖像

建立和存儲圖像有兩種全然不一樣的方式，這將決定您如何以自適應方式部署圖像。

光柵圖像：如相片及其餘經過單個顏色點網格表示的圖像。光柵圖像可來自照相機或掃描儀，也能夠藉助 HTML canvas 元素建立。可以使用 PNG、JPEG 和 WebP 之類的格式存儲光柵圖像。

矢量圖像：如徽標和藝術線條，是由一系列的曲線、直線、形狀、填充色和漸變色定義的。矢量圖像可經過 Adobe Illustrator 或 Inkscape 之類的程序建立，或使用 SVG 等矢量格式在代碼中手動寫入。

SVG

使用 SVG 可在網頁中包含自適應矢量圖像。矢量文件格式比光柵文件格式有優點的地方在於，瀏覽器能夠渲染任何大小的矢量圖像。矢量格式描述的是圖像的幾何圖形，即該圖像是如何經過線條、曲線和顏色等構造的。而光柵格式僅提供與單個顏色點有關的信息，所以，在進行縮放時，瀏覽器必須猜想如何填充空白。

內聯的優缺點

圖像的內聯代碼可能很冗長，特別是 Data URI 格式的圖像，那麼您爲何要使用它呢？爲了減小 HTTP 請求！SVG 和 Data URI 可實現經過一個請求檢索整個網頁，包括圖像、CSS 和 JavaScript。

缺點：

• 與來自外部 src 的圖像相比，在移動設備上 Data URI 格式圖像的顯示速度要慢得多。
• Data URI 會顯著增長 HTML 請求的大小。
• Data URI 會增長標記和工做流的複雜性。
• Data URI 格式的圖像比二進制格式的圖像大不少（最多大 30%），所以不會減少總下載大小。
• Data URI 沒法緩存，所以必須爲使用它們的每個頁面分別進行下載。
• IE 6 和 7 不支持 Data URI，IE8 僅提供有限支持。
• 對於 HTTP/2，減小資產請求的次數將使優先級降低。

因爲全部格式均可以自適應，所以，您須要測試哪種格式效果最佳。使用開發者工具衡量下載文件大小、請求的次數以及總延遲時間。對於光柵圖像，Data URI 有時候很是有用，例如，若是主頁只有一兩張圖像且這些圖像沒有在其餘地方使用，則可以使用 Data URI。若是您須要內聯矢量圖像，SVG 是一個比較好的選擇。

選擇正確的格式

有兩種圖像類型能夠考慮：矢量圖像與光柵圖像。對於光柵圖像，您還須要選擇正確的壓縮格式，例如：GIF、PNG、JPG。

光柵圖像，如相片及其餘經過單個的點或像素網格表示的圖像。 光柵圖像一般來自照相機或掃描儀，也能夠在瀏覽器中藉助 canvas 元素建立。 隨着圖像尺寸的增長，文件大小也相應地增長。 若是光柵圖像放大時超過其初始尺寸，則會變得模糊，由於瀏覽器須要猜想如何填補缺失的像素。

矢量圖像，如徽標和藝術線條，是由一系列的曲線、直線、形狀和填充色定義的。 矢量圖像使用 Adobe Illustrator 或 Inkscape 之類的程序建立，並保存爲矢量格式，如 SVG。因爲矢量圖像是創建在簡單基元上的，所以，能夠進行無損質量的縮放，且文件大小不變。在選擇正確的格式時，務必綜合考慮圖像的源格式（光柵圖像仍是矢量圖像）及內容（顏色、動畫、文本等等）。沒有一種格式可以適用全部圖像類型，它們各有優劣。

在選擇正確的格式時，先參考如下指導準則：

• 攝影圖像使用 JPG。
• 徽標和藝術線條等矢量插畫及純色圖形使用 SVG。 若是矢量插畫不可用，試試 WebP 或 PNG。
• 使用 PNG 而非 GIF，由於前者能夠提供更豐富的顏色和更好的壓縮比。
• 長動畫考慮使用 <video>，它能提供更好的圖像質量，還容許用戶控制回放。