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

花幻蝶 - KAGENCHO - feat. Yuma、オペラさん (2025/8/26 新曲)