メインコンテンツにスキップ

画像 → Base64変換ツール

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

📁

Click or drag and drop an image here

Supports: JPG, PNG, GIF, WebP (Max 10MB)

About Base64 Images

Base64 encoding converts images into text format that can be embedded directly in HTML, CSS, or JSON. This eliminates the need for separate image files and reduces HTTP requests.

Advantages

  • No additional HTTP requests - faster page load
  • Perfect for small icons and logos
  • Works well in email templates
  • Self-contained HTML files

Disadvantages

  • Increases file size by ~33%
  • Cannot be cached separately by browsers
  • Not suitable for large images
  • Makes code less readable

Best Practices

  • Use for small images (icons, bullets) under 10KB
  • Optimize images before converting
  • Consider SVG for vector graphics instead
  • Use traditional image files for photos

主な機能​

📤 簡単なアップロード​

  • クリックしてファイル選択
  • ドラッグ&ドロップサポート
  • 最大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:;

実際の使用例​

メールテンプレート​

<!DOCTYPE html>
<html>
<head>
  <style>
    .logo {
      background-image: url('data:image/png;base64,...');
      width: 200px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="logo"></div>
  <p>こんにちは!</p>
</body>
</html>

CSSアイコン​

.icon-check {
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml;base64,...');
  display: inline-block;
}

データビジュアライゼーション​

// チャートを画像として保存
const canvas = document.getElementById('chart');
const base64 = canvas.toDataURL('image/png');
const img = document.createElement('img');
img.src = base64;

パフォーマンスへの影響​

小さな画像 (< 10KB)​

  • メリット: HTTPリクエスト削減
  • デメリット: わずかなサイズ増加

中程度の画像 (10-50KB)​

  • メリット: 場合による
  • デメリット: サイズ増加が顕著

大きな画像 (> 50KB)​

  • メリット: ほぼなし
  • デメリット: 大幅なサイズ増加、キャッシング不可

ベストプラクティス​

1. 重要度の高いリソースのみ​

Above the foldの小さなアイコンやロゴのみBase64化

2. ビルドツールで自動化​

// webpack設定例
{
  test: /\.(png|jpg|gif)$/,
  loader: 'url-loader',
  options: {
    limit: 8192, // 8KB未満のみBase64化
  }
}

3. パフォーマンス測定​

Lighthouse、WebPageTestでパフォーマンスを測定

4. 代替案の検討​

  • SVG: スケーラブルなアイコン
  • WebP: 優れた圧縮率
  • CDN: 大きな画像

関連ツール​

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

画像Base64変換ツールを使用して、Web開発プロジェクトに役立ちましたか?フィードバックや改善提案がありましたら、お聞かせください。

プライバシー保護​

このツールは完全にクライアント側で動作します。アップロードした画像はサーバーに送信されず、ブラウザ内でのみ処理されます。あなたの画像は完全に安全です。