Softonic

Base64画像エンコーダー

ステップ 1 / 3 ここに画像をドロップ

処理中…

小さな画像をBase64 data URIとしてインライン化すると、HTTPリクエストを1つ減らし、HTMLやCSSと一緒に素材を運べます。このエンコーダーは5 MiB以下の対応するPNG、JPEG、GIF、WebP、SVGを受け付けます。デコード後のラスター画像は、各辺が16,384ピクセル以下、総画素数が33,554,432ピクセル以下である必要があります。ラスター画像はブラウザーでデコードを検証し、SVGはUTF-8の構造だけを確認して、Base64、CSS、HTML、JSON形式を生成します。利用先で互換性を確認し、信頼できないSVGはエンコード後もアクティブコンテンツとして扱ってください。

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

  1. 1

    画像をドロップ

    5 MiB以下のPNG、JPG、GIF、WebP、SVGを選択します。ラスター画像は各辺16,384ピクセル以下、総画素数33,554,432ピクセル以下で、エンコード後のテキストは7 MiB未満に収まる必要があります。

  2. 2

    エンコードはブラウザ内で実行

    画像のバイトを読み取り、Base64でエンコードし、正しい`data:` URIヘッダーを付けます。

  3. 3

    出力形式を選ぶ

    生のBase64、CSS `background-image`ルール、HTML `<img>`タグ、JSONで安全な文字列を選べます。

  4. 4

    結果をコピー

    利用先のdata URI対応、サイズ制限、コンテンツの安全性を確認してから貼り付けます。

画像のインライン化が有効な場面

インライン化に向くもの:

  • 2 KB未満のアイコン - 増加量はほぼ無視でき、HTTPリクエストを節約できます。
  • メールテンプレート - データURIへの対応はメールクライアントによって異なります。対象クライアントでテストし、必要に応じてCID画像またはホスト画像を使用してください。
  • ヒーロー画像のプレースホルダー（LQIP） - 低品質のぼかし版をインラインにし、完全な画像は後から読み込みます。
  • 1回だけ使うSVG - 予約文字を正しくパーセントエンコードすれば、非Base64のdata URIが短くなる場合があります。信頼できないSVGは引き続きアクティブコンテンツとして扱います。

向かないもの:

  • 大きな画像 - 500 KBの画像を33%膨らませると166 KBの無駄です。
  • 複数ページで再利用する画像 - インライン化すると、ルートをまたいだブラウザキャッシュが効きません。
  • クリティカルCSS - 重い画像をインラインにするとクリティカルパスが膨らみます。

サイズの目安

画像のサイズ Base64文字列のサイズ
500バイト 約680文字
2 KB 約2.7 KB
20 KB 約27 KB
200 KB 約270 KB

Data URIの形式

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==
  • data: スキーム
  • MIMEタイプ
  • ;base64, 指示子
  • エンコードされたバイト

SVGは特別な場合です

SVGはテキストですが、Base64とパーセントエンコードのどちらが短いかは内容と必要なエンコード量で変わります。非Base64形式ではdata:image/svg+xml,を使い、予約文字を正しくパーセントエンコードしてください。よく見かける;utf8は標準のパラメーターではなく、パーセントエンコードの代わりにもなりません。このツールはSVGをプレビューせず、UTF-8の構造だけを確認するため、信頼できないSVGはアクティブコンテンツのままで、Base64は無害化ではありません。

よくある質問

Base64は、data URIの囲みや転送圧縮を考慮する前の段階で、バイナリーデータをおよそ3分の1増やします。常に有利になる固定のサイズ境界はありません。リクエスト数、キャッシュ、圧縮、再利用頻度を比較し、実際のサイトで測定してください。

data URI自体に自動的なSEO上の利点はありません。検索エンジンは周囲のHTMLを扱いますが、CSS背景にはalt属性のような代替テキストがありません。意味のある画像には適切な代替テキスト付きの<img>を使い、性能は別に評価してください。

いいえ。エンコーダーはFileReader APIでローカルのファイルを読み、ブラウザ内でBase64文字列を生成します。データは端末から一切外へ出ません。

はい。Base64 to Imageツールを使うと、data:image/... URIをダウンロード可能なファイルへ戻せます。

関連ツール

QRコード生成ツール

テキストまたはURLから、ブラウザ内でQRコードを作成してPNGとしてダウンロードできます。

GIFメーカー

連番画像や短い動画をアニメーションGIFに変換します。書き出し前にフレームレート、ループ回数、サイズを調整できます。

バーコードジェネレーター

Code 128、EAN-13、UPC、ITF-14 など9種類の一次元バーコードを作成します。データはブラウザ内に残り、SVG または PNG をダウンロードできます。

写真エディター

切り抜き、回転、明るさ、コントラスト、彩度、フィルター、テキスト追加に対応し、JPG・PNG・WebPへ書き出せるブラウザベースの写真エディター。

PNGからSVGへのベクター変換

PNGのラスター画像をブラウザ内でSVGパスに変換します。ロゴ、アイコン、線画に最適です。しきい値、色数、スムージングを調整できます。

ファンタジーマップ作成ツール

再現可能なシード、地形コントロール、視覚スタイルを使って、ブラウザ内で手続き型のファンタジーマップを作成します。実在の地理ではなく、ローカルでSVGまたはPNGの作品をダウンロードできます。