画像をBase64に変換
画像ファイルを選択してBase64エンコード文字列に変換します。データURIプレフィックスを切り替えて、すぐに使えるCSS/HTML出力を取得できます。すべての処理はブラウザ内で行われます。
画像からBase64への変換について
このツールはブラウザ内で画像をBase64エンコード文字列に変換します。データはサーバーにアップロードされません。
- Data URI：プレフィックスを有効にすると、CSSの
background-imageやHTMLの<img src="...">ですぐに使用できます。 - Raw Base64：プレフィックスなしの場合、生のエンコード文字列が得られます。
- JPEG、PNG、GIF、WebP、SVG、その他ブラウザがサポートする画像形式に対応しています。
画像を data URI として埋め込むとリクエストが 1 つ減り、サイズは約 3 分の 1 増えます。base64 は 3 バイトごとに 4 文字を使うからです。この取引は、小さくて常に必要なものには見合いますが、写真には見合いません。埋め込んだ画像は個別にキャッシュできないため、それを含むファイルの複製ごとに再ダウンロードされます。
マークアップに手こずっていませんか
エスケープされた実体参照、崩れた文字コード、CMS では正しく見えるのにページでは違って見える内容。たいていは、どこかが推測で処理しているサインです。当社はフロントエンドと、その背後にある公開の流れまで作ります。書いたとおりに訪問者へ届けるためです。
サイトについて相談するよくある質問
data URI が見合うのはどんなときですか
すぐ必要になる小さな画像です。アイコン、スペーサー、外部画像が既定で遮断される HTML メールのロゴなど。目安は数キロバイトで、それを超えると増えたサイズが節約したリクエストを上回ります。
符号化した版が大きくなるのはなぜですか
base64 は 3 バイトを 4 文字で表すため、接頭辞を除いても 3 分の 1 大きくなります。転送中は圧縮がいくらか取り戻しますが、ブラウザーは文書内で大きいままの形を保持します。
キャッシュに悪影響はありますか
あります。ここが見落とされがちです。別ファイルの画像は一度キャッシュされて再利用されますが、埋め込んだ画像はスタイルシートやページの一部なので、そのファイルが変わるたびに再取得されます。
どの形式を埋め込めますか
どれでも埋め込めます。base64 は中身を問いません。面白いのは SVG で、もともとテキストなので、data URI にするより SVG をそのまま書いたほうが小さく済むことがよくあります。
画像はアップロードされますか
いいえ。ファイルはブラウザーが読み取ってページ内で符号化するので、端末から出ません。画像が社内のものの画面写真であるとき、つまりほとんどの場合に効いてきます。