javascript - 這個雪碧圖是怎麼生成的？

Question

https://s1.hdslb.com/bfs/stat...

比普通的圖片小很多。尺寸1600*2444但只有70kb？品質降低？
還有開發的時候這個排版是手動一個一個弄的雪碧圖？還是靠i工俱生成的

Answer 1

這張圖是8bit png（最大256色），對於色彩簡單的圖可以用這種格式減少體積。

Answer 2

有工具，/a/11...

圖片壓縮可以用 gulp-imagemin。這樣就很容易在專案整合到工作流程。

現在看似用雪碧圖的相對少了些，逐漸在用svg及icon font取代了。

Answer 3

一般是靠工具的。我一般用的CssSprite.exe,只用自己把圖片拖進去，然後會給你生成雪碧圖以及對應的css

Answer 4

CssSprite.exe也是要手動拖進去的

Answer 5

可以使用影像編輯軟體如Photoshop將多張圖放到同一個圖層並導出或使用自動化建構工具自動拼接合併後的圖片