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

49

スマートフォンサイト製作で画像ファイルの最適な実装方法は?Base64変換の可能性

Web制作者のみなさんは、PCサイトだけではなくスマートフォン向けのWebサイトを制作する機会がかなり多くなっていると思います。

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

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

  1. 画像ファイルを単体で実装
    ex.Yahooロゴ画像


  2. 汎用的に使用する画像をSprite化して実装
    ex.YahooのSprite画像
この場合、
1は、ロゴ画像が単体ファイルで実装されているので1リクエストが発生します。
2は、SpriteはW:64px H:2720pxとサイズは大きいですが、リクエストはロゴと同じく1です。

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

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

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

  1. 画像ファイルを単体で実装
  2. 汎用的に使用する画像をSprite化して実装
  3. 画像ファイルを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はロゴの部分を、

[PC]画像ファイルを単体で実装
ex.Yahooロゴ画像

 ↓
[SP]汎用的に使用する画像をSprite化して実装

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

まとめ
  • スマートフォンサイトでの画像ファイルの実装方法は3つの選択肢から検討する
  • Base64変換して実装する場合は、リクエストを減らせるが、本当に文字列が画像ファイル(jpg or png)よりも容量が減っているのかを確認する
  • Base64変換する画像は、色数が少ないものに限定した方がよい
  • 1.2.3の実装方法の使い分けが軽量化に繋がる