画像の最適化で地球をエコに
2012/06/30#cssnitelp23@kzms2

まずはじめに自己紹介
ヤフー株式会社 デザイナー
岡部和昌

Twitter : @kzms2
http://kzms2.com
http://dot3.jp

本日の内容•画像の最適化•CSS Sprite•各種ツールの使い方•実務フローでの例

やだそれ
知ってるという方も…

Back to basics

基本は大事なぜ大事？

ローコストハイパフォーマンス

どのデバイスでも効果が見込める

どのデバイスでも特にスマホで効果が見込める

画像について画像の種類一般的な画像の種類

各フォーマット特徴
透過

フルカラー

可逆性

使用容量

GIF

△××◯

JPEG×◯

×◯

PNG8

△※

××△

PNG24

◯◯

◯

△※

画像形式の選び方

アニメーションはGIF

色数の多い写真などはJPEG

それら以外はすべてPNG

PNG vs GIF
どちらが高速化向き？

PNG vs GIF

vs GIFPNG >PNGは圧縮に優れている

その他の画像の種類
•SVG

それぞれに

•WebP

非対応ブラウザ

•APNG

がある

画像の最適化画像最適化の種類•メタデータの除去•圧縮方式を最適化•色数を減らす(減色)PNGの最適化

画像最適化の種類•メタデータの除去•圧縮方式を最適化•色数を減らす (減色)
見た目に影響なし

ImageOptim
Mac
http://imageoptim.com/

PNGGauntlet
Windows
http://pnggauntlet.com/

画像最適化の種類•メタデータの除去
見た目に影響あり•圧縮方式を最適化•色数を減らす(減色)ImageAlphaMac
http://pngmini.com/

OPTPiX Snap
Windows
http://www.webtech.co.jp/onlinesoft/optpixsnap/

OPTPiX WebFreeWeb service
http://pnggauntlet.com/

JPEGの最適化

JPEGmini
Mac & Web service
http://www.jpegmini.com

実際に使ってみたImageAlpha & optim

使用前ImageAlpha & optim

使用後ImageAlpha & optim

使用前

使用後

容量の比較
通常

171.0KB

最適化 57.0KB

67%
OFF!

JPEGmini

使用前JPEGmini

使用後JPEGmini

使用前

使用後

容量の比較
通常

最適化

251.0KB
140.0KB

44%
OFF!

別アプリの書き出しと比較ImageAlpha 32色

32KB

Fireworks 256色

29KB

比較

ImageAlpha

Fireworks

ツール使用デモCSS Sprite

CSS Spriteってなに？

CSS Sprite•複数の画像を1ファイルに収める•CSSを用いて画像をずらして表示させる

CSS Sprite 画像例
Googlehttp://www.google.co.jp

Facebook
Yahoo! JAPANhttp://www.yahoo.co.jp

Twitter
http://twitter.com

http://www.facebook.com

アイコンを表示
span.icon{}

CSSアイコンを表示
span.icon{
background:url(sprite.png) no-repeat;}

CSSアイコンを表示
span.icon{
background:0px -200px url(sprite.png) no-repeat;}

CSS

CSS Spriteを用いれば高速化は容易

でも画像をまとめるのは容易じゃない…

ツール紹介SpritePad
Web service
http://wearekiss.com/spritepad

Stitches
Web service
http://draeton.github.com/stitches/SpriteMe
Bookmarklet
http://spriteme.org/

Fireworks CS6
Application
http://www.adobe.com/jp/products/
fireworks.html

CSS Spriteのポイント

ファイル名は常に変えていくべしたくさんの画像の集まり•つまりは更新頻度が多いということ•不慮の事態に備えていつでも戻せるようにする

CSS Spriteは一箇所から読み込む読み込み場所が複数の場合
span.iconA{
background:url(sprite.png) no-repeat;}
span.iconB{
background:url(sprite.png) 0 -50px no-repeat;}
span.iconC{
background:url(sprite.png) 0 -100px no-repeat;}

CSS読み込み場所が複数の場合
span.iconA{
background:url(sprite-120630.png) no-repeat;}
span.iconB{
background:url(sprite.png) 0 -50px no-repeat;}
span.iconC{
background:url(sprite-120630.png) 0 -100px no-repeat;}

CSS読み込み場所が複数の場合
span.iconA{background:url(sprite-120630.png) no-repeat;}
span.iconB{
background:url(sprite.png) 0 -50px no-repeat;}
span.iconC{
background:url(sprite-120630.png) 0 -100px no-repeat;}

適用漏れが出てくる可能性が高いCSS

まとめた場合
span.iconA, span.iconB, span.iconC{
background-image:url(sprite-120630.png);
background-repeat:no-repeat;}
span.iconB{
background-position:0 -50px;}
span.iconC{
background-position:0 -100px;}

CSS表示速度と運用負荷はトレードオフ

CSS Spriteの枚数と運用効率の関係性
Spriteの枚数

運用効率
運用効率

Sprite枚数が多いと運用効率は上がる
Spriteの枚数

運用効率
運用効率

テキスト
テキスト

この箇所だけまとめてあれば画像の変更や削除が容易

実務フロー例

基本的な流れ
1. 必要な画像を用意
2. CSS Spriteを作成
3. 画像を減色
4. コーディング
5. 画像を最適化(メタ除去など)

それらを踏まえてのデモまとめやれることからすべて実施しなくても効果は出ます画像最適化がもたらすことサービス提供側•本日紹介したツールはほぼ無料•サーバーにかかるお金が減る•電気代だって節約•サーバーが落ちにくくなるお客様側•通信費が安くすむ•表示速度が早くなり時間が浮く•電気代だって節約•ストレスも減る画像最適化はエコにつながるご清聴ありがとうございました