画像をBase64に変換、SVGをData URIに変換
ホーム 画像Base64変換ツール
画像をBase64に変換 + SVGをData URIに変換するツール | We.Inc
PNG、JPG、WebP、GIF、SVG画像をブラウザー内でBase64のData URIに変換します。imgタグ、CSSの背景、JSONとしてコピーでき、SVGにはより小さいURLエンコード版も用意。インライン化する価値があるかも確認できます。
Base64は画像のバイトをテキストに変換し、src="data:image/png;base64,..."のようにData URIとしてHTMLやCSSの中に埋め込めるようにします。テキストは元のファイルより約3分の1大きくなります。下に画像をドロップすると、Data URI、すぐに使えるimgとCSSのスニペット、インライン化する価値があるかどうかのアドバイスが得られます。
インライン化が役立つ場合と逆効果な場合
4 kB未満のアイコン 通常はする わずかなコストでリクエストを1回減らせる SVGのロゴやアイコン する、URLエンコードで Base64より小さく、読める状態を保てる ファーストビューの画像（4〜20 kB） 場合による 1ページにしか表示されない場合のみ 写真、または20 kBを超えるもの しない 毎回の読み込みが重くなり、単独でキャッシュできない 画像を1枚または複数ドロップしてください。それぞれのBase64のData URIと、SVGファイルの場合は通常より小さくなるURLエンコード版が生成されます。どれもimgタグ、CSSの背景、JSONの値としてコピーできます。ファイルが端末の外に出ることはありません。
ボックスに画像をドロップするか、クリックして選択します。PNG、JPG、WebP、GIF、AVIF、ICO、SVGに対応しています。 ブラウザーが各ファイルを端末内で読み込んでエンコードします。何もアップロードされません。 元のサイズとエンコード後のサイズを比較し、インライン化すべきかの判定を確認します。 必要な形式をコピーします。生のData URI、imgタグ、CSSのbackground-image、JSONから選べます。 先に圧縮してからエンコードしましょう。300 kBの写真をエンコードすると約400 kBのテキストになり、元のファイルより悪くなります。 SVGの場合、URLエンコード形式ならBase64をまったく使いません。通常はこちらのほうが小さく、マークアップを読んだり編集したりもできます。 CSS内のData URIはスタイルシートと一緒にダウンロードされ、描画をブロックします。すべてのページで必要な小さなアイコンだけにとどめましょう。 altテキストを忘れずに。インライン化した画像にも、スクリーンリーダー向けの説明が必要です。装飾的な画像ならalt=""を指定します。 よくある質問
Base64版が元の画像より大きいのはなぜ？
Base64は3バイトごとに4文字のテキストを使うため、出力は約33%大きくなり、さらに数バイトのパディングとdata:の接頭辞が加わります。ページ側でGzipやBrotliの圧縮をかけるとその一部は取り戻せますが、すべてを取り戻せることはまれです。
SVGにはBase64を使うべき？
通常は使うべきではありません。SVGはもともとテキストなので、いくつかの文字をエスケープするだけでData URIに入れられます。その形式は一般にBase64より小さく、読める状態も保てます。貼り付け先のツールがURLエンコード形式を受け付けない場合にだけBase64を使いましょう。
Data URIはメールでも使えますか？
対応状況はまちまちです。主要なメールクライアントのいくつかはData URIの画像をブロックしたり削除したりするため、ニュースレターでは画像をホスティングしてリンクするか、コンテンツIDを付けて添付しましょう。
Data URIにサイズ制限はありますか？
現在のブラウザーは、imgタグやCSSで非常に長いData URIを受け付け、その長さは常識的な画像のサイズをはるかに超えます。実際の制限はパフォーマンスです。大きなインライン画像は、それを含むファイルの読み込みを遅くします。一部の古いツールやメールクライアントでは途中で切り捨てられることがあります。
Data URIの構造
Data URIは3つの部分からなります。data:スキーム、image/pngなどのメディアタイプ、そして内容です。バイナリ画像の場合、内容はBase64で、タイプの後に;base64が続きます。SVGのようなテキスト形式では、いくつかの文字をパーセントエンコードしたマークアップそのものを内容にできます。 ブラウザーはData URIを他の画像ソースと同じように扱います。メモリ上でデコードされるため追加のリクエストは発生しませんが、個別のキャッシュエントリーもありません。画像は、それを含むページやスタイルシートが読み込まれるたびに毎回ダウンロードされます。 ほとんどの画像にはもっと良い選択肢がある
アイコンより大きなものは、HTTP/2やHTTP/3で配信する通常のファイルのほうがほぼ確実に高速です。複数のリクエストが1つの接続を共有し、画像は単独でキャッシュされ、ブラウザーは遅延読み込みや、srcsetを使って適切なサイズでの読み込みができます。 それでもインライン化が役立つ場面はあります。1つのコンポーネント内の小さなアイコン、本来の画像の読み込み中に表示するプレースホルダー、レポートやオフラインのデモなどの自己完結型のHTMLファイルです。 インライン化に十分な小ささです。リクエストを1回減らせ、埋め込み先のファイルもほとんど大きくなりません。
判断が分かれるサイズです。1ページのファーストビューに表示される場合だけインライン化しましょう。それ以外は通常のファイルのほうがキャッシュに有利です。
Data URI
JSON
不明な形式
、{w} x {h} px
ファイル {file}、エンコード後 {encoded}（ファイルの{pct}%）
SVGのエンコード方式
URLエンコードしたSVG（{size}）
Base64（{size}）
コピーする形式
...（{n}文字。全文はコピーを使ってください）
{name}の出力
コピー
{name}は画像ではないため、スキップしました。
画像をエンコード
ここに画像をドロップするか、クリックして選択してください。画像は端末の外に出ません。
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る