在HTTP/2中使用圖像精靈是否合理？

Question

JS和CSS文件的捆綁won't be necessary in HTTP/2，但圖像精靈怎麼樣？

看着the demo它似乎已經比HTTP/1.1更快的方式工作，但不會將圖像捆綁成精靈使其更快？我的意思是，當所有數據都在一個文件中時，PNG的優化算法不會更好地工作嗎？

Answer 1

這取決於您的圖像大小和格式。如果圖像足夠大，通過使用精靈不會獲得太多收益，但對於小圖像，即使使用HTTP/2，也會獲得顯着收益。使HTTP/2更好的原因是頭文件的開銷少得多，甚至可能更少的往返（如果服務器實現了PUSH）。問題是，你的文件應該考慮捆綁它們多少？

對於位圖，您提出了一個很好的觀點，即PNG的優化算法適用於精靈，特別是如果它們的大小足夠小。例如，雖然this article from Gabriel Bouvigne中的圖像爲17.4 kb，但切片後會產生總計135 kb的132個獨立圖像。當你增加一個小但卻仍然存在的額外傳輸開銷時，它接近十倍。是的，當服務器和客戶端之間的帶寬有限時，大小仍然很重要。

實際上，這也達到文本資源，像javascript，css和SVG文件。如果它們足夠小並且不經常更換，那麼您仍然可以考慮將它們捆綁在一起。例如，如果將Angular的源文件的ng folder中的Javascript作爲單獨的，縮小的和壓縮的js進行傳輸，則需要69.6 kb。如果你在gzip之前連接它們，它只有31.9 kb。然而，這裏的因素略高於2，並且如果HTTP/2節省連接時間和往返次數，它可能不那麼重要。這進一步平衡了分別緩存資源的可能性。最後，如果你的小圖像/圖標是SVG矢量（它們應該！），那麼它們會被視爲文本資源。另外，SVG矢量往往有點大，例如，當壓縮時，Firefox's SVG icon是15.7kb。在這種規模下，如果HTTP/2的好東西在運行，那麼鏈接到內聯或捆綁的決定是不容易的。

Answer 2

我會同意它取決於@dsign。

有一種趨勢是內嵌小圖像的類型，這些小圖像通常會在CSS本身中用作數據url的sprites。如果您將圖像內嵌到CSS中，只需將它們保存爲單獨的條目，這也具有每個圖像優化的優點。精靈中一個圖像的優化與其他圖像不匹配...使用PNG時，您可以選擇使用Alpha透明圖層（例如TinyPNG和pngquant）以256色/低於256色的圖像進行潛在有損轉換。一些圖像可以在16種顏色下使用。在創建組合精靈時，這些優化更加有限。

我傾向於簡單地使用CSS內聯或保持圖像分離。積極的一點是，像webpack（以及其他人正在朝着的方向）這樣的工具使得這對Web應用程序來說是一個相當簡單的配置問題。

如果您希望通過HTTP/2實現服務器端圖像推送，那麼將它們分開更有可能對您有利。