Softonic

画像をBASE64に変換するコンバーター

ステップ 1 / 3
選択したファイルを復元中...

Base64データURLは、画像のメディアタイプとエンコード済みバイトをdata:image/png;base64,...のような1つの文字列にまとめたものです。20 MiB以下の画像を選ぶと、ブラウザ内でその値を生成します。コピー前に、元のファイル情報と生成されたデータURLのおおよその長さを確認できます。

画像をBase64でエンコードする方法

  1. 1

    画像を選択

    20 MiB以下の画像ファイルを1つ選択します。

  2. 2

    ローカルでエンコード

    ブラウザがファイルを読み取り、サーバーへ送信せずに完全なBase64データURLを作成します。

  3. 3

    結果を確認

    メディアタイプ、元のファイル情報、生成されたデータURLのおおよその長さを確認します。

  4. 4

    データURLをコピー

    完全な`data:image/...;base64,...`の値をクリップボードへコピーします。

インラインにするタイミング、リンクするタイミング

Base64による埋め込みは、サイズが33％増加する代わりにHTTPリクエストを1回節約できます。一部のアセットにとっては十分に価値がある一方で、他のアセットにとっては無駄になります。

サイズの計算

元のサイズ Base64サイズ 増加バイト数
1 KB 1.36 KB 360 B
10 KB 13.6 KB 3.6 KB
100 KB 136 KB 36 KB
1 MB 1.36 MB 360 KB

判断ガイド

ユースケース 埋め込みか外部か
2 KB未満のアイコン（SVGロゴ、スプライト） 埋め込み
CSSのカーソル画像（cursor: url()） 埋め込み
小規模な自己完結型HTMLまたはCSSデモ 埋め込み
JavaScriptペイロードに組み込むアイコン 埋め込み
ヒーロー画像、50 KB超 外部
個別にキャッシュできるもの 外部

データURIの形式

data:[<mediatype>][;base64],<data>

例：

  • data:image/png;base64,iVBORw0KGgo...、PNG
  • data:image/svg+xml;utf8,<svg>...</svg>、SVGは、base64を使わずにインラインで埋め込むほうが適している場合が多い
  • data:image/jpeg;base64,/9j/4AAQS...、JPG

ヒント

  • SVGはbase64の代わりにutf8エンコードのurl()として扱うほうが優れていることが多く、短く読みやすくなります。
  • エンコードは画像の内容を検査、無害化しません。特にSVGは動的要素や外部参照を含む場合があるため、信頼できるファイルだけを埋め込んでください。
  • JSONペイロード内の大きな画像は、非常に大きい場合に解析を妨げます。マルチパート形式や外部参照の利用を検討してください。
  • CSSのbackground-imageにbase64を使うときれいに埋め込めますが、ページ間のキャッシュが効かなくなります。

よくある質問

Base64は入力の3バイトを4文字にエンコードするため、出力は常に入力より約33％大きくなります。10KBの画像では約13,600文字の文字列が生成されます。長くなるのは正常です。

このコンバーターで扱えるのは20 MiB以下の画像1点です。これは処理上限であり、埋め込みの推奨サイズではありません。Base64は元のサイズを約3分の1増やし、画像を個別にキャッシュできなくするため、データURLは小さく保つのが基本です。

いいえ。Base64エンコードはブラウザ内で実行されます。画像がデバイスから外部に送信されることは一切ありません。

このエンコーダーでは復号できません。データURLや生のBase64文字列を画像ファイルに戻す場合は、別の「Base64から画像」ツールを使用してください。

関連ツール

マテリアルデザイン カラーピッカー

Material Designのカラーパレットを閲覧できます。任意の色調（50からA700）を1タップでHEX、RGB、HSL形式でコピーできます。

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

罫線入り用紙ジェネレーター

印刷できる罫線入り用紙を無料で作成。カレッジ罫、広め罫、狭め罫を選び、行間をmmで設定し、用紙サイズとマージン線を決めて、印刷またはSVGでダウンロードできます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

旗作成ツール

6種類のレイアウト、色、文字、シンボルで、シンプルな3:2のカスタム旗をブラウザ内でデザインします。SVGまたはPNGをダウンロードするか、ブラウザの印刷ダイアログを開けます。

ドット絵ジェネレーター

4×4～64×64の空白グリッドにドット絵を描けます。ペン、塗りつぶし、スポイト、ミラー、元に戻す機能を使い、透過PNG、SVG、プロジェクトファイルとして鮮明に書き出せます。

このツールは他の言語でも利用できます