オンラインでRetina画像対応CSSスプライトを作成するには以下のサイトが便利です。 手順としてはまず普通の画像のCSSスプライト（画像+CSS）を作成して、その後にRetina対応の画像のみを作成します。

● CSS Sprite Generator

http://spritegen.website-performance.org

● CSSスプライトを使ってメニューを作成する例

• http://spritegen.website-performance.org にアクセスする
• 【clear】を押してデフォルトの画像を消す。
• 【open】を押して、CSSスプライトで1つにまとめたい画像（ x1倍 ）をすべて選択する。
• 『Settings』の各種設定（マージンやCSSクラス名）を変更。（例 : クラス名は sp とします。）
• 【Downloads】を押して表示される画面から画像を任意の名前で保存。
• 【Downloads】を押して表示される画面からCSSを保存。

• CSSファイル内のスプライト画像のパスを書き換える

   background-image: url(spritesheet.png);   /* spritesheet.png を任意のパスに */
  

• CSSファイル内の .sp クラスに以下のプロパティを追加

  overflow:hidden;
  text-indent: 100%;
  white-space: nowrap;
  background-size: 100%;
  

• 同じ手順でRetina用画像のみを作成する