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 ペイロードから埋め込み画像を抽出する場合に便利です。

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

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