画像をdataURLで表示させてみた※速度比較あり
この記事はQiitaに投稿していたものです。最終更新:2021年09月03日
普通、画像を表示するときには<img src="./img/hoge.png">とか、<img src="http://example.com/hoge.png">とかやるわけですが、HTMLやCSSファイルに直接データを書く方法があるようなので試してみました。
やり方
HTMLに埋め込み
<img src="data:[<mediatype>][;base64],<data>">
画像はbase64エンコードするのが一般的です。
<mediatype>の部分にはいわゆるMIMEタイプが入ります。代表的なものは以下の通りになります。
| ファイル形式 | MIMEタイプ |
|---|---|
| PNG | image/png |
| JPEG | image/jpeg |
| GIF | image/gif |
| WebP | image/webp |
| AVIF | image/avif |
| APNG | image/apng |
| SVG | image/svg+xml |
<data>のところには画像をbase64エンコードしたものを用います。適当にオンラインサイトなりコマンドラインなりを使って画像ファイルから変換しましょう。例えばMac/Linuxだったら画像ファイルをbase64 hoge.png > hoge_base64.txtのようにbase64コマンドに渡してあげればできます。
例. png画像を埋め込む場合
<img src="data:image/png;base64,iVBORw0KGgoAAAA(以下省略)">
また、SVGファイルを埋め込む場合はbase64以外にもxmlをパーセントエンコーディングしたものも利用できます。その場合は以下のようになります。
<img src="data:image/svg+xml,%3Csvg%20version%3D%221.1%22(以下省略)">
CSSに埋め込み
同様の方法でCSSに埋め込むこともできます。例えば、
.hoge {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAA……");
}
といったようにurl()にdataURLを指定することができます。
外部ファイルの読込と速度を比較
Qiitaのファビコンを表示。検証はrepl.itのStarterプランでページをホスティングし、Googleの PageSpeedInsightsで「最大コンテンツの描画」にかかった秒数を3回計測して平均を取りました。
| file | data URL | 備考 | |
|---|---|---|---|
| time(s) | 1.0/0.3 | 0.8/0.2 | 書式はモバイル/パソコン |
| filesize(KB) | 3.86 | 5.15 |
ファイルサイズは増加しましたが、描画されるまでの時間は短縮されました。サーバやクライアントの環境にもよるとは思いますが、高速化する効果はありそうです。
メリット・デメリット
メリット
- 若干読込が高速化されます。
- JavaScriptで生成した画像を表示できます。例えばCanvasをtoDataURL(MDN)を利用してdataURLに変換し、DOMに差し込むことで画像ファイルとしてダウンロードできるようになります。(ただし、この場合はBlobでも代用可能です)
デメリット
- ブラウザによって文字数に制限のある場合(例えばOpera 11ではエンコードされた文字列は65529文字まで)があるので、使えるのは軽いファイルに限ります。
- HTMLファイルが長くなるのでメンテナンス性が落ちます。例えば折りたたみ機能のないエディタで見ざるを得ない状況になったらきっと発狂することでしょう。
- データ転送量が増加します。
まとめ
dataURLでHTML内に画像を埋め込む事ができます。若干早くなりますが、デメリットも大きいので使い所は考える必要があります。ただ、JavaScirptで生成した画像を動的に差し込む場合にはかなり有効な手段です。
Discussion