2012年6月30日（土） 、ベルサール九段で開催したCSS Nite LP, Disk 23「表示速度最適化」のフォローアップとして、岡部 和昌さんの『画像の最適化で地球をエコに』のスライドなどを公開します。
メッセージ
何かを押し売りそうな勢いでセッションをさせて頂きました岡部です。コンセプトは「熱く楽しくゆっくりと」だったのですがやりすぎたようです。
セッションにご参加いただきありがとうございました。内容としては基本的な内容となっていましたので、既にツールを使われている方や熟知している方には少しだけ退屈だったかもしれません。ですが運用時に考えることや、ナレッジなどもお話しましたので、そちらを業務などで活かせていただけたら幸いです。
セッションで出てきたツール関連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枚まで可能。
画像最適化複合ツール
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させたい画像でなければほぼ含めることが可能です。
