JPGやPNGなどの画像ファイルをオンラインでBase64文字列に変換します。Web開発やデータ埋め込みに最適です。
画像データをHTML、CSS、JSON、メールなどのテキスト環境に直接埋め込み、余分なHTTPリクエストを減らしたい場合、本ツールを使用すると画像ファイルのバイナリデータをBase64エンコード文字列にすばやく変換できます。Base64は、8ビットのバイナリデータを7ビットのASCII文字にエンコードする表現方法です。出力結果はdata:image/[フォーマット];base64,をプレフィックスとするテキスト文字列となり、画像ソースとして直接使用できます。
Base64エンコード後の文字列は元のファイルよりどのくらい大きくなりますか?
Base64エンコードにより、データサイズは約33%増加します。例えば、100KBの画像をエンコードすると、約133KBのテキスト文字列になります。
生成されたBase64文字列が正しいかどうかを確認するにはどうすればよいですか? 有効な画像のBase64 Data URLは、「data:image/」で始まり、その後に画像フォーマット(png、jpegなど)と「;base64,」の識別子が続きます。これをブラウザのアドレスバーやHTMLのimgタグのsrc属性に直接貼り付けて、プレビュー検証を行うことができます。
一度に処理できるファイルは1つのみで、最大100MBまで対応しています。生成されるBase64文字列は長くなるため、大きすぎる画像はターゲットファイル(HTML、CSSなど)のサイズを著しく増加させ、読み込みパフォーマンスに影響を与えます。重要ではない大きな画像は、圧縮してから変換することをお勧めします。すべての処理はブラウザのローカル環境で完了し、画像データがサーバーにアップロードされることはありませんので、安心してご利用ください。
Web開発において、Base64エンコードは小さなアイコン、ファーストビューの重要な画像、またはインライン化が必要なSVGの埋め込みに適しており、リクエスト数を減らすことができます。ただし、サイズが約1/3増加し、ブラウザで個別にキャッシュできない点に注意が必要です。10KBを超える画像については、パフォーマンスのメリットとデメリットを慎重に評価する必要があります。典型的な例:logo.png(2KB)を変換すると、data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...のような文字列が得られ、CSSのbackground-image属性に直接配置できます。