コラム・豆知識
Data URIとは？Web制作における活用例
Data URI（データURI）とは、画像やフォントなどのリソースをURLの形式で直接HTMLやCSS内に埋め込む技術です。
たとえば、<img src="data:image/png;base64,...">のように記述することで、外部ファイルとして読み込む代わりに、データそのものを埋め込むことができます。
HTTPリクエストを削減できるため、小規模なアイコンやロゴなどの軽量ファイルに適しています。
Data URIのメリットと注意点
Data URIを活用すると、外部リソースへのアクセスが不要になるため、通信回数が減り、初期表示の高速化が見込めます。
ただし、Base64形式に変換されることでファイルサイズが約33%増加する点には注意が必要です。
また、キャッシュの効かない一体化データとなるため、更新のたびにHTMLやCSSの修正が必要になります。
CSSに埋め込む場合のポイント
背景画像などをCSSに直接埋め込みたい場合、background-image: url('data:image/svg+xml;base64,...');のように使用できます。
とくにicon-fontやbuttonまわりのパーツでは、HTTPリクエストを省略できることが大きな利点です。
ただし、可読性が大きく損なわれるため、メンテナンス性とのバランスを考慮して適用範囲を限定するのが一般的です。
Data URIの適切な使用タイミング
Data URIは、「軽量かつ頻繁に使用されるリソース」でこそ効果を発揮します。
たとえば、FaviconやSVGアイコン、装飾目的の背景画像などは、Data URIとして埋め込むことでHTMLやCSSの一体性が高まります。
一方、数百KBを超える画像や動画は、埋め込むことで逆にページサイズが肥大化するため避けるべきです。
ツールを活用した変換の自動化
Data URIへの変換は、手動で行うには煩雑であり、エンコードミスが発生しやすい作業です。
ツールを用いて簡単に画像やファイルをData URIに変換すれば、確認・コピペまでスムーズに進めることができます。
開発効率を高め、テスト用途や一時的な埋め込みにも最適な手段として、Data URI変換ツールの活用は現場レベルで非常に実用的です。
ツールの仕組み解説
変換対象のファイルをループで処理しますが、同じファイルを重複して変換しないようチェックを入れています。
const existingFile = convertedFiles.find(f => f.name === file.name && f.size === file.size && f.lastModified === file.lastModified );
名前、サイズ、最終更新日時が一致するファイルがすでにあれば、変換処理はスキップします。
FileReaderを使ってファイルをDataURL形式（Base64）に変換します。
reader.readAsDataURL(file);
変換が完了するとreader.onloadが実行され、結果をオブジェクトとしてconvertedFilesに保存します。
変換されたファイルは、画面にテキストエリアとして追加されます。
fileResult.innerHTML = \` <textarea readonly>\${fileData.dataURL}</textarea> <span class="input-label">\${fileData.name}</span> <span class="copy-button" onclick="copyToClipboard(...)">コピー</span> \`;