CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ（6）『スマートフォンサイトにおける画像の最適化と使いどころ』松田 直樹さん | CSS Nite公式サイト

2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、松田 直樹さん（まぼろし）の『スマートフォンサイトにおける画像の最適化と使いどころ』セッションのスライドなどを公開します。

• スライド

ご参加いただきました皆様、大変ありがとうございました。「スマートフォンサイトにおける画像の最適化と使いどころ」セッションを担当しました、まぼろしの松田でございます。

SVG、Web Icon Fonts、Data URI Scheme など、今まではあまり使われてこなかったフォーマットや手法をご紹介いたしましたが、駆け足的な説明になってしまいそれぞれ詳細までお伝えすることができませんでした。真意としては、まずは画像を扱う上での選択肢が増えている、という現状をご理解いただきたかったという点です。

紹介したネタは特段新しいもの、未来の画像の扱い方、というわけではありません。すべて今日からでも使えるネタ、特にスマホにおいては実用的なものです。どのフォーマットや手法がベストなのか、というのはサイトデザインや性質にもよりますので、まずはこれらの選択肢を使ってみる、とりあえず試してみるということからチャレンジいただく機会になれば幸いです！

以下、アンケートでいただきました質問への回答です。

SVG は .htaccess 使えないといけないのか？

.htaccess に、SVG の MIME Type「image/svg+xml」を AddType しておいた方がいいのですが、なくても大抵のブラウザは表示可能です。念のため img要素には「type="image/svg+xml"」を指定しておくといいでしょう。

ソフトバンクの Android では Gzip が効かない噂がある？

もしかしたら、Android 組込みの HttpComponent が標準では Gzip が有効になっていない件のことかもしれませんね。普通のスマートフォンのWebサイトで使用する分には問題ないように思います。

Base64 は拡大すると？

Base64 は、ビットマップなどのフォーマットではなく、単にエンコード手法なので、どんなフォーマットでも変換可能です。ですので、拡大するとボケるかどうかなどは変換元のフォーマットに準じます。

WebP とかどうなんでしょう？

Google が開発元となっている静止画の新フォーマットで、非可逆圧縮と可逆圧縮のどちらも扱えて、かつより軽量化できる、という期待のフォーマットですが、現状、Android 4以降のブラウザ、およびChrome、Operaしか対応していません。他ブラウザへの Fallback が手間でなければ使ってみてもいいかもしれません。ちなみに、YouTube の UI は WebP を多用して実装されていますのでご参考まで。

SVG が使えない環境での代替手段でベストなものは何？

個人的には、modernizr.js での判別、もしくは canvg.js による変換で対処しています。スライドの中で SVG 非対応ブラウザに対する Fallback を紹介しておりますので、そちらをご参考ください。

また、セッションにてご紹介した参考サイトとなります。

• SVGO GUI(Mac)
• SVG Cleaner(win)

• Flat UI
• BAKE BRAVE
• Wikipedia 東京都 :

• canvg.js
• Raphaël
• SVG.JS
• Two.js

• ADC PLUS
• Jake Giltsoff

• Font Awesome
• Fontello
• IcoMoon
• Font Custom
• MONO SOCIAL ICONS FONT

• Wikipedia - Data URI scheme
• CA石本さんの分かりやすい記事「データURIスキーム

• Data URI Converter
• duri.me
• Image2Base64
• Photoshop + Enigma64 (Plug in)

• Gzip を有効にする「Apache モジュール moddeflate」

改して、みなさまありがとうございました！