画像をBase64エンコーダーに変換する
あらゆる画像を瞬時にBase64データURLに変換します。CSS、HTML、またはコードにコピー＆ペーストするだけでOK。アップロードは不要です。
Base64エンコード画像を使用するタイミング
CSSとスタイリング
- 小さなアイコンをCSSの背景画像データURLとして埋め込む
- スタイルシート内のインラインローディングスピナーまたはプレースホルダー画像
- 外部ホスティングなしでCSSのみのメールテンプレートにロゴを追加する
- コンポーネントライブラリのスタイルシートにUI要素の画像を埋め込む
HTMLとメール
- HTMLに画像をインラインで埋め込む<img src>データURLとして
- 自己完結型のHTMLメールテンプレートに会社のロゴを含める
- 画像が埋め込まれた単一ファイルのHTMLドキュメントを作成します。
- GmailとOutlookのHTML署名に署名画像を埋め込む
APIとコード
- base64入力を想定するJSON APIペイロード用に画像をエンコードします。
- AI/ML APIリクエスト（OpenAI Vision、Claude、Gemini）用の画像を準備する
- 画像を変換して、base64エンコードされたデータベースフィールドに保存します。
- JavaScriptでデータURLからキャンバスdrawImage用に画像をエンコードする
画像をBase64に変換する方法 ― 3つのステップ
- 1
画像をアップロードしてください
JPG、PNG、WebP、SVG、GIF形式の画像をエンコーダーにドラッグ＆ドロップしてください。ファイルはローカルで読み込まれるため、アップロードは行われません。
- 2
Base64出力をコピーする
このツールは、完全なデータURL（data:image/…;base64,…）と生のbase64文字列を別々に表示します。「コピー」をクリックすると、どちらかの形式がクリップボードにコピーを。
- 3
コード内で使用
データURLをHTMLに貼り付ける<img src>APIペイロードやJSONデータには、CSSの背景画像を使用するか、または生のbase64文字列を使用します。
無料オンライン画像Base64エンコーダー - サーバーへのアップロード不要
Base64エンコーディングは、バイナリ画像データをASCII文字列に変換し、外部URLを必要とせずにコード、CSS、HTML、またはAPIペイロードに直接埋め込むことができます。PicsSizerのBase64エンコーダーは、ブラウザのFileReader APIを使用して画像ファイルを読み込み、完全なデータURLと生のBase64文字列の両方を出力します。サーバーへのアップロードは不要です。エンコードされた文字列は、CSSの背景画像、HTMLに貼り付ける準備ができています。<img src> JSON API ボディ、またはデータ URL や base64 画像が期待されるその他の場所。
インラインBase64画像と外部URLの使い分け
Base64 エンコーディングは、アイコン、SVG イラスト、メールのロゴ、プレースホルダー画像などの小さな静的アセットに最適です。base64 表現はバイナリソースよりも約 33% 大きいため、データ URL として埋め込まれた大きな画像は、HTML または CSS ファイルのサイズを大幅に増加させます。10KB を超える画像の場合、CDN を使用した外部ホスティングの方がほぼ常に高速で効率的です。5KB 未満の画像、特にアイコン、ロゴ、装飾的な SVG の場合、base64 埋め込みにより HTTP リクエストが完全に不要になるため、ファーストビューの重要なアセットのパフォーマンスが向上します。画像入力を受け付ける AI/ML API (OpenAI、Anthropic、Google) は JSON リクエストボディで base64 を使用するため、base64 エンコーディングはビジョンモデルの統合に不可欠です。
コード内でBase64エンコードされた画像を使用する際のヒント
CSS の背景画像の場合: データ URL を url() で囲みます — `background-image: url('data:image/png;base64,…')`。HTML の場合: src 属性として直接貼り付けます — `<img src="data:image/jpeg;base64,…"> `. メール HTML の場合: ほとんどのメール クライアントは小さな画像のデータ URL をサポートしています。デプロイする前に、Gmail、Outlook、および Apple Mail でテストしてください。JSON API ペイロードの場合: API で別の mediaType または mimeType フィールドが指定されている場合は、生の base64 文字列 (data:…;base64、プレフィックスなし) を使用してください。このツールは、完全なデータ URL と生の base64 の両方の形式を出力するため、統合に必要なバージョンをコピーをできます。
画像をBase64に変換する — よくある質問
画像をbase64データURLに変換する際のよくある質問