Clever Geek Handbook

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番目の部分は便利に思えたので、全体を翻訳することにしました。


More articles:


All Articles