Base64.im の使用チュートリアル

1. Base64 エンコードを使用する理由

Base64 はバイナリデータを文字列で表現します。小さなアイコンを HTML、CSS、単一ファイルのデモに埋め込めます。メール署名では、利用するメールソフトの対応を確認してください。

2. サポートされている画像形式

JPEG、PNG、GIF、WebP、SVG、BMP に対応します。元のバイトと MIME タイプを保持し、圧縮、サイズ変更、画像形式の変換は行いません。

3. Base64.im を使用して画像を変換する方法

ファイルを選択するか画像領域へドロップします。1回に20枚まで、各10 MB以内です。結果ごとにコピーとダウンロードができます。

4. Base64 でエンコードされた画像を HTML 画像ソースとして使用する

data:image/...;base64, を含む完全な結果を img の src に貼り付け、alt も指定します。クリップボードが使えない場合は、結果を選択して手動でコピーしてください。

<img src="data:image/png;base64,…" alt="…">

5. Base64 でエンコードされた画像を CSS 背景として使用します

完全な Data URI を CSS background-image の url() に指定します。プレフィックスとパディングを保持してください。例の省略記号を含む文字列では画像は表示されません。

.image { background-image: url("data:image/png;base64,…"); }

6. 注意事項

Base64 は元のデータより約3分の1大きくなります。小さい画像に使い、対象ブラウザで確認してください。大きい画像や再利用する画像には通常の URL が適しています。