Base64画像エンコーダ

画像 (JPG、PNG、SVG、WEBP) をドラッグ アンド ドロップするか、クリックしてアップロードします。このツールは Base64 文字列を即座に生成し、CSS または HTML でデータ URI として使用できるようにします。

アイコン、ロゴ、UI 要素 (5KB 未満) などの小さな画像には Base64 エンコードを使用します。これにより、これらのアセットに対する HTTP リクエストが排除され、パフォーマンスがわずかに向上します。大きな画像の場合は、外部 URL の方が適しています。

これを背景画像として使用します。background-image: url('data:image/png;base64,iVBORw0KGgo...');このツールは、すぐにコピーできるこの CSS スニペットを自動的に生成します。

これを img タグの src 属性として使用します: <img src='data:image/png;base64,iVBORw0KGgo...'/>。このツールは、この HTML スニペットを生成します。

はい。 Base64 エンコードでは、元のバイナリと比較してファイル サイズが約 33% 増加します。これはトレードオフであり、HTTP リクエストは保存されますが、データは大きくなります。非常に小さな画像には価値がありますが、大きな写真には価値がありません。

はい。デコード モードに切り替え、Base64 文字列 (data:image/... プレフィックスの有無にかかわらず) を貼り付けると、ツールによって画像がレンダリングされ、ファイルとしてダウンロードできるようになります。これは、HTML ソース コードまたは API ペイロードから埋め込み画像を抽出する場合に便利です。

JPG、PNG、GIF、WebP、または SVG をドロップすると、ツールは Base64 文字列とすぐに貼り付けられるスニペット (データ URI、img src、CSS 背景 URL) を出力します。変換はローカルで行われるため、画像はアップロードされません。

Base64 (または完全なデータ URI) を貼り付けると、ツールが表示され、元の画像をダウンロードできるようになります。これは、CSS または HTML から埋め込み画像を抽出するのに役立ちます。

Base64 は画像を HTML、CSS、または電子メールに直接埋め込むため、別のファイルを読み込む必要がなく、小さなアイコンやインライン アセットに便利ですが、大きな画像は通常のファイルのままにしておく方がよいでしょう。

はい、バイナリはテキストとして表現されるため、約 3 分の 1 になります。そのため、サイズよりもリクエストを回避することが優先される小規模なアセットに最適です。

いいえ。エンコードとデコードはすべてブラウザ内で行われます。