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
改して、みなさまありがとうございました！
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
