CSSスプライトを作成するツール？

直接的な答えではありませんが、私の仲間の開発者やWebインテグレーターには、各Spriteを単純に2のべき乗に揃えることを検討してください。たとえば、16ピクセルまたは32ピクセルのグリッド。 CSSファイルでのオフセットの計算がはるかに簡単になります。 gifdおよびpng形式はそれを非常によく圧縮するため、間の空白はすべて重要ではありません。

Magnus · Answer

https://github.com/northpoint/SpeedySprite

このツールは、要求された画像をHTTPサービスとしてオンザフライで組み立てるという点で、新しいアプローチを採用しています。これにより、プロセス全体が非常に単純になります（前処理は不要で、いつでも画像を変更できます）。サービスを開始し、HTMLで必要な画像を参照します。

<link href="css/my-images-dir/" rel="stylesheet"> <div class="my-image-name-here" />

動的であるため、サムネイルページなどの動的な画像セットからスプライトを作成することもできます。ただし、JPEGはサポートしていませんが、PNGおよびGIFは正常に機能します。

shwoodard · Answer

Active_assets gemの一部であるActiveSpritesと呼ばれる新しいツールがあります。

Github： http://bitly.com/eRTwU4

Ruby dslを使用してスプライトを定義し、「レーキスプライト」を実行すると、スプライトと対応するスタイルシートが生成されます。

それはラッドです！

以下にサンプルコードを示します。

# config/sprites.rb Rails.application.sprites do Sprite 'sprites/Sprite1.png' => 'sprites/Sprite1.css' do _'Sprite_images/Sprite1/1.png' => 'a.one' _'Sprite_images/Sprite1/2.png' => 'span.two' end end

Stephen James · Answer

Photoshopスクリプトを介して画像をCSSスプライトに結合するのスクリプトを次に示します。あなたが尋ねたようにSpriteマップは行いませんが、同じサイズであれば、2の倍数（2、4、8）で画像を結合します。すべての画像を1つのファイルに収めるよりも、類似した画像（通常、ホバー、選択済み、選択済みの親）を組み合わせることを好みます。

Aaron Digulla · Answer

Javaが好きなら、「 ImageBundle 」と呼ばれるものが付属するGWT 1.5+を使用できます。 GWTコンパイラーがすべての厄介な詳細を処理します。 1行のJavaScriptをコーディングしたり、CSSを作成したりする必要さえありません。

aberant · Answer

railsでRubyを使用している場合、CSSスプライトを生成するためのライブラリを簡単にインストールできます。

http://github.com/aberant/spittle

technosaurus · Answer

これらのツールはどれも私の要件を満たしていなかったので、Mark Tylersの小さな画像ライブラリであるmtpixelを使用するツールを作成しました（現在は mtcelledit の一部です）。これは非常に大規模ではありませんが、mtpixelの組み込み関数で簡単に拡張可能ですグレースケール、カラー反転、回転、シャープニング、クオンタイズ、ポスタライズ、フリップ（垂直および水平）、変換、rgb->インデックス付き、インデックス付き-> rgb、エッジ検出、エンボス、ポリゴンの描画、テキストなど。

一連の画像をargs（png、gif、およびjpegをサポート）として渡すだけで、Sprite.pngと呼ばれるrgb pngと便利な画像スライスデータがstdoutに出力されます。 bashスクリプトでそれを使用して、画像のディレクトリ全体をspritifyし、cssの自動生成のためにスライスデータを出力します（最終的に、既存のimgタグを創造的なsed/awkの一部で自動的に置換できるようにすることを望みます）

Puppy Linuxのバイナリパッケージは次のとおりです。

http://murga-linux.com/puppy/viewtopic.php?t=82009

私の使用例では、画像を新しいpngに垂直につなぐだけでよいので、それだけで十分ですが、ソースコードはパブリックドメインであり、mtcelleditライブラリはgpl3です。 mtpixelが静的にリンクされている場合、バイナリは<100kb（動的にリンクされた場合は数kbのみ）で、他の依存関係はlibpng、libjpeg、libgif（および公式mtpixelのfreetypeのみですが、テキストサポートは必要ないので、静的ビルドのfreetypeビットをコメントアウトしました）

必要に応じて自由に変更してください。

#include <stdlib.h> #include <stdio.h> #include <string.h> #include <mtpixel.h> int main( int argc, char *argv[] ){ int i=0,height=0,width=0,y=0; mtpixel_init(); mtImage *imglist[argc]; argc--; do{ imglist[i] = mtpixel_image_load( argv[i+1] ); height+=imglist[i]->height; if (imglist[i]->width > width) width=imglist[i]->width; } while (++i < argc); imglist[argc]=mtpixel_image_new_rgb(width,height); imglist[argc]->palette.trans=0; i=0; do{ if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED) mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); printf("name=%s;width=%d;height=%d;y_offset=%d
",argv[i+1],imglist[i]->height,imglist[i]->width,y); y+=imglist[i]->height; mtpixel_image_destroy( imglist[i] ); }while (++i < argc); mtpixel_image_save( imglist[argc], "Sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); mtpixel_quit(); return 0; }