当ブログで使われている画像の一部をデータURIスキームにしました。
Internet Explorerの8より前のバージョンを使っている人はもういないと思うので、ほとんどの環境の人が以前と変わらずに閲覧できていると思います。
◆データURIスキームとは
簡単にいうと、下のようにしてURIに直接データを埋め込むものです。バイナリは直接埋め込めないのでbase64に変換して埋め込みます。
上はこんな赤い画像を表示します。

◆長所
HTTPのリクエスト数を少なくすることでオーバーヘッドが減り、結果的に表示が速くなる。
◆短所
Internet Explorerの古いバージョンが未対応。
しかし、使っている人はほとんどいないはずなので、この短所は考えなくていいと思う。
◆キャッシュされない問題
画像ファイルならブラウザにキャッシュされるが、HTMLに埋め込みだと毎回その分もダウンロードすることとなる。
この問題を回避する方法としては、スタイルシートの背景画像にするなどしてCSSファイルに埋め込んでしまう手がある。CSSファイルをキャッシュするということです。
◆base64に変換するツール
ツールは沢山あるが、自分はfirefoxのアドオン「Stylish」についてるエディタを使用してる。本来はユーザースタイルシートを管理するものだが、変換専用のツールを探すのが面倒くさいので、これで間に合わせた。
[追記]stylishのこの機能はバージョンアップとともに無くなってしまいました…。
Internet Explorerの8より前のバージョンを使っている人はもういないと思うので、ほとんどの環境の人が以前と変わらずに閲覧できていると思います。
◆データURIスキームとは
簡単にいうと、下のようにしてURIに直接データを埋め込むものです。バイナリは直接埋め込めないのでbase64に変換して埋め込みます。
<img src="data:image/gif;base64,R0lGODlhKAAoAIAAAP8AAAAAACwAAAAAKAAoAAACJ4SPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s4jBQA7">
上はこんな赤い画像を表示します。
◆長所
HTTPのリクエスト数を少なくすることでオーバーヘッドが減り、結果的に表示が速くなる。
◆短所
Internet Explorerの古いバージョンが未対応。
しかし、使っている人はほとんどいないはずなので、この短所は考えなくていいと思う。
◆キャッシュされない問題
画像ファイルならブラウザにキャッシュされるが、HTMLに埋め込みだと毎回その分もダウンロードすることとなる。
この問題を回避する方法としては、スタイルシートの背景画像にするなどしてCSSファイルに埋め込んでしまう手がある。CSSファイルをキャッシュするということです。
◆base64に変換するツール
ツールは沢山あるが、自分はfirefoxのアドオン「Stylish」についてるエディタを使用してる。本来はユーザースタイルシートを管理するものだが、変換専用のツールを探すのが面倒くさいので、これで間に合わせた。
[追記]stylishのこの機能はバージョンアップとともに無くなってしまいました…。

コメント