2012年6月30日（土） 、ベルサール九段で開催したCSS Nite LP, Disk 23「表示速度最適化」のフォローアップとして、岡部 和昌さんの『画像の最適化で地球をエコに』のスライドなどを公開します。

• スライド（PDF、86ページ、17.6MB）
• デモデータ（55KB）
• 音声

メッセージ

何かを押し売りそうな勢いでセッションをさせて頂きました岡部です。コンセプトは「熱く楽しくゆっくりと」だったのですがやりすぎたようです。

セッションにご参加いただきありがとうございました。内容としては基本的な内容となっていましたので、既にツールを使われている方や熟知している方には少しだけ退屈だったかもしれません。ですが運用時に考えることや、ナレッジなどもお話しましたので、そちらを業務などで活かせていただけたら幸いです。

セッションで出てきたツール関連URL

画像最適化ツール（メタデータ除去などの見た目がかわらないもの）

• ImageOptim make websites and apps load faster (Mac app)
  【Mac】画像のメタデータ除去などをドラッグアンドドロップで簡単にできる
• PNGGauntlet - PNG Compression Software | BenHollis.net
  【Windows】画像のメタデータ除去などをドラッグアンドドロップで簡単にできる
  

減色ツール

• [Web Technology Corp.]株式会社ウェブテクノロジ > OPTPiX Snap（オプトピクス スナップ）
  【Windows】画像の減色を美しい状態を保ったまま行うことが可能
• 無料画像加工サイト インデックスカラー減色と言えば | OPTPiX WebFree | ウェブテクノロジ
  【Webサービス】上記ツールのWebサービス版。一日5枚まで可能。
  

画像最適化複合ツール

• JPEGmini - Your Photos on a Diet!
  【Webサービス・Mac】JPEGを綺麗な状態のまま再圧縮を行う
  

CSS Sprite関連ツール

• The easiest way to create your CSS sprites - SpritePad
  【Webサービス】CSS Sprite画像を保存、CSSを自動で書き出しを行えて、また保存やシェア機能（有料）もある。
• Stitches - An HTML5 sprite sheet generator -
  【jQueryプラグイン】HTML5で作られたCSS Spriteツール。ローカルで動くので気軽に試すのには良い
• SpriteMe
  【ブックマークレット】任意のページでこのブックマークレットを使うと、そのページ内にある画像をCSS Sprite化してくれる。
• ★CSS Sprite Generator | Project Fondue
  【Webサービス】画像をZip形式でまとめてアップロードすると、CSS Spriteを勝手に生成してくれる。ソースコードは公開されているので自社内に設置することも可能。
  

★…セッションでは紹介しなかったものですが、他のおすすめツール

アンケートにあった質問の回答

画像を1ファイルにまとめたときの容量はどれくらいまでが最適か。

ケースバイケースなのでなんとも言いがたいですが、CSS Spriteは画像をまとめればまとめるほど容量は減るので、特に気にする必要はないです。ただし、CSS Sprite画像で使用している色数が多すぎると、減色時に見た目の変化が大きくなってしまうのでこちらもある程度のトレードオフは必要です。

spanではなく1x1のspacer.gifを用いて、その背景にCSS Spriteで表示させる手法についてどう思うか。

「spacer.gif」の1リクエスト余分に飛ぶのでCSSで指定するほうが良いと考えます。

Yahoo!ではどのくらいの効果があったか知りたい。

過去に記事を書いたのでそちらをご参照ください。

大規模サイトでの運用に関して聞きたい。

※Yahoo!としてではなく個人の見解として返答させてください。
やはり同名で画像を保存することは避けるべきです。以下その理由です。
1.大規模になればなるほど、ページごと・モジュールごとの更新や開発が入るため
2.画像同士のコンフリクトを避けるため
3.不慮の事態（表示崩れ）が起きたときに即座に戻せるため

ボタンなどを含めるかで悩むが、Yahoo!ではどういった基準があるのか。

※Yahoo!としてではなく個人の見解として返答させてください。できる限り1枚にすることをオススメします。y-repeat,repeatさせたい画像でなければほぼ含めることが可能です。