1 画像を選ぶ
2 どこへ持っていくのかを決める
データURIそのものを求めている人は、あまりいません。ほしいのはスタイルシートに入る行のほうです。ですから、行のほうを選んでください。画像はその中に、引用符で囲まれた状態で届きます。ここは間違えやすく、しかもSVGのときだけ失敗する部分です。
altのテキストは、意図的に空にしてあります。その画像が意味を運んでいるのか、それとも飾りなのかを知っているのは書く人だけですし、ファイル名から推測した説明は、スクリーンリーダーを使う人にとって、説明がまったくないより悪いからです。
XMLの文字コードがUTF-8以外のSVGや、UTF-8として不正なバイトを含むSVGには、自動的にbase64を使います。元のバイト列と文字コードの宣言を保持します。
SVGもbase64にする 既定では外してあります。SVGはテキストで、base64はバイト列のためのものだからです。パーセントエンコードなら、スタイルシートの中でマークアップが読めるままですし、たいてい5分の1ほど短くなります。;base64をどうしても要求するツールチェーンのために、これを入れてください。
3 コピーする
まだ何も選ばれていません。上に画像を入れると、貼るための行がここに出ます。
# 画像をデータURIに｜CSSやHTML用にbase64エンコード
画像まるごとを1行のテキストに。そのままCSSやHTMLに貼れます。
> PNG・JPEG・SVG・WebPを、CSSやHTMLに貼れるデータURIに変換します。UTF-8のSVGはbase64ではなくパーセントエンコードするので、短いまま、読める形で残ります。処理はブラウザの中だけ。アップロードはありません。
これはhttps://abox.tools/ja/image-to-data-uri/にあるブラウザー用の対話型ツールです。ファイルはそのブラウザーを実行する端末上で処理します。意図した共有や任意の通信機能はページ内で説明します。以下は文章による説明です。利用するにはアドレスを開いてください。
## 画像は**ブラウザー内で処理**されます。処理のためのアップロードはありません。
エンコードを行うのは、お使いのブラウザと手元のハードウェアです。ページがすでに持っているバイト列に対する計算にすぎず、エンコーダーも、サーバーも、省くべき通信の段階もありません。このツールにはネットワーク機能が一切ありません。取りに行く先も、送る先もありません。仮に送ろうとしても、このページの向こう側に画像を受け取るサーバーが存在しません。
- ✗ アップロードなし
- ✗ 登録なし
- ✗ 再エンコードなし
- ✓ オフラインで動作
- ✓ ソース公開
## 画像をデータURIに変える手順
1. **画像を選びます。** 選択欄にドロップするか、手で選んでください。ブラウザがディスクから直接読み出します。その間に何かがどこかへ送られることはありません。
2. **結果をどこへ持っていくのかを決めます。** URIそのもの、CSSルール、カスタムプロパティ、`<img>`タグ、Markdown。どれもURIを引用符で囲んで出します。インライン化したSVGが動くか、黙って動かないかを決めるのは、この細部です。
3. **代償を読みます。** 各結果には、何文字になったか、ファイルよりどれだけ大きいか、そしてこの大きさで埋め込むのが良い考えかどうかが表示されます。base64は3分の1を足します。その3分の1がリクエスト1回の節約に見合うかはサイズ次第なので、線のどちら側にいるのかをページが示します。
4. **警告を確かめます。** 画像がEXIF、カラープロファイル、XMPを抱えている場合は、結果の何バイトがそれなのかとともに示します。拡張子が実際の形式と食い違っている場合は、形式のほうを採用してその旨を伝えます。ブラウザが結果を描けない場合も、そう伝えます。
5. **コピーするか、ダウンロードします。** 結果ごとにボタンが1つ、全部まとめて用にもう1つあります。カスタムプロパティは`:root`ブロックに包まれて出てくるので、スタイルシートの先頭にそのまま貼れます。
## 詳しい解説
[画像をCSSの中に入れるべきとき、そうでないとき](https://abox.tools/ja/guides/embed-an-image-in-css/): データURIの代償、base64が3分の1を足しgzipがそれを返してくれない理由、SVGを決してbase64にすべきでない理由、そして埋め込んだSVGを黙って壊す引用符の間違い。
## 箱の中のほかのツール
- [SVG→画像変換ツール](https://abox.tools/ja/svg-to-image/): サイズを指定するだけ。ベクターには、失うサイズがそもそもありません。
- [画像→SVG変換ツール](https://abox.tools/ja/image-to-svg/): ひとつの形に、ひとつの輪郭。あってはいけないものを指さすだけです。
- [身長比較チャート](https://abox.tools/ja/compare-heights/): 身長を打ち込めば、絵が持ち帰れます。描くために何かを送ることはありません。
- [ビジネスプロフィールのプレビュー](https://abox.tools/ja/business-profile-preview/): 入力するとGoogleのカードの見本になります。描くための送信はありません。
## よくある質問
### 画像はどこかにアップロードされますか？
されません。読み込みもエンコードも、お使いのブラウザが手元のハードウェア上で、すでに持っている2つの関数を使って行います。このツールにはネットワーク機能が一切なく、何も取りに行かず、何も送りません。ページの`Content-Security-Policy`には接続してよいアドレスがすべて挙がっていますが、そのどれも当サイトのものではありません。
### データURIとは何ですか？
ふつうウェブアドレスが入る場所に、ファイルまるごとを書く方法です。`url("logo.png")`はブラウザに取りに行けと指示するものですが、代わりに`url("data:image/png;base64,iVBORw0...")`と書けば、そこに画像そのものが入っています。ブラウザはその場でデコードします。実際の効果はリクエストが1回減ることです。画像はスタイルシートやページのあとではなく、それと一緒に届きます。
### SVGがbase64にならないのはなぜですか？
正しいUTF-8のSVGには、通常base64より短く、読みやすいパーセントエンコードを使います。XMLの文字コードが異なるSVGや不正なUTF-8には、元のバイト列と文字コードの宣言を保持するため、自動的にbase64を使います。チェックボックスをオンにするとUTF-8のSVGにもbase64を使います。元のファイルをブラウザが描画できるかどうかは、プレビューで確認します。
### base64にすると画像はどれくらい大きくなりますか？
だいたい3分の1です。ファイルの3バイトがbase64の4文字になるので、先頭の`data:image/png;base64,`を数える前で33%増です。これが下限で、避けられません。URLが許す文字だけで任意のバイト列を書くことの代金だからです。だからこのページは、スタイルシートを配備してから気づくことのないよう、ファイルサイズの隣に文字数を表示します。
### 画像を埋め込むのが本当に良い考えなのは、どんなときですか？
小さくて、すぐに必要なときです。どのページも読み込むスタイルシートの中の2KBのアイコンなら明らかに得です。往復が1回減り、CSSが届いた瞬間に画像もそこにあります。10KBあたりを超えると割に合わなくなります。埋め込んだ画像はもはや独立したファイルではないので、単独ではキャッシュされず、ほかと並行して取得されず、周りのファイルが変わるたびに丸ごと再ダウンロードされます。スタイルシートの中の200KBの写真は、サイトのすべてのページのクリティカルパスに200KB足すということです。各結果がその線のどちら側に落ちるのかは、ページが示します。
### gzipをかければbase64の増加分は帳消しになりますか？
期待されるほどにはなりません。すでに圧縮済みのファイル、つまりPNGもJPEGもWebPもそうですが、そのbase64は圧縮が効きません。圧縮器が見つけられる冗長性がほとんど残っていないからです。取り戻せるのはたいてい、base64が足した3分の1のさらに10分の1程度で、全部ではありません。パーセントエンコードしたSVGは逆で、依然としてテキストなので以前と同じくらいよく圧縮されます。SVGをbase64にすべきでない理由が、もうひとつあるわけです。
### 画像そのものは変わりますか？
変わりません。ここにあるほかの多くのツールとの、意図した違いです。ピクセルへデコードして書き直すことは一切ありません。ディスクから読んだバイト列が、そのままURIに入ります。JPEGは同じ画質、同じ寸法の、まったく同じJPEGのままです。結果を複製ではなく同じファイルと言い切れるのは、そのためです。
### ではEXIFやGPSの情報もスタイルシートに入るのですか？
入ります。貼る前に考えておく価値があるのがここです。何も再エンコードしないので、カメラが書いたものはすべて画像と一緒に移動します。位置情報も、撮影日時も、カメラのシリアル番号もです。スマホの写真ではそれが30KBに達することもあり、ページのクリティカルパス上で40KBのbase64になり、しかも自宅の住所がリポジトリにコミットされるものの中に入ります。このページはJPEG、PNG、WebPにどれだけメタデータがあるのかを読み取ってお知らせします。先に外すには、[EXIFビューアー・削除ツール](https://abox.tools/ja/exif-editor/)をお使いください。
### ファイルの拡張子と違う種類が使われたのはなぜですか？
拡張子は間違いうるのに、バイト列は間違わないからです。`logo.png`という名前なのに実際はJPEGとして書き出されたファイルは、どの画像ツールも対処しなければならない程度にはよくあります。そして種類を誤って宣言したデータURIは、ただ表示されません。代替手段も、読む価値のあるエラーメッセージもありません。ですから種類はファイルの先頭数バイトから読み取ります。ここで扱うどの形式でも、そこには曖昧さなく何であるかが書かれています。両者が食い違う場合は、ページがお知らせします。
### プレビューが真っ白です。何が起きたのですか？
おそらくURIの問題ではありません。HEICとTIFFはどちらも完全に正しいデータURIになりますが、Safari以外のブラウザはそれを描きません。ですから貼った先でも画像は出ません。[画像圧縮ツール](https://abox.tools/ja/compress-image/)か[画像リサイズツール](https://abox.tools/ja/resize-image/)で、先にPNG、JPEG、WebPに変換してください。形式がありふれたものなら、ファイル自体が壊れている可能性が高いです。プレビューはこのページが組み立てたURIから描くので、真っ白なら画像がデコードできなかったということです。
### データURIにサイズの上限はありますか？
はい。データURLにはブラウザごとに異なる有限の上限があり、使用先のアプリやコンテンツポリシーがさらに小さな上限を設ける場合もあります。CSSや`<img>`では使えますが、アドレスバーの移動には別のセキュリティ制限があります。埋め込む画像は小さくし、使用先で試してください。[MDNに上限と制限の説明があります](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data)。
### 無料ですか。アカウントは必要ですか？
無料です。アカウントも、ログインも、試用期間も、透かしもありません。ファイルの数にもサイズにも制限はありません。その費用を払うサーバーが存在せず、処理が手元の端末で起きているからです。このサイトには広告があり、それが費用を賄っています。広告に画像の情報が渡されることはありません。
### オフラインでも動きますか？
動きます。ページを一度読み込んでから通信を切っても、そのまま使えます。何もアップロードされていないことを示す、いちばん簡単な方法でもあります。エンコードのために画像をどこかへ送っている道具なら、線を抜いた瞬間に止まるからです。
## この主張を確かめる方法
- **処理はこのブラウザー内で行います。** 入力と結果はブラウザー内で処理し、処理コードはそれらを処理用にアップロードしません。Content-Security-Policyは資源と接続先を制限しますが、許可済みの相手はリクエストを受け取れます。内容は検査せず、何も送られないことを単独で証明しません。具体的な操作の要求とソースを比較するか、切断中にローカル操作を完了してください。
- **何かを取りに行くコードがありません。** `src/`のどこにも`fetch`も`XMLHttpRequest`も`sendBeacon`もありません。エンコードの実体は`btoa`と`encodeURIComponent`、ブラウザが最初から持っている2つの関数です。どちらもバイト列を受け取ってテキストを返すだけで、どこへも行きません。
- **プレビューが証拠です。** 各結果の横に出る画像は、元のファイルからではなく、このページがいま組み立てたデータURIから描いています。表示されるのは、そのURIがサーバーを介さずに手元の端末で正しくできているからです。もし表示されなければ、壊れたものを渡すのではなく、ページがそう伝えます。
- **メタデータの警告は、使う側に立っています。** データURIはファイルをそのまま複製するので、写真のGPS座標もそれに乗ってスタイルシートへ入っていきます。このページはそれがどれだけあるのかを読み取ってお知らせします。そうしなければ、コミットしたあとで気づくことになるからです。
- **Googleが読み込むものと、渡されないもの。** 広告と計測のスクリプトはGoogleから、寄付ボタンはBuy Me a Coffeeから来ています。そのどれにも、画像に関する情報は渡されません。ファイルを読み、エンコードするコードはすべてこのオリジンから配信され、リポジトリに載っています。
- **オフラインで動きます。** 通信を切ってもこのツールは何も変わりません。もともと通信する段階が存在しないからです。これがいちばん単純な証明です。
**自分で確かめてください。**以上のどれも、鵜呑みにする必要はありません。このページは、リポジトリにあるテンプレートと設定から、誰でも読んで実行できるビルドスクリプトが生成しています。その結果は`dist`ブランチに置いてあるので、配信されているものと、ソースをビルドした結果とを差分で比べられます。 https://github.com/A-Box-of-Tools/website
まず読むとよいのは、Content-Security-Policyについては`config/site.toml`、2種類のエンコードとそれぞれの理由については`src/encode.js`、メディアタイプを名前ではなくファイルの中身から読み取る方法については`src/sniff.js`、これから貼ろうとしているもののうちどれだけが画像でないのかを調べる部分については`src/metadata.js`です。
画像をデータURIに変える手順
- 画像を選びます。選択欄にドロップするか、手で選んでください。ブラウザがディスクから直接読み出します。その間に何かがどこかへ送られることはありません。
- 結果をどこへ持っていくのかを決めます。URIそのもの、CSSルール、カスタムプロパティ、
<img>タグ、Markdown。どれもURIを引用符で囲んで出します。インライン化したSVGが動くか、黙って動かないかを決めるのは、この細部です。 - 代償を読みます。各結果には、何文字になったか、ファイルよりどれだけ大きいか、そしてこの大きさで埋め込むのが良い考えかどうかが表示されます。base64は3分の1を足します。その3分の1がリクエスト1回の節約に見合うかはサイズ次第なので、線のどちら側にいるのかをページが示します。
- 警告を確かめます。画像がEXIF、カラープロファイル、XMPを抱えている場合は、結果の何バイトがそれなのかとともに示します。拡張子が実際の形式と食い違っている場合は、形式のほうを採用してその旨を伝えます。ブラウザが結果を描けない場合も、そう伝えます。
- コピーするか、ダウンロードします。結果ごとにボタンが1つ、全部まとめて用にもう1つあります。カスタムプロパティは
:rootブロックに包まれて出てくるので、スタイルシートの先頭にそのまま貼れます。
詳しい解説
画像をCSSの中に入れるべきとき、そうでないとき データURIの代償、base64が3分の1を足しgzipがそれを返してくれない理由、SVGを決してbase64にすべきでない理由、そして埋め込んだSVGを黙って壊す引用符の間違い。
箱の中のほかのツール
よくある質問
画像はどこかにアップロードされますか？
されません。読み込みもエンコードも、お使いのブラウザが手元のハードウェア上で、すでに持っている2つの関数を使って行います。このツールにはネットワーク機能が一切なく、何も取りに行かず、何も送りません。ページのContent-Security-Policyには接続してよいアドレスがすべて挙がっていますが、そのどれも当サイトのものではありません。
データURIとは何ですか？
ふつうウェブアドレスが入る場所に、ファイルまるごとを書く方法です。url("logo.png")はブラウザに取りに行けと指示するものですが、代わりにurl("data:image/png;base64,iVBORw0...")と書けば、そこに画像そのものが入っています。ブラウザはその場でデコードします。実際の効果はリクエストが1回減ることです。画像はスタイルシートやページのあとではなく、それと一緒に届きます。
SVGがbase64にならないのはなぜですか？
正しいUTF-8のSVGには、通常base64より短く、読みやすいパーセントエンコードを使います。XMLの文字コードが異なるSVGや不正なUTF-8には、元のバイト列と文字コードの宣言を保持するため、自動的にbase64を使います。チェックボックスをオンにするとUTF-8のSVGにもbase64を使います。元のファイルをブラウザが描画できるかどうかは、プレビューで確認します。
base64にすると画像はどれくらい大きくなりますか？
だいたい3分の1です。ファイルの3バイトがbase64の4文字になるので、先頭のdata:image/png;base64,を数える前で33%増です。これが下限で、避けられません。URLが許す文字だけで任意のバイト列を書くことの代金だからです。だからこのページは、スタイルシートを配備してから気づくことのないよう、ファイルサイズの隣に文字数を表示します。
画像を埋め込むのが本当に良い考えなのは、どんなときですか？
小さくて、すぐに必要なときです。どのページも読み込むスタイルシートの中の2KBのアイコンなら明らかに得です。往復が1回減り、CSSが届いた瞬間に画像もそこにあります。10KBあたりを超えると割に合わなくなります。埋め込んだ画像はもはや独立したファイルではないので、単独ではキャッシュされず、ほかと並行して取得されず、周りのファイルが変わるたびに丸ごと再ダウンロードされます。スタイルシートの中の200KBの写真は、サイトのすべてのページのクリティカルパスに200KB足すということです。各結果がその線のどちら側に落ちるのかは、ページが示します。
gzipをかければbase64の増加分は帳消しになりますか？
期待されるほどにはなりません。すでに圧縮済みのファイル、つまりPNGもJPEGもWebPもそうですが、そのbase64は圧縮が効きません。圧縮器が見つけられる冗長性がほとんど残っていないからです。取り戻せるのはたいてい、base64が足した3分の1のさらに10分の1程度で、全部ではありません。パーセントエンコードしたSVGは逆で、依然としてテキストなので以前と同じくらいよく圧縮されます。SVGをbase64にすべきでない理由が、もうひとつあるわけです。
画像そのものは変わりますか？
変わりません。ここにあるほかの多くのツールとの、意図した違いです。ピクセルへデコードして書き直すことは一切ありません。ディスクから読んだバイト列が、そのままURIに入ります。JPEGは同じ画質、同じ寸法の、まったく同じJPEGのままです。結果を複製ではなく同じファイルと言い切れるのは、そのためです。
ではEXIFやGPSの情報もスタイルシートに入るのですか？
入ります。貼る前に考えておく価値があるのがここです。何も再エンコードしないので、カメラが書いたものはすべて画像と一緒に移動します。位置情報も、撮影日時も、カメラのシリアル番号もです。スマホの写真ではそれが30KBに達することもあり、ページのクリティカルパス上で40KBのbase64になり、しかも自宅の住所がリポジトリにコミットされるものの中に入ります。このページはJPEG、PNG、WebPにどれだけメタデータがあるのかを読み取ってお知らせします。先に外すには、EXIFビューアー・削除ツールをお使いください。
ファイルの拡張子と違う種類が使われたのはなぜですか？
拡張子は間違いうるのに、バイト列は間違わないからです。logo.pngという名前なのに実際はJPEGとして書き出されたファイルは、どの画像ツールも対処しなければならない程度にはよくあります。そして種類を誤って宣言したデータURIは、ただ表示されません。代替手段も、読む価値のあるエラーメッセージもありません。ですから種類はファイルの先頭数バイトから読み取ります。ここで扱うどの形式でも、そこには曖昧さなく何であるかが書かれています。両者が食い違う場合は、ページがお知らせします。
プレビューが真っ白です。何が起きたのですか？
おそらくURIの問題ではありません。HEICとTIFFはどちらも完全に正しいデータURIになりますが、Safari以外のブラウザはそれを描きません。ですから貼った先でも画像は出ません。画像圧縮ツールか画像リサイズツールで、先にPNG、JPEG、WebPに変換してください。形式がありふれたものなら、ファイル自体が壊れている可能性が高いです。プレビューはこのページが組み立てたURIから描くので、真っ白なら画像がデコードできなかったということです。
データURIにサイズの上限はありますか？
はい。データURLにはブラウザごとに異なる有限の上限があり、使用先のアプリやコンテンツポリシーがさらに小さな上限を設ける場合もあります。CSSや<img>では使えますが、アドレスバーの移動には別のセキュリティ制限があります。埋め込む画像は小さくし、使用先で試してください。MDNに上限と制限の説明があります。
無料ですか。アカウントは必要ですか？
無料です。アカウントも、ログインも、試用期間も、透かしもありません。ファイルの数にもサイズにも制限はありません。その費用を払うサーバーが存在せず、処理が手元の端末で起きているからです。このサイトには広告があり、それが費用を賄っています。広告に画像の情報が渡されることはありません。
オフラインでも動きますか？
動きます。ページを一度読み込んでから通信を切っても、そのまま使えます。何もアップロードされていないことを示す、いちばん簡単な方法でもあります。エンコードのために画像をどこかへ送っている道具なら、線を抜いた瞬間に止まるからです。