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をダウンロード可能なファイルへ戻せます。

関連ツール

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

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

旗作成ツール

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

方眼紙ジェネレーター

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

ビジョンボードメーカー

目標をひとつのボードに視覚化：画像をアップロードし、オリジナルのタイトルとキャプションを添え、色とレイアウトを選べば、印刷用のPNGとしてダウンロードできます。入力した内容はすべてブラウザの中だけにとどまります。

クロスステッチ図案メーカー

JPEG・PNG・WebPを、10～150目、2～40色、記号、正確な目数、布サイズ付きの印刷可能なクロスステッチ図案に変換します。

ティアリスト作成ツール

テキストと端末内の画像から、非公開のティアリストを作成できます。行を編集し、ドラッグ操作やキーボードで順位付けして、JSON・PNG・SVGに書き出せます。

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