画像をコードに直接埋め込む
外部ファイルを使わずに画像を表示したい場合があります。例えば、スタイルシート内のアイコン、単一HTMLファイルのレポート用ロゴ、JSON APIレスポンスのプレースホルダー、Markdownドキュメント内の画像、コンポーネントライブラリの背景画像などです。このツールは、あらゆる画像をBase64にエンコードし、データURI、プレーンなBase64、CSSの background-image、HTMLの <img> タグ、Markdownの画像構文など、コピペですぐに使える形式に変換します。
主な機能
- 主要な全画像フォーマットに対応: PNG、JPG、GIF、WebP、AVIF、SVG、ICOなど。
- 5種類の出力フォーマット: 用途に合わせて選択可能。
- ファイルサイズ比較: 元ファイルとエンコード後のテキストサイズを比較。
- 画像プレビュー: 透過部分がわかる市松模様の背景付き。
- ワンクリックでコピー。
- プライバシー保護: ファイルはブラウザ内で処理され、外部に送信されることはありません。
出力例
| フォーマット | 出力例 |
|---|---|
| Data URI | data:image/png;base64,iVBORw0KGgo… |
| Base64 | iVBORw0KGgo… |
| CSS | background-image: url("data:image/png;base64,…"); |
| HTML | <img src="data:image/png;base64,…" alt="logo"> |
| Markdown |  |
埋め込み画像は軽量に
埋め込み画像は単独でキャッシュできないため、画像が含まれるページやスタイルシートが読み込まれるたびに再ダウンロードされてしまいます。原則として、数キロバイト以下の画像のみを埋め込むようにしましょう。まずは画像圧縮でファイルサイズを小さくするか、ビットマップ画像が必要な場合はSVG PNG 変換でベクターアイコンを変換してください。その他のファイルやテキストをエンコードする場合は、Base64エンコーダーをご利用ください。