画像をBase64に変換してHTML・CSSに埋め込む方法
画像をBase64文字列やdata URIに変換し、HTML・CSS・APIで扱うときの使い分けを解説します。Web制作や開発で、ブラウザ内だけで安全に変換したいときの実務ガイドです。
Base64とdata URIは何に使うのか
Base64は画像のバイナリデータを文字列として表す方法です。画像そのものをURLで参照する代わりに、data:image/png;base64,... のようなdata URIとしてHTMLやCSS、JSONの中に含められます。小さなアイコンや一時的なプレビューを、1つのデータとして扱いたいときに便利です。
Web開発では、APIのペイロードに画像を含める、メールテンプレートに小さな画像を埋め込む、CSSで小さな装飾を扱うといった場面で見かけます。画像ファイルを別途配布できない環境でも、文字列で受け渡せるのが特徴です。
URL参照とBase64埋め込みの使い分け
通常のWebページで大きな画像を表示するなら、画像ファイルをURLで配信するほうが向いています。ブラウザのキャッシュが使え、HTMLやCSSが重くなりにくく、画像だけを差し替える運用も簡単だからです。
一方で、小さなアイコン、単発のサムネイル、APIで一緒に渡す必要がある画像ならBase64が候補になります。Base64化すると文字数が増えるため、写真や大きいバナーを無差別に埋め込む用途には向きません。用途とサイズを先に決めることが大切です。
Web制作で扱いやすい画像を用意する
Base64へ変換する前に、画像サイズと形式を整えると扱いやすくなります。写真ならJPGやWebP、ロゴや透過アイコンならPNGが基本です。必要以上に大きい画像は、先にリサイズや圧縮をしてから変換すると、HTML・CSS・JSONの肥大化を抑えられます。
表示速度を優先する公開ページでは、Base64化そのものよりも、WebPやAVIFをURLで配信するほうがよい場合があります。data URIは万能な置き換えではなく、画像の持ち運び方を選ぶための手段として使うと判断しやすくなります。
ブラウザ内で変換する流れ
画像を選んだら、必要に応じて圧縮やリサイズを先に済ませます。そのあとBase64に変換し、出力された文字列を用途に合わせてHTML、CSS、JSON、APIテスト用のデータへ貼り付けます。
Filewispの画像Base64変換はブラウザ内で処理するため、変換対象の画像を外部サーバーへアップロードせずに確認できます。開発中の画面キャプチャや社内素材を、ローカルで文字列化したいときにも使いやすい方法です。
実装前に確認したいこと
Base64文字列をそのままコードへ入れると、差分レビューや更新が読みにくくなることがあります。プロダクションの大きな画像や頻繁に差し替える素材は、CDNや通常の画像URLで管理するほうが保守しやすいケースが多いです。
一方、外部参照を増やしたくない小さな素材や、データとして一緒に渡す必要がある画像なら、Base64は実用的です。ファイルサイズ、キャッシュ、変更頻度、受け渡し先を見比べて選ぶと、Web制作でもデータ連携でも無理のない設計になります。