画像Base64変換ツール
画像ファイルをBase64データURLに変換し、HTMLやCSSで使えるコードを生成します
画像Base64変換ツールとは
画像ファイルをBase64エンコードしてData URL形式に変換するツールです。Base64 Data URLをHTMLの<img>タグのsrc属性やCSSのbackground-imageに使うことで、外部ファイルの読み込みなしに画像を埋め込むことができます。ブラウザ内でのみ処理されプライバシーが安全です。
よくある質問
Base64に変換するとファイルサイズはどうなりますか？
Base64エンコードは3バイトのバイナリを4文字のASCIIに変換するため、ファイルサイズは元の約133%（4/3倍）に増加します。例: 1KBの画像 → 約1.33KBのBase64文字列。さらに改行・パディング（"="）も加わるため、実際は約133〜140%程度。大きな画像のインライン埋め込みはHTMLファイルサイズを著しく増やすため、小さなアイコン・装飾用の小さな画像のみに限定して使うのが一般的です。
どのような用途に使いますか？
主な用途: (1) HTMLメールテンプレートへの画像埋め込み（外部画像のブロックを避けるため）、(2) CSS Sprite の代替（小さなアイコンをCSSに埋め込み、HTTP リクエスト数削減）、(3) オフライン対応HTML文書への画像埋め込み（PDF/印刷用テンプレート）、(4) ローカルストレージに画像を保存する場合、(5) Web Worker内での画像処理、(6) APIで小さな画像を JSON に含めて送信、などです。
アップロードした画像は安全ですか？
はい、本ツールはブラウザの FileReader API を使ってすべての処理をクライアントサイドで完結させます。画像データはst0z.comのサーバーや第三者に送信されることはなく、社外秘の画像、個人写真、未公開のロゴなども安全に Base64 化できます。Web Crypto API を使った暗号化処理と同様、データはブラウザを離れません。
SVGファイルも変換できますか？
はい、SVGも他の画像フォーマットと同様にBase64変換できますが、SVGはテキスト形式のため、より効率的な「URLエンコード方式」（`data:image/svg+xml,<svg>...`）を使うのが推奨されます。Base64よりファイルサイズが小さくなり、ブラウザのキャッシュ効率も良くなります。本ツールは Base64 のみ対応しているため、SVG最適化が必要な場合は専用ツールをご検討ください。
CSSのbackground-imageに使うには？
Base64文字列を以下のように指定します: `background-image: url("data:image/png;base64,iVBORw0KG...")`。アイコンや背景パターンの埋め込みでよく使われます。注意: (1) 大きな画像はCSSファイルが肥大化、(2) ブラウザのキャッシュ効率が落ちる（変更時にCSS全体を再ダウンロード）、(3) 5KB以下の小さな画像のみに限定するのがベストプラクティスです。
HTMLの<img>タグで使うには？
imgタグの src 属性に Base64文字列を直接指定します: `<img src="data:image/jpeg;base64,/9j/4AAQ..." alt="...">`。注意点: (1) HTMLファイルサイズが大きくなる、(2) 画像のキャッシュが効かない、(3) ブラウザの画像並列読み込みの恩恵を受けられない。Eメール HTML や、CDNが使えない環境（SPA初期ロード時のスケルトン画像）で重宝します。
Base64画像のキャッシュは効きますか？
いいえ、Base64でHTMLやCSSに埋め込まれた画像は、HTML/CSSファイル自体のキャッシュに依存します。通常の画像ファイル（外部ファイル）はブラウザによって個別にキャッシュされ、複数ページで再利用できますが、Base64埋め込みは「ページごとに毎回ダウンロード」される非効率な状態になります。頻繁に使う画像は外部ファイルとして配置するのが推奨です。
パフォーマンスへの影響は？
Base64画像のメリット: HTTP リクエスト数の削減、CSS と一体化することで初期表示の高速化（small画像）。デメリット: (1) ファイルサイズ133%増、(2) ブラウザのキャッシュが効かない、(3) parsing時間増、(4) gzip圧縮効率が悪い、(5) 並列ダウンロードの恩恵なし。ベストプラクティスは「5KB以下の小さなアイコンのみBase64化」「写真や大きな画像はCDN+lazy loading」です。