画像をデータURIに変換
画像を完全なデータURIに変換し、HTMLのsrc属性やCSSのurl()にそのまま貼り付けられます。
画像をデータURIに変換するツールは、画像ファイルをデータURIにします。データURIは、ファイルの種類とBase64でエンコードした画像の両方を含む1行のテキストです。imgのsrc属性やCSSのurl()に直接貼り付ければ、別のファイルなしで画像が表示されます。接頭辞のMIMEタイプはファイルから取得され、画像のバイトは変更されません。
画像をデータURIに変換の使い方
- 1
画像を開く
アイコン、ロゴ、小さなイラストなどの画像ファイルをドロップ、選択、または貼り付けます。
- 2
データURIを取得する
data:image/で始まる完全なデータURIが、長さとおおよそのサイズとともに表示されます。
- 3
コピーする
「データURIをコピー」をクリックするか、すぐに使えるコードなら「HTMLをコピー」か「CSSをコピー」を使います。
- 4
ページに貼り付ける
imgタグやCSSの背景など、通常の画像URLが使える場所ならどこでも使えます。
できること
- 正しいMIMEタイプ
- 接頭辞はimage/png、image/jpeg、image/svg+xmlなど、ファイルに合ったものになります。
- 元のバイトのまま
- ファイルをそのままエンコードするので、再圧縮で画質やサイズが変わることはありません。
- すぐにコピーできるコード
- データURIが入った状態のimgタグやbackground-imageルールを取得できます。
- プライベート
- データURIはブラウザ内で作成されるため、画像はアップロードされません。
よくある質問
データURIとは何ですか？
データURIは、ファイルの場所を指すのではなく、ファイルそのものを含んだリンクです。画像の場合はdata:image/png;base64,などの接頭辞で始まり、ブラウザは通常の画像URLと同じように表示します。
CSSでデータURIを使うには？
「CSSをコピー」をクリックすると、url()の中にURIが丸ごと入ったbackground-imageルールが取得できるので、スタイルシートに貼り付けてください。
データURIを避けたほうがよいのはどんなときですか？
大きな画像や、多くのページで使う画像には向いていません。エンコードしたテキストはファイルより約3分の1大きくなり、ブラウザも別にキャッシュできません。
データURIの画像はメールで使えますか？
対応状況はまちまちです。一部のWebメールを含め、多くのメールソフトはデータURIの画像を表示しないため、メールをテストするか、オンラインでホストした画像を使ってください。
どの画像形式に対応していますか？
JPG、PNG、GIF、WebP、AVIF、SVGなど、ブラウザで開ける画像ならどれでも使えます。iPhoneのHEIC写真は先にPNGに変換されるため、データURIはimage/pngになります。