javascript - このスプライト画像はどのように生成されるのでしょうか?

Question

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

通常の写真よりもはるかに小さいです。サイズ1600*2444なのに70kbしかない？品質が低下しましたか？
開発時、この組版は一つ一つ手作業で行われたのでしょうか？または i ツールによって生成されます

Answer 1

この画像は 8 ビット PNG (最大 256 色) です。単純な色の画像の場合は、この形式を使用してサイズを縮小できます。

Answer 2

/a/11... というツールがあります

画像圧縮が利用可能ですgulp-imagemin。これにより、プロジェクトをワークフローに簡単に統合できます。

今はスプライト画像を使用している人は比較的少なく、代わりにsvgやアイコンフォントを徐々に使用しているようです。

Answer 3

通常はツールに依存します。私は通常 CssSprite.exe を使用します。画像をドラッグするだけでスプライト画像と対応する CSS が生成されます

Answer 4

CssSprite.exe も手動でドラッグする必要があります

Answer 5

Photoshopなどの画像編集ソフトウェアを使用して複数の写真を同じレイヤーに配置してエクスポートしたり、自動構築ツールを使用して結合した写真を自動的にステッチしたりすることができます