Geekly Articles each Day

CSSコマンドラインスプライト

はい、CSSスプライトを作成するためのツールがあります。 私もそのようなサービスを作りました 。 しかし、彼らは時々壊れます（今のように、私のもの）。 しかし、チームには多くの価値があり、 imagemagickです。 コマンドラインからのみCSSスプライトを作成する方法を見てみましょう。

写真を作成する


まず、個々のファイルのリストがあります。
$ ls 

  1.png 2.gif dot.png phoney.gif tw.gif


それらからスプライトを作りましょう：
 $ convert *png *gif -append result/result-sprite.png

はい、それだけです。 結果を見ます。



詳細


imagemagickコマンドは通常次のようになります。
 $ convert image1.png image2.png image3.png -append result/result-sprite.png

写真のリストをアスタリスクに置き換えることができます。
 $ convert * -append result-sprite.png

または、前のケースのように、マスク* .gifおよび* .png。
水平スプライトはどうですか？ 必要なのは、-appendを+ appendに置き換えるだけです：
 $ convert *png *gif +append result/result-sprite-horizon.png


結果：


また、ソース画像は任意の形式（GIF、PNG、JPEG）にできることに注意してください。出力はPNGです。 PNG8から始めることをお勧めします。
 $ convert *png *gif -append PNG8:result/result-sprite-horizon.png


CSS


これらはすべて手動操作であるため、CSSは自動的に生成されません。 しかし、それも非常に簡単です。 垂直スプライトを取得します。


すべての画像のbackground-position-xプロパティは0pxに設定されます。
最初の16x16ピクチャのbackground-position-y座標も0pxです。 次に：
 .first { width: 16px; height: 16px; background: url(result/result-sprite.png) 0 0; }

...座標0 0はオプションであり、省略できます。
2番目の画像も16x16なので、より便利です。 そのX座標は0で、Yは反対の符号を持つ前の画像の高さです。
 .second { width: 16px; height: 16px; background: url(result/result-sprite.png) 0 -16px; }

などなど。 Y座標=前の要素のY-前の要素の高さ。
しかし...しかし...サイズを見つけて高さを追跡するたびに？ 冗談ですか
Imagemagickが助けになります。 'identify'を使用すると、画像に関する基本情報を取得できます。
 $ identify 1.png 

  1.png PNG 16x16 16x16 + 0 + 0 DirectClass 8ビット260b

'identify'にはオプション'-format'もあり、マスク*をサポートしています。 したがって、快適な方法ですべての情報を取得するのは簡単です。
 $ identify -format "%g - %f\n" * 

  16x16 + 0 + 0-1.png
 16x16 + 0 + 0-2.gif
 6x6 + 0 + 0-dot.png
 10x16 + 0 + 0-phoney.gif
 16x16 + 0 + 0-tw.gif

％fはファイル名、％gはジオメトリです。
\ n-簡単に表示するための改行。
したがって、5つの要素のY座標を取得する場合は、前の要素の高さを合計します：16 + 16 + 6 + 16
 .last { width: 16px; height: 16px; background: url(result-sprite.png) 0 -54px }


いくつかの最適化


Imagemagickは最適化されたPNGを生成しないため、最適化はほとんど必要ありません。 pngout、optipngなどを使用できます。 またはsmush.itやpunypng.comなどのWebツール。
または、コマンドラインでsmush.itについて：
 $ curl http://www.smushit.com/ysmush.it/ws.php?img=http://www.phpied.com/files/sprt/result/result-sprite.png

結果-JSONオブジェクト：
  {"src"： "http：\ / \ / www.phpied.com \ / files \ / sprt \ / result \ /result-sprite.png"、
  「src_size」：1759、
  "dest"： "http：\ / \ / smushit.zenfs.com \ / results \ / 5a737623 \ / smush \ /％2Ffiles％2Fsprt％2Fresult％2Fresult-sprite.png"、
  「dest_size」：1052
  「パーセント」：「40.19」、
  「id」：「」}

ほぼ2回保存。 「dest」フィールドをコピーします
 $ curl http:\/\/smushit.zenfs.com\/results\/5a737623\/smush\/%2Ffiles%2Fsprt%2Fresult%2Fresult-sprite.png > result/smushed-sprite.png

以上です。

まとめると


1.スプライトを作成します。
 $ convert *png *gif -append PNG8:result/result-sprite.png

2.サイズを取得します。
 $ identify -format "%g - %f\n" *png *gif

3.そして最適化：
 $ curl http://www.smushit.com/ysmush.it/ws.php?img=http://url...


Stoyan Stefanovの記事Command-line CSS spritingの翻訳 。

PS ImageMagickテーマはすでにハブで言及されていましたが、この記事の2番目の部分は便利に思えたので、全体を翻訳することにしました。

Source: https://habr.com/ru/post/J110002/

More articles:


All Articles