画像読み込みを高速化するにあたり、HTTPリクエストを減らすためのテクニックの一つに、CSS Sprite等がよくつかわれていますね。
CSS Spriteについてはこことかでわかりやすい説明がされています。
とても便利なテクニックなのですが、Retinaディスプレイ対応など倍のサイズで作りまくっていると、いつの間にか肥大化していることもあります。
PCサイトの場合はそれでもいいのですが、スマホサイトの場合はiOSにおけるリソース制限などがあるので、大きすぎる画像は一部端末では表示されないなんてことになりえます。
これ、PCブラウザやエミュレーターでのチェックでは再現されないため、実機確認で切ないことになるのでご注意ください。
画像読み込み高速化の手段として、data URI Schemeが使いどころによってはよさそうなのでご紹介します。
data URI Schemeって?
画像などのファイルを「base64」にエンコードして、内部コードに埋め込む手法。インラインで画像を埋め込むため、HTTPリクエストは1つで済みます。
data URI Schemeのメリット
- ・外部ファイルを読み込まないので、HTMLリクエストが少ない
- ・HTML、CSSと同時に読み込まれるので表示が早い
- ・SVGやWeb Fontsファイルなども埋め込める
data URI Schemeのデメリット
- ・ファイルサイズが1.3倍に
- ・ブラウザによっては、ファイルサイズの制限や表示されない場合がある
- ・画像単位のキャッシュがきかない
- ・編集が多い画像には不向き
data URI Scheme(base64)への変換ツール
- ・Photoshop + Enigma64
- ・Sublime Text2 + Image2Base64
- ・Sass + Compass
.datauri { background-image:inline-image("img/image.png"); width:100px; height:100px; }
Sass + Compassだと、「URL」を「inline-image」にするだけなので、作成も管理も簡単になりおすすめです。
対応ブラウザ
- Firefox2+(100KBまで)
- Safari
- Chrome
- Opere7.2+(4100Bまで)
- IE8(32KBまで)
data URI Schemeの使いどころはあるの?
サイトを開いた際に表示されるローディングのGIFや、ソーシャルアイコンのボタンなどの単純で小さい画像などは、ファイルサイズが増える事よりもHTTPリクエストの回数を減らした方がメリットが大きいかと思います。
小さい画像とはいえ、あまりに多用しすぎると、ソースの視認性が悪くなる上に重くなってしまうのでバランスを考えて利用しましょう。
また、企業サイトなど多様なブラウザでの利用が想定されるサイトにも向いてないかと思います。逆に、スマホ専用サイトなどに利用すると、回線が弱くても表示がスムーズになる場面もあるでしょう。
まとめ
決して万能な手法ではないですが、適材適所で使い分け、サイトパフォーマンスの向上を図りましょう。
ユーザーにとって、より使いやすいサイトにしていくために。
それでは、皆様よいお年を

やす

最新記事 by やす (全て見る)
- CSS3アニメーションを使って魅せるボタンを実装しよう!! - 2014年2月28日
- ページ移動をかっこよく演出するjQueryプラグイン「fadeMover」のご紹介 - 2014年1月30日
- Data URI Schemeで画像を埋め込み、サイトを高速化しよう! - 2013年12月27日
- スマホの実機検証で悩むあなたへ!クラウド型端末検証サービス「Remote TestKit」が便利だよ - 2013年11月19日
- カイエ・蕎麦ージュ - 2013年6月5日
株式会社エレメントのサイトが新しくなりました!
スタッフが更新する最新情報・ブログはこちらからご確認いただけます。