4種類の便利な出力
Raw Base64、完全なデータURI、HTML画像要素、すぐに使えるCSS背景宣言をコピーできます。
画像ツール
•
無料オンラインツール
画像をBase64に変換
PNG、JPG、WebP、GIF、SVG画像をブラウザー内で直接Base64にエンコードします。
無料で利用
登録不要
ブラウザで利用
オンラインツール
画像をBase64に変換
準備完了
ブラウザー内で動作するプライベート画像エンコーダー
画像をアップロードせずにBase64へ変換
画像をRaw Base64文字列、完全なデータURI、HTML画像タグ、CSS背景値としてエンコードします。処理はブラウザー内でローカルに実行されます。
正確なサイズ分析
元ファイルとエンコード結果を比較し、インラインで使用する前に正確なサイズ増加を確認できます。
ローカルで安全
元画像と生成されたBase64データはブラウザーのメモリー内に保持され、変換のためにアップロードされません。
エンコードする画像をアップロード
ドラッグ＆ドロップ、クリップボードから貼り付け、または端末から画像を選択
画像をコピーしてCtrl+VまたはCommand+Vを押してください ブラウザー内でローカル処理
選択した画像
- ファイル名
- ファイル形式
- 画像サイズ
- 元のサイズ
- 推定Base64サイズ
大きなファイルが検出されました
Base64出力は元ファイルより約33%大きくなり、多くのブラウザーメモリーを必要とする場合があります。
Base64エンコードでもアニメーションGIFのデータは保持されます。
SVGはもともとテキスト形式です。HTMLでは、インラインSVGマークアップの方がBase64より小さく柔軟な場合があります。
画像をエンコードする前に認証を完了してください。
画像をエンコード中
ブラウザー内で画像を読み込み、ローカルにエンコードしています…
生成されたBase64出力
画像を正常にエンコードしました。
生成されたBase64出力
プロジェクトに必要な形式を選び、生成されたテキストをコピーまたはダウンロードしてください。
画像をエンコード中
ブラウザー内で画像を読み込み、ローカルにエンコードしています…
エンコードサイズの概要
- 元ファイル
- Base64文字列
- 完全なデータURI
- サイズ増加
- 元サイズの:percent%
Base64では3バイトの元データを4文字で表すため、通常は約33%サイズが増加します。
外部画像の使用もご検討ください
大きなBase64画像はHTMLやCSSのサイズを増やし、個別にキャッシュできず、ページ表示を遅らせる場合があります。
画像がこの端末から送信されることはありません
エンコードはブラウザーのメモリー内でJavaScriptにより実行されます。画像と生成結果はCyberToolsの変換エンドポイントへ送信されません。
画像品質の劣化なし
Base64は元に戻せるテキストエンコードです。リサイズ、再圧縮、画質変更を行わず、元ファイルのバイトを保持します。
Base64は用途を選んで使用
インラインBase64は非常に小さな素材に最適です。キャッシュや遅延読み込みの利点がある大きな画像には、通常は外部ファイルが適しています。
プライベートオンライン画像エンコーダー
画像をBase64に変換：Webでインライン使用するためのエンコード
PNG、JPG、JPEG、WebP、GIF、SVG画像をブラウザー内で直接Base64テキストに変換します。Raw Base64文字列、完全なデータURI、HTML画像例、CSS背景例を生成できます。
画像はローカルで処理され、変換サーバーへアップロードされません。エンコード後の正確なサイズを確認し、元ファイルと比較して、プロジェクトに必要な出力だけをコピーできます。
すぐに使えるコード
プレフィックス、MIMEタイプ、マークアップを手作業で組み立てずに、Raw Base64、データURI、HTML、CSSを生成します。
サイズへの影響を確認
Webページへ追加する前に、Base64による正確な文字数と増加率を確認できます。
ブラウザーのみで処理
非公開デザイン、社内スクリーンショット、顧客素材を変換中も自分の端末内に保持します。
画像Base64変換ツールの機能
エンコーダーは画像のバイナリバイトを読み取り、Base64アルファベットで表現します。元のバイナリデータを壊すことなく、HTML、CSS、JSON、XML、メールなどのテキスト中心の形式で扱える値を生成します。
Raw Base64文字、MIMEタイプを含む完全なデータURI、HTML img要素、CSS background-image例の4種類を出力します。コードを手作業で組み立てず、用途に必要な形式をコピーできます。
画像をBase64にエンコードする方法
PNG、JPG、JPEG、WebP、GIF、SVGファイルを選択し、アップロード領域へドラッグするか、クリップボードから画像を貼り付けます。ファイル情報とプレビューを確認し、必要な場合は認証を完了してエンコードを開始します。
変換後は元のサイズとエンコード後のサイズを比較します。Raw Base64、データURI、HTML、CSSを選択し、出力をコピーするかテキストファイルとしてダウンロードします。別の画像を処理する前にツールをリセットしてください。
Base64エンコードの仕組み
バイナリファイルには0から255までのバイト値が含まれ、目に見えるテキストとして安全に表せない値もあります。Base64は入力を3バイト単位にまとめ、各ブロックを64文字のアルファベットから選んだ4つの印字可能なASCII文字へ変換します。
この処理は決定的で可逆的です。Base64文字列をデコードすると同じ元バイトが復元されます。入力長が3で割り切れない場合、最後のブロックにパディング文字が追加されることがあります。
Base64出力が約33%大きくなる理由
元データの3バイトが4つのBase64文字になります。この4対3の比率により、エンコードされたテキストは通常、元ファイルより約3分の1大きくなり、パディングとデータURIプレフィックスの分だけさらに少し増えます。
30 KBの画像からは約40 KBのBase64文字列が生成されます。この増加はエンコード方式そのものによるため、別の表現方法を選ぶか元ファイルを小さくしない限り避けられません。
Base64データURIについて
Raw Base64文字列だけではファイル形式を識別できません。データURIはエンコード文字列の前にdata:プレフィックス、画像のMIMEタイプ、;base64マーカーを追加します。これによりブラウザーは値全体をインライン画像URLとして扱えます。
データURIはHTML imgのsrc属性、CSS background-image値、その他URLを受け付ける場所で使用できます。生成される例には、選択したファイルから取得した正しいMIMEタイプが含まれます。
インラインBase64画像が役立つ場面
Base64は、小さなUIアイコン、読み込み表示、メール素材、持ち運び可能なレポート、テストデータ、自己完結型HTMLファイルに便利です。画像用の別リクエストを省いたり、すべてを1つの文書にまとめたりする価値があります。
JSONなどテキスト専用のペイロード内で素材を送る場合にも役立ちます。Viteやwebpackなどのビルドツールは、設定されたサイズ以下の小さな素材を自動的にインライン化することがあります。
外部画像の方が適している場面
大きな写真、ヒーロー画像、繰り返し使うアイコン、ページ下部のメディアは、通常は外部ファイルの方が効率的です。外部画像は個別にキャッシュし、並行取得し、配信基盤で圧縮し、必要になった時だけ遅延読み込みできます。
インラインBase64画像はHTMLまたはCSSファイルの一部になります。解析処理が増え、個別にキャッシュできず、含んでいる文書が変わるたびに再ダウンロードされます。
プライバシーと機密画像
Base64はエンコードであり、暗号化ではありません。出力を受け取った人は誰でもデコードして元画像を復元できます。機密情報を隠す方法としてBase64文字列を使用しないでください。
このツールはブラウザーのメモリー内でローカルにエンコードし、画像をCyberToolsの変換エンドポイントへ送信しません。社内図面、顧客素材、非公開スクリーンショット、守秘義務のあるファイルに適しています。
SVGとアニメーションGIFの注意点
Base64はアニメーションの全フレームを含むすべてのバイトを保持するため、アニメーションGIFは動きを維持します。対応するHTML画像要素で使用すると、生成されたデータURIは元のGIFと同様に動作します。
SVGはもともとテキストベースのXML形式です。直接インライン化したSVGマークアップは多くの場合小さく、個別要素へスタイルやスクリプトを適用できます。Base64化したSVGは、CSS背景などURL値が必要な場合に主に役立ちます。
モダンなWebプロジェクトでBase64を使う
React、Vueなどのフレームワークでは、画像属性やスタイルバインディングにデータURIを使用できます。小さな単発素材には便利ですが、大きな画像は通常ファイルとしてインポートし、ビルドシステムにファイル名、キャッシュ、配信を最適化させる方が適切です。
多くのバンドラーには設定可能なインライン上限があります。上限未満の素材はデータURIになり、大きなファイルは別に出力されます。これによりリクエストの負荷、Base64のサイズ増加、キャッシュ動作を調整できます。
エンコーダーが生成する出力
| 出力 | 内容 |
|---|---|
| Raw Base64文字列 | MIMEタイプやデータURIプレフィックスを含まないエンコード文字のみ。 |
| Base64データURI | インラインURLとして使用できる完全なdata:[mime-type];base64,[content]値。 |
| HTML使用例 | 生成されたデータURIをsrc属性に持つimg要素。 |
| CSS使用例 | 生成されたデータURIを含むbackground-image宣言。 |
画像Base64エンコードの一般的な用途
- 追加の画像リクエストなしで小さなアイコンを埋め込む
- オフラインで動作する自己完結型HTML文書を作る
- JSONやXMLペイロードに画像を含める
- HTMLメールテンプレート用のインライン画像を作る
- 小さな背景画像をCSSへ直接追加する
- 開発とデバッグ用の持ち運び可能なテストデータを準備する
- フロントエンドのビルド出力を確認する
- テキスト専用フィールドで画像のバイナリバイトを送る
Base64画像を避けるべき場面
- 大きな写真やヒーロー画像
- 遅延読み込みが必要な画像
- 複数ページで再利用する素材
- 独立したブラウザーキャッシュが有効なファイル
- 大きな画像を含み頻繁に変更されるHTMLやCSS
- CDNで効率よく配信されている画像
画像Base64エンコーダーの仕様
| 項目 | 詳細 |
|---|---|
| 対応形式 | PNG、JPG、JPEG、WebP、GIF、SVG |
| ブラウザーでの最大ファイルサイズ | 200 MB。利用可能なブラウザーと端末のメモリーに依存します |
| 入力方法 | ファイル選択、ドラッグ＆ドロップ、クリップボードからの貼り付け |
| 生成される出力 | Raw Base64、完全なデータURI、HTML例、CSS例 |
| エンコード方式 | リサイズや再圧縮を行わない可逆的なバイトからテキストへの変換 |
| アニメーションGIF対応 | アニメーションのバイトはエンコード結果に保持されます |
| 予想されるサイズ増加 | 約33%と短いデータURIプレフィックス |
| 処理場所 | 画像をアップロードせず、ブラウザーのローカルメモリーで処理 |
画像Base64変換のよくある質問
Base64文字列が元画像より長いのはなぜですか？
Base64では3バイトの元データを4文字で表します。そのため生成される文字列は通常約33%大きくなり、パディングとデータURIプレフィックスの分だけさらに少し増えます。
Base64エンコードで画質は低下しますか？
いいえ。Base64は可逆的で元ファイルのバイトを保持します。画像のリサイズ、再圧縮、画質変更は行いません。
Base64データURIをブラウザーで直接開けますか？
はい。有効な画像データURIをブラウザーのアドレスバーへ貼り付けるか、画像のソースに設定すると、エンコード結果をすぐに確認できます。
アニメーションGIFは保持されますか？
はい。アニメーションフレームとタイミング情報を含むGIFファイルの全バイトがエンコードされます。アニメーションGIFに対応する環境では動きが維持されます。
ReactやVueでBase64画像を使用すべきですか？
非常に小さな素材には便利です。大きな画像は通常ファイルとしてインポートし、フレームワークやバンドラーにキャッシュ、ファイル名、配信を最適化させる方が適切です。
SVG画像をBase64にエンコードすべきですか？
URL値が必要な場合に限ります。HTMLでは直接インライン化したSVGの方が小さいことが多く、CSSやJavaScriptから個別のSVG要素へアクセスできます。
Base64は安全な暗号化方式ですか？
いいえ。Base64は元に戻せるエンコードで、機密性を提供しません。文字列を持つ人は誰でも元画像を復元できます。
変換中に画像はアップロードされますか？
いいえ。画像はブラウザー内のJavaScriptでローカルに読み込み、エンコードされ、CyberToolsの画像変換エンドポイントへ送信されません。
PNG、JPG、JPEG、WebP、GIF、SVGに対応した無料の画像Base64エンコーダーです。画像をアップロードせずに、Raw Base64文字列、完全なデータURI、HTML画像タグ、CSS背景の使用例をローカルで生成できます。