ホーム > カテゴリ > 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


この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
プチモンテ代表、アーティスト名：プチモンテ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ～

オリジナル曲を始めました✨

YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte

【男性ボーカル】DA・KA・RA | 新たな明日が風と共に訪れる

【男性、女性ボーカル】時空を超越する先に | 時空と風の交響曲

【女性、男性ボーカル】絆 | 穏やかな心に奏でる旋律