ホーム > カテゴリ > HTML5・JavaScript >

画像をBase64に変換してHTMLやCSSに埋め込む[リクエスト数の軽減]

画像ファイル(PNG/JPEG/GIF)をBase64の文字列に変換します。

変換

変換したい画像ファイルを選択するとBase64の文字列にエンコードされます。
※Javascriptで変換しますのでサーバーにファイルはアップロードはしません。



画像のファイルサイズが大きいとブラウザによっては例外が発生しますので、小さめの画像を選択してください。

Base64の画像について

画像ファイルをBase64に変換してHTMLやCSSに埋め込むと、リクエスト数が軽減されます。但し、Base64に変換する際にはファイルのサイズが約137%増加しますので、小さめの画像が対象となります。

HTMLへ埋め込む方法

PNGファイル

<img src="data:image/png;base64,xxx...">

JPG/JPEGファイル

<img src="data:image/jpeg;base64,xxx...">

GIFファイル

<img src="data:image/gif;base64,xxx...">

CSSへ埋め込む方法

PNGファイル

background: url(data:image/png;base64,xxx...) no-repeat;

JPG/JPEGファイル

background: url(data:image/jpeg;base64,xxx...) no-repeat;

GIFファイル

background: url(data:image/gif;base64,xxx...) no-repeat;

関連記事

Base64変換(エンコード/デコード)で日本語文字列に対応する





関連記事


前の記事：Image.onloadを同期で読み込む
次の記事：スライダーの変更イベントの対処方法[input type="range"]

公開日：2016年02月18日
記事NO：01775