本文へスキップ

画像 → Base64 変換ツール

画像ファイルをBase64文字列に変換します。HTML、CSSに直接埋め込めるBase64コードを生成できます。

📁

ここをクリックまたは画像をドラッグ＆ドロップ

対応形式: JPG, PNG, GIF, WebP（最大10MB）

Base64画像について

Base64エンコーディングは、画像を HTML、CSS、または JSON に直接埋め込むことができるテキスト形式に変換します。これにより、別の画像ファイルが不要になり、HTTP リクエストが減少します。

利点

  • 追加の HTTP リクエストなし - ページ読み込みが高速
  • 小さなアイコンとロゴに最適
  • メールテンプレートで適切に動作
  • 自己完結型 HTML ファイル

欠点

  • ファイルサイズが約33%増加
  • ブラウザで個別にキャッシュできない
  • 大きな画像には不向き
  • コードの可読性が低下

ベストプラクティス

  • 10KB 未満の小さな画像（アイコン、箇条書き）に使用
  • 変換前に画像を最適化
  • ベクターグラフィックには代わりに SVG を検討
  • 写真には従来の画像ファイルを使用

主な機能​

📤 簡単アップロード​

  • クリックでファイル選択
  • ドラッグ&ドロップ対応
  • 最大10MBまで対応

🖼️ プレビュー​

  • アップロードした画像を即座にプレビュー
  • 画像情報の表示（サイズ、解像度、タイプ）
  • Base64データサイズの計算

💻 コードスニペット​

  • HTML <img> タグのサンプル
  • CSS background-image のサンプル
  • ワンクリックコピー機能

💾 エクスポート​

  • Base64文字列のコピー
  • HTML/CSSコードのコピー

Base64エンコーディングとは？​

Base64はバイナリデータをテキスト形式に変換するエンコーディング方式です。画像をBase64にエンコードすると、HTMLやCSSに直接含めることができます。

通常の画像 vs Base64​

通常の方法：

<img src="image.png" alt="画像" />

Base64の方法：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="画像" />

メリット​

✅ HTTPリクエストの削減​

  • 追加ファイルダウンロード不要
  • ページ読み込み時間の短縮（小さな画像の場合）

✅ 単一ファイルで完結​

  • HTMLファイル1つですべてを含む
  • メールHTMLに最適

✅ CDN/ホスティング不要​

  • 画像ホスティングサーバー不要
  • 外部依存性の排除

✅ 即座に使用可能​

  • 即座にレンダリング可能
  • キャッシング問題なし（小さなファイル）

デメリット​

❌ ファイルサイズの増加​

  • Base64は元のサイズより約33%増加
  • 大きな画像には不適切

❌ ブラウザキャッシング不可​

  • 毎回HTMLと一緒に送信される
  • 再利用性が低い

❌ コードの可読性低下​

  • HTML/CSSコードが長くなる
  • メンテナンスが困難

❌ CSSスプライト不可​

  • 画像の組み合わせ技法が使えない

いつ使用すべきか？​

✅ 適している場合​

  1. アイコンと小さな画像（1-10KB）

    • UIアイコン
    • 箇条書き
    • 小さなロゴ

  2. 単一HTMLファイル

    • メールテンプレート
    • オフラインHTML文書
    • プレゼンテーション

  3. 即座の表示が必要な場合

    • Above the foldコンテンツ
    • 重要なUI要素

❌ 不適切な場合​

  1. 大きな画像（>50KB）

    • 写真
    • 背景画像
    • バナー

  2. 再利用される画像

    • 複数ページで使用
    • 頻繁に更新される画像

  3. SEOが重要な画像

    • 商品画像
    • ブログ記事の画像

対応形式​

  • JPG/JPEG：写真に適している
  • PNG：透明背景対応
  • GIF：アニメーション対応
  • WebP：最新フォーマット

使用例​

HTML画像​

<img
  src="data:image/png;base64,iVBORw0KGg..."
  alt="説明"
  width="100"
  height="100"
/>

CSS背景​

.element {
  background-image: url('data:image/png;base64,iVBORw0KGg...');
  background-size: cover;
  background-position: center;
}

レスポンシブ画像​

<picture>
  <source
    media="(min-width: 768px)"
    srcset="data:image/png;base64,..."
  />
  <img src="data:image/png;base64,..." alt="説明" />
</picture>

最適化のヒント​

1. 画像の圧縮​

Base64変換前に画像を圧縮してください：

  • TinyPNG
  • ImageOptim
  • Squoosh

2. 適切なフォーマット選択​

  • 写真：JPG（非可逆圧縮）
  • アイコン：PNG（可逆、透明度）
  • シンプルなグラフィック：SVG（ベクター）

3. サイズ調整​

必要なサイズのみ使用：

  • 2x Retina：元のサイズの2倍
  • 1x：実際の表示サイズ

4. Lazy Loading検討​

Base64を直接使用する代わりに：

// 必要な時だけ読み込む
const base64 = 'data:image/png;base64,...';
img.src = base64;

セキュリティ上の考慮事項​

⚠️ XSS攻撃に注意​

ユーザーから画像を受け取る場合：

  • ファイルタイプの検証
  • ファイルサイズの制限
  • Content-Typeの確認

⚠️ CSP（Content Security Policy）​

Base64画像はCSPのimg-srcポリシーで：

Content-Security-Policy: img-src 'self' data:;

プライバシー​

このツールはブラウザ上でのみ動作し、画像はサーバーにアップロードされません。すべての処理はお使いのデバイスで完結します。

関連ツール​

💬 このツールは役に立ちましたか？​

ご意見やご提案がございましたら、お気軽にお送りください！