画像をbase64に

使い方

1. 画像を追加します。PNG・JPEG・GIF・WebP・AVIF・SVG・BMP・ICOに対応します。
2. まわりに付ける形を選びます。データURIだけか、CSSの1行か、imgタグか。
3. 結果をコピーします。
4. サイズの注意書きを確かめてください。リクエストは減りますが、割に合う範囲は思ったより狭いはずです。

よくある質問

再エンコードや圧縮をしますか。

しません。ファイルのバイト列をそのまま読んで符号化するので、最適化済みのPNGは最適化されたまま、アニメーションGIFは動いたままです。「気を利かせて」再エンコードする道具は、アイコンの色を黙って変えてしまいます。

どれくらい大きくなりますか。

約3分の1増えます。base64は3バイトを4文字にし、さらに接頭辞が付きます。HTTPリクエストを1つ減らす代償です。

埋め込む価値があるのはどんな場合ですか。

すぐ必要になる小さなもの、アイコン、1×1の余白画像、メールの中の小さなロゴなどです。数キロバイトを超えると、毎回の読み込みで増える分のほうが、省いたリクエストより高くつくことが多くなります。

SVGも埋め込めますか。

埋め込めますが、多くの場合そうすべきではありません。SVGはテキストなので、HTMLに直接書けばCSSで色を変えられます。base64にするのは、どうしても1つの不透明な文字列でなければならないときです。

アップロードされますか。

いいえ。すべてブラウザの中で処理されます。