Image and encoding tools
Image to Base64 Converter
Convert PNG, JPG, GIF, SVG, WebP, and ICO files into Base64 strings, Data URIs, CSS snippets, or HTML img tags directly in your browser.
Images are read in the browser. The tool does not upload your files or generated output.
Drag and drop an image here, or click to browse
PNG, JPG, GIF, SVG, WebP, ICO
よくある質問
Base64 に変換するとファイルサイズはどうなりますか？
Base64 エンコードにより元のファイルより約 33% サイズが増加します。これは 3 バイトを 4 文字で表現するためです。HTML や CSS に直接埋め込む際は HTTP リクエストを削減できますが、サイズ増加とのトレードオフを考慮してください。
どんな用途に使いますか？
CSS の background-image に画像を直接埋め込む、HTML メールに画像を添付する、API で画像データを JSON として送受信する、などの用途に使われます。
対応している画像形式は何ですか？
PNG、JPEG、GIF、SVG、WebP、ICO に対応しています。これらはブラウザが標準でサポートしている主要な画像フォーマットです。
関連ツール
Multiple outputs
Copy raw Base64, a Data URI, CSS background-image, or an HTML img tag.
Preview before copying
Check file name, type, dimensions, and encoded size before using the output.
Small asset friendly
Best for icons, placeholders, email snippets, and portable single-file examples.
Base64 Image Notes
Size tradeoff
Base64 normally increases payload size by about 33%. For large media, a normal image URL with cache headers is usually faster.
Data URI usage
A Data URI includes the MIME type and Base64 content in one string, so it can be pasted into an HTML src attribute or CSS url() value.
Privacy
The conversion runs locally with browser APIs. The file content is not submitted to cc-tools during conversion.
Validation
If a file cannot be read as an image, the tool reports an error instead of generating a broken snippet.
FAQ
Are uploaded images sent to a server?
No. The file is read by your browser with the File API, and the generated Base64 output stays on your device unless you copy it elsewhere.
When should I use Base64 images?
Use Base64 for small icons, placeholders, email snippets, or single-file demos. Larger images are usually better as normal files with caching.
Why is the Base64 output larger than the image file?
Base64 encoding adds about one third of size overhead because binary data is represented as text characters.
Which output format should I copy?
Use Data URI for HTML image sources and CSS backgrounds, raw Base64 for API payloads, and the HTML/CSS snippets for quick paste workflows.