Web制作者のみなさんは、PCサイトだけではなくスマートフォン向けのWebサイトを制作する機会がかなり多くなっていると思います。
スマートフォン向けのサイト製作で気をつけるべき点に、ページ容量とリクエスト数があります。画像ファイルの実装に関しては、以前から2つの実装方法が多く使われてきました。
この場合、
1は、ロゴ画像が単体ファイルで実装されているので1リクエストが発生します。
2は、SpriteはW:64px H:2720pxとサイズは大きいですが、リクエストはロゴと同じく1です。
ロゴ画像もSpriteに入れた場合は、リクエストは2→1に減ります。
多くのサイトはロゴ画像も汎用パーツなので、Spriteに入れてしまうケースが多いですが、Yahoo!JAPANは単体ファイルにしていました。
では、スマートフォンサイトの場合はどうアプローチすればよいのか？
基本的にはPCサイトと同様の2つのアプローチで問題ありませんが、もう一つ選択肢を増やして考えます。
- 画像ファイルを単体で実装
- 汎用的に使用する画像をSprite化して実装
- 画像ファイルをBase64変換をして実装
Base64変換とは何か？
簡単に言えば、画像ファイルを文字列として表示させることです。
FP（ガラケー）向けのWeb製作をした事がある方は、再配布禁止のために画像ファイルをテキストエディタで開いて、特定のコードをコピペする作業があったので見た事があると思いますが、要するに画像ファイルを分解すると、文字列で構成されています。
画像ファイルを64種類の英数字に変換して、表示させる実装方法が3番目にあげたBase64実装です。
変換の仕方は、ターミナルからコマンドで行う方法もありますが、下記の方法で試してみると良いです。
実装例としては、
imgタグに記載
<img src="data:image/hoge.png;**Base64変換した英数字**" />
backgroundプロパティのurlに記載
hoge{
background-image:url(data:image/hoge.png;**Base64変換した英数字**);
}
Base64変換をするのに適した画像ファイルは、
色数によって文字列の長さが変わります。
そのため、通常の画像圧縮をした後に変換した方が良いです。
また、色数が多い写真などはそのままjpgかpngの方が1リクエストを減らすよりも容量が小さくなる事があるため、何でもBase64変換した方が良い訳ではありません。
では、Yahoo!JAPANの例に戻ってスマートフォン版のYahoo!JAPANはロゴの部分を、
↓↓↓↓
[SP]汎用的に使用する画像をSprite化して実装
...Spriteに組み込まれていました。。
まとめ
- スマートフォンサイトでの画像ファイルの実装方法は3つの選択肢から検討する
- Base64変換して実装する場合は、リクエストを減らせるが、本当に文字列が画像ファイル(jpg or png)よりも容量が減っているのかを確認する
- Base64変換する画像は、色数が少ないものに限定した方がよい
- 1.2.3の実装方法の使い分けが軽量化に繋がる
