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

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 を紹介しておりますので、そちらをご参考ください。

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

SVGの最適化ツール

SVGの参考サイト

SVG関連ライブラリ

Web Icon Fonts 参考サイト

Web Icon Fonts の生成

Data URI Scheme

Base64への変換

Gzip

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

2016年に開催されたCSS Nite関連の38イベントからベスト・セッションを選出しました。

CSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」

3月に都内で好評のうちに終了したCSS Nite LP51「Reboot Dreamweaver」の大阪版を5月13日に開催します。