PICTURE · BASE64
Base64変換
画像を入れるとHTML/CSSにそのまま使えるData URLを作ります。
- 1.エンコード / デコードモードを選びます
- 2.エンコード:画像をドラッグし、出力形式(データURL・IMG・CSS)を選びます
- 3.デコード:Base64 文字列を貼り付け「デコード」を押します
- 4.生成されたコードをコピーするか画像をダウンロードします
→ 生成物: Base64 データURL・HTML・CSS スニペット(エンコード)、または復元された画像ファイル(デコード)
画像を入れるとData URLが表示されます。
このツールについて
画像を Base64 文字列に変換し、`data:` URL の形で書き出します。画像ファイルを別に置かず HTML や CSS の中に直接埋め込めるため、1 ファイルで完結させたい場面に向きます。
こんなときに
- —外部画像が遮断されるメールテンプレートに小さなアイコンを入れるとき
- —単一の HTML ファイルに画像まで含めて丸ごと渡すとき
- —リクエスト数を減らすため、ごく小さなアイコンを CSS に埋め込むとき
知っておきたいこと
- —Base64 にすると容量が約 3 分の 1 増えます。大きな写真には向きません。
- —ブラウザが個別にキャッシュできないため、複数ページで使う画像はファイルのほうが速くなります。
- —文字列が非常に長くなりコードが読みにくくなるので、小さなアイコン程度にとどめてください。