Article (記事): 2013年9月アーカイブ

スマートフォン向けのサイト製作で気をつけるべき点に、ページ容量とリクエスト数があります。画像ファイルの実装に関しては、以前から2つの実装方法が多く使われてきました。

例としてPC版のYahoo!JAPANを参考に見ていきたいと思います。

この場合、

1は、ロゴ画像が単体ファイルで実装されているので1リクエストが発生します。

2は、SpriteはW:64px H:2720pxとサイズは大きいですが、リクエストはロゴと同じく1です。

ロゴ画像もSpriteに入れた場合は、リクエストは2→1に減ります。

多くのサイトはロゴ画像も汎用パーツなので、Spriteに入れてしまうケースが多いですが、Yahoo!JAPANは単体ファイルにしていました。

では、スマートフォンサイトの場合はどうアプローチすればよいのか？

基本的にはPCサイトと同様の2つのアプローチで問題ありませんが、もう一つ選択肢を増やして考えます。

Base64変換とは何か？

簡単に言えば、画像ファイルを文字列として表示させることです。

FP（ガラケー）向けのWeb製作をした事がある方は、再配布禁止のために画像ファイルをテキストエディタで開いて、特定のコードをコピペする作業があったので見た事があると思いますが、要するに画像ファイルを分解すると、文字列で構成されています。

画像ファイルを64種類の英数字に変換して、表示させる実装方法が3番目にあげたBase64実装です。

変換の仕方は、ターミナルからコマンドで行う方法もありますが、下記の方法で試してみると良いです。

実装例としては、

<img src="data:image/hoge.png;**Base64変換した英数字**" />

hoge{

 background-image:url(data:image/hoge.png;**Base64変換した英数字**);

}

Base64変換をするのに適した画像ファイルは、

色数によって文字列の長さが変わります。

そのため、通常の画像圧縮をした後に変換した方が良いです。

また、色数が多い写真などはそのままjpgかpngの方が1リクエストを減らすよりも容量が小さくなる事があるため、何でもBase64変換した方が良い訳ではありません。

では、Yahoo!JAPANの例に戻ってスマートフォン版のYahoo!JAPANはロゴの部分を、

ex.m.Yahooのスプライト画像

...Spriteに組み込まれていました。。