こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Web制作をしていると、
「ちょっとした画像を外部ファイルにするのは面倒」
「1枚だけのQRコードにファイル作るのもなあ…」
というシーンがあると思います。
そんなときに便利なのが、CSSに直接画像を埋め込める「Data URI」形式です。
この方法を使えば、QRコードやアイコンなどの画像を別ファイルにせずにCSSやHTMLに埋め込んで表示できるようになります。
今回は、このData URIの概要と実装方法、使うメリット・注意点までしっかり解説します！
Data URIとは？
Data URIは、画像やフォントなどのバイナリデータをBase64形式でエンコードして、URLとして扱えるようにしたものです。
通常の画像URLがファイルを参照するのに対し、Data URIはデータそのものをURLとして扱います。
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...'); このように、CSSやHTMLに画像を直接埋め込めるのがData URIの最大の特徴です。
QRコードをCSSに埋め込む手順
1. QRコード画像を用意する
任意のQRコード（PNGやSVGなど）を作成・ダウンロードしておきます。
2. Base64に変換
次のような無料ツールで変換できます
3. CSSに埋め込む
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このように設定すれば、QRコードが外部ファイルなしで背景画像として表示されます。
Data URIを使うメリット
- HTTPリクエストを減らせて表示速度が向上
- 小さい画像のためにファイルを作る必要がない
- メールテンプレートや埋め込み系コンテンツと相性が良い
- WordPressテーマやCSSライブラリにまとめて埋め込める
特にQRコードやアイコンなど、「1つしか使わないけど非表示にしたくない要素」に最適です。
注意点・デメリットも知っておこう
ただし、Data URIにも注意すべきポイントがあります。
- 画像サイズが大きくなるとCSSの読み込みが重くなる
- 更新が面倒（毎回Base64化が必要）
- ブラウザのCSSサイズ制限に注意（約1MBまで）
そのため、使うのは「ファイルサイズが小さい画像」に限定するのがおすすめです。
PNGやSVGの数KB以下のアイコン・QR・スプライト画像が適しています。
Data URIに向いている用途・シーン
- QRコードを1枚だけ表示したいページ
- SVGアイコンを何度も読み込ませたくない
- CSSだけでスタンドアローンなUIパーツを作りたい
- WordPressのテーマCSSに一体化させたい
WordPressテーマやランディングページなどで、できるだけファイル数を減らしたい場面にも最適です。
まとめ
QRコードやアイコンなどの画像を、CSSにData URI形式で埋め込むテクニックは、軽量化やメンテナンス性の観点でも非常に便利です。
画像の量が少ない・更新頻度が低いケースでは、ファイル管理より圧倒的にスムーズに運用できます。
- QRや小画像はBase64に変換しData URIに
- CSSのbackground-imageで直接埋め込める
- 小容量・更新不要な画像に限定して使おう
ぜひ次のプロジェクトで、Data URIの賢い使いどころを見つけてみてください！
satokotadesignキャンペーン実施中！
