画像をBase64で埋め込むべきとき
コードと一緒に持ち運びたい小さなものに。1ファイルだけのHTMLページのアイコン、メールの署名やテンプレートのロゴ、JSONのデータやテスト用の素材に含める画像、別の素材ファイルを置けないCSSの背景など。ファイルは1つ、余分なリクエストなし、ホスティングも不要です。
画像→Base64
画像をBase64に変換する
画像をBase64のデータURIや、そのまま貼り付けられるHTML・CSS・Markdownのコードに。別ファイルなしで画像を埋め込めます。
出力形式
タップしてファイルを選択
ここに画像をドラッグ＆ドロップ
または ファイルを選択
または画像を貼り付け（Ctrl+V）
PNG, JPG, WebP, GIF, SVG, AVIF, ICO · 1ファイル最大10MB
Data URI
ここに結果が表示されます
くわしく知る
画像のBase64化：向いている場面
向いていないとき
Base64は元の画像より約3分の1大きくなり、しかもブラウザは埋め込んだページと別にキャッシュできません。おおよそ10KBを超えるなら、通常の画像ファイルのほうがたいてい速く表示されます。写真なら、先に圧縮しましょう。10MBまでの画像に対応しています。
使い方
画像をBase64に変換する方法
画像を追加する
画像ファイルをドラッグ＆ドロップするか、クリックして選びます。JPG・PNG・WebP・GIF・SVGなどに対応しています。
出力形式を選ぶ
出力形式を選びます。データURI、Base64のみ、HTMLのimgタグ、CSSのbackground-image、Markdownから選べます。
コピーして埋め込む
「コピー」を押して、HTML、スタイルシート、README、JSONに貼り付けます。ファイルとしてダウンロードすることもできます。
活用ガイド
コツとガイド
Base64を使うべきとき
Base64にした画像はHTMLやCSSに直接埋め込めるので、余分なHTTPリクエストがなくなります。小さなアイコンやスプライト、メールのテンプレートで特に便利です。
インラインのSVGや小さなPNGアイコン（10KB未満）なら、データURIのほうが別ファイルを読み込むより速いことが多く、体感の表示速度も上がります。
プロのコツプライバシー
画像はブラウザ内で処理されます。アップロードも、保存も、トラッキングもありません。
画像はブラウザの中でエンコードされます。自分で貼り付けるまで、Base64がサーバーを経由することはありません。
プライバシーよくある質問
よくある質問
画像のBase64変換について知っておきたいこと