ツール一覧 / 画像→Base64データURI

画像→Base64データURI変換ツール

小さな画像をBase64のデータURIに変換して、CSS・HTMLに直接埋め込めます。 アイコンや小さな背景を埋め込むと、読み込みリクエストを減らせます。画像は送信されません

無料登録不要画像は送信されません

画像を選ぶ

出力

データURIは元の画像より約33%大きくなります。 埋め込みが向くのは数KB程度の小さな画像(アイコン・小さな背景)です。 大きな画像は、普通に読み込むほうが速く、キャッシュも効きます。
大きい画像は軽量化して読み込む

写真などはWebPに変換して普通に読み込むのが基本。一括WebP変換もこのサイトで無料です。

WebPに変換する

ほかの道具も見る

72本すべてを見る →

データURIとは

画像そのものを文字列(Base64)にして、data:image/png;base64,.... の形でHTMLやCSSに直接書き込む方法です。 画像ファイルを別に読み込まなくてよいので、リクエストが1つ減ります

使いどころ

効果があるのは、ごく小さい画像(アイコン、1×1の背景、装飾)です。 逆に大きな画像を埋め込むと、HTML/CSSが肥大化し、キャッシュも効かず、かえって遅くなります。 目安として、数KBを超える画像は普通に読み込むのがおすすめです。

画像は端末の外に出ません

選んだ画像はサーバーにアップロードされず、変換はすべてブラウザ内で完結します。

このツールについて

ブラウザ標準のFileReaderで変換しています。