画像Base64変換
画像をBase64エンコードしてコードに埋め込めます
画像をBase64エンコードしてHTMLやCSSに埋め込めます。
画像を選択
💡 画像Base64変換の雑学・Tips
📦 HTTPリクエストを減らせる
画像をBase64エンコードしてHTML/CSSに埋め込むと、画像を読み込むための追加のHTTPリクエストが不要になります。小さなアイコンやロゴなど、ファイルサイズが小さい画像の場合、ページの読み込み速度が向上することがあります。特に複数の小さな画像を使用する場合に効果的です。
⚠️ ファイルサイズが約33%増加する
Base64エンコードすると、元のバイナリデータと比べてファイルサイズが約33%増加します。これはバイナリデータ（8ビット）を文字データ（6ビット）で表現するためです。そのため、大きな画像をBase64化するとHTMLファイル自体が肥大化し、逆にパフォーマンスが悪化する可能性があります。一般的に10KB以下の画像にのみ使用することが推奨されます。
🔄 ブラウザキャッシュが効かない
Base64エンコードされた画像はHTML/CSSファイルの一部となるため、画像単体でのブラウザキャッシュができません。HTMLファイルが更新されるたびに画像データも再ダウンロードされます。一方、通常の画像ファイルはブラウザにキャッシュされるため、2回目以降の訪問時は高速に表示されます。頻繁に変更されないページでのみ使用するのが賢明です。
💌 メールHTMLに最適
HTMLメールでは外部画像がブロックされることが多いため、Base64エンコードした画像を埋め込むことで確実に表示できます。企業ロゴや署名画像など、必ず表示したい重要な画像に有効です。ただし、メールクライアントによってはBase64画像のサイズ制限があるため、小さな画像に限定することをおすすめします。
🎨 CSSのbackground-imageで使える
Base64画像はCSSの`background-image: url(data:image/png;base64,...)`として直接指定できます。これにより、アイコンやボタンの背景画像を外部ファイルなしで実装できます。CSS-in-JSやスタイル付きコンポーネントを使用する場合、JavaScriptで動的に画像を埋め込むことも可能です。