デザイナーの石井です。
早いもので今年ももう残すところ2週間程となってしまいました。
何かと忙しい年の瀬、皆様いかがお過ごしでしょうか。
前回FlashのTweenライブラリについて記事を書かせて頂きましたが、先日Adobeからモバイル向けFlash Playerの開発中止が発表されとても驚かされました。
色々な見解があるとは思うのですが、HTML5 / CSS3の流れに対してさらなる追い風になるニュースには間違いがないと思います。
またつい先日は、遂にといいますか、Microsoftが来年よりIEの自動アップデートを始めるというニュースもありました。
Webを取り巻く環境はまさに日進月歩、目まぐるしく変わりますが、本質を見誤らず、特にユーザーやお客様の目線に立って、本当に使いやすいサイトとは何かを考え、提案や制作物に落とし込めるよう努力していきたいものです。
さて、ユーザーが使いやすいサイトとは何かと考えた時に、挙げられるものの一つとして「サイトの表示スピードの高速化・最適化」というのがあると思います。
先日、私のようなデザイナーがフロントエンドで実施できるパフォーマンスチューニングについて調べる機会がありました。
その時に初めて知ったdataスキームURIという技術があったので、今回はこちらをご紹介したいと思います。
httpリクエストの削減があると思います。
今回ご紹介するのは、画像ファイルをBase64エンコードして
htmlにインラインで埋め込む事で、リクエスト数を減らすというテクニックです。
この技術自体はかなり前から存在してるものの様なのですが、今まではIEがこの技術に対応しておらず、実際にはあまり利用されて来なかったようです。
しかしながらIE8からは対応されているので、今後は利用できる機会が増えるのではないでしょうか。
この書式にのっとって実際にRSSアイコン画像を埋め込んでみると、このようになります。
【通常】
【dataスキームURIを使った画像の埋め込み】
この様にエンコードしたデータは、外部のCSSやJavascriptにも埋め込みが可能です。
画像のBase64のエンコードは下記のような変換ツールで簡単に変換することができます。
PHPが使える環境であれば、動的に変換しても良いかも知れません。
ブラウザごとに利用できるバイト数も限られているようです。
対応ブラウザ
また、元の画像容量よりも30〜40%サイズが増加することに加え、当然大きな画像になればなるほどバイト数も膨大になりますので、あまり大きな画像を埋め込むとhtmlのサイズが増え逆効果ということも考えられます。
外部CSSに記述しキャッシュを効かせる事もできますが、例えば小さなアイコン画像に限るなど、使い所は考える必要があります。
しかし日々制作の中でちょっとした事に気を付ける、高速化のためにできることを考える習慣をつけておくことが、実際にシビアな調整が必要になった場合に対策の引き出しを増やすことにつながるのではないかと思います。
早いもので今年ももう残すところ2週間程となってしまいました。
何かと忙しい年の瀬、皆様いかがお過ごしでしょうか。
前回FlashのTweenライブラリについて記事を書かせて頂きましたが、先日Adobeからモバイル向けFlash Playerの開発中止が発表されとても驚かされました。
色々な見解があるとは思うのですが、HTML5 / CSS3の流れに対してさらなる追い風になるニュースには間違いがないと思います。
またつい先日は、遂にといいますか、Microsoftが来年よりIEの自動アップデートを始めるというニュースもありました。
Webを取り巻く環境はまさに日進月歩、目まぐるしく変わりますが、本質を見誤らず、特にユーザーやお客様の目線に立って、本当に使いやすいサイトとは何かを考え、提案や制作物に落とし込めるよう努力していきたいものです。
さて、ユーザーが使いやすいサイトとは何かと考えた時に、挙げられるものの一つとして「サイトの表示スピードの高速化・最適化」というのがあると思います。
先日、私のようなデザイナーがフロントエンドで実施できるパフォーマンスチューニングについて調べる機会がありました。
その時に初めて知ったdataスキームURIという技術があったので、今回はこちらをご紹介したいと思います。
dataスキームURIとは？
フロントエンドでの高速化対策として挙げられるものの中に、httpリクエストの削減があると思います。
今回ご紹介するのは、画像ファイルをBase64エンコードして
htmlにインラインで埋め込む事で、リクエスト数を減らすというテクニックです。
この技術自体はかなり前から存在してるものの様なのですが、今まではIEがこの技術に対応しておらず、実際にはあまり利用されて来なかったようです。
しかしながらIE8からは対応されているので、今後は利用できる機会が増えるのではないでしょうか。
dataスキームURIを使って画像を埋め込む
dataスキームURIの書式は下記の通りです。data:[メディアタイプ][;base64],データ
この書式にのっとって実際にRSSアイコン画像を埋め込んでみると、このようになります。
【通常】
<img src="http://mt.blog.cybridge.jp/img/feed-icon.png" alt="" width="14" height="14" />
【dataスキームURIを使った画像の埋め込み】
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJDSURBVHjajJJNSBRhGMd/887MzrQxRSLbFuYhoUhEKsMo8paHUKFLdBDrUIdunvq4RdClOq8Hb0FBSAVCUhFR1CGD/MrIJYqs1kLUXd382N356plZFOrUO/MMz/vO83+e93n+f+1zF+kQBoOQNLBJg0CTj7z/rvWjGbEOIwKp9O7WkhtQc/wMWrlIkP8Kc1lMS8eyFHpkpo5SgWCCVO7Z5JARhuz1Qg29fh87u6/9VWL1/SPc4Qy6n8c0FehiXin6dcCQaylDMhqGz8ydS2hKkmxNkWxowWnuBLHK6G2C8X6UJkBlxUmNqLYyNbzF74QLDrgFgh9LLE0NsPKxjW1Hz2EdPIubsOFdH2HgbwAlC4S19dT13o+3pS+vcSfvUcq9YnbwA6muW9hNpym/FWBxfh0CZkKGkPBZeJFhcWQAu6EN52QGZ/8prEKW+cdXq0039UiLXhUYzdjebOJQQI30UXp6mZn+Dtam32Afu0iyrgUvN0r+ZQbr8HncSpUVJfwRhBWC0hyGV8CxXBL5SWYf9sYBidYLIG2V87/ifVjTWAX6AlxeK2C0X8e58hOr/Qa2XJ3iLMWxB1h72tHs7bgryzHAN2o2gJorTrLxRHVazd0o4TXiyV2Yjs90uzauGvvppmqcLjwmbZ3V7BO2HOrBnbgrQRqWUgTZ5+Snx4WeKfzCCrmb3axODKNH+vvUyWjqyK4DiKQ0eXSpFsgVvLJQWpH+xSpr4otg/HI0TR/t97cxTUS+QxIMRTLi/9ZYJPI/AgwAoc3W7ZrqR2IAAAAASUVORK5CYII=" alt="" width="14" height="14" />
この様にエンコードしたデータは、外部のCSSやJavascriptにも埋め込みが可能です。
画像のBase64のエンコードは下記のような変換ツールで簡単に変換することができます。
- Image To Data URI Convertor - webSemantics
- DataURL.net - Data URL Maker, Data URL CSS Optimizer and the Data URL Toolkit
- data: URI image encoder
- The data: URI kitchen
PHPが使える環境であれば、動的に変換しても良いかも知れません。
dataスキームURIを使う際の注意点
まずは、先述したように対応ブラウザには注意が必要かと思います。ブラウザごとに利用できるバイト数も限られているようです。
対応ブラウザ
- Firefox2+
- Safari
- Chrome
- Opera7.2+
- IE8+
また、元の画像容量よりも30〜40%サイズが増加することに加え、当然大きな画像になればなるほどバイト数も膨大になりますので、あまり大きな画像を埋め込むとhtmlのサイズが増え逆効果ということも考えられます。
外部CSSに記述しキャッシュを効かせる事もできますが、例えば小さなアイコン画像に限るなど、使い所は考える必要があります。
まとめ
サイトのパフォーマンスチューニングはフロントエンドのみならず、サーバサイドやプログラムなど、複合的な要因があり、「これをやっておけば正解」というものは無いかも知れません。しかし日々制作の中でちょっとした事に気を付ける、高速化のためにできることを考える習慣をつけておくことが、実際にシビアな調整が必要になった場合に対策の引き出しを増やすことにつながるのではないかと思います。