画像をBase64に変換
画像ファイルをコピーできるBase64文字列に変換し、すぐに使えるHTMLとCSSのコードも用意します。
画像をBase64に変換するツールは、画像ファイルをBase64のテキストにエンコードします。これにより、JSON、HTMLページ、CSSファイルの中などに、画像をプレーンテキストとして保存したり送ったりできます。文字列はファイルの元のバイトから作られるため、画像が再圧縮されたり変更されたりすることはありません。文字数を表示し、画像をまるごと含んだHTMLのimgタグとCSSのbackground-imageルールも提供します。
画像をBase64に変換の使い方
- 1
画像を開く
画像ファイルをドロップ、選択、または貼り付けます。アイコンのような小さな画像に最適です。
- 2
Base64文字列を取得する
文字列がすぐに表示され、文字数とおおよそのサイズもわかります。
- 3
必要なものをコピーする
文字列だけなら「Base64をコピー」、すぐに使えるコードなら「HTMLをコピー」か「CSSをコピー」をクリックします。
- 4
コードに貼り付ける
文字列をJSON、HTML、CSS、スクリプトに貼り付けます。
できること
- バイト単位で正確にエンコード
- 元のファイルをそのままエンコードするので、再圧縮も画質の変化もありません。
- サイズ情報
- 使う前に、文字列の文字数とおおよそのサイズを確認できます。
- HTMLとCSSのコード
- データURIをまるごと含んだimgタグやbackground-imageルールをコピーできます。
- ローカルでエンコード
- ファイルはブラウザ内で読み込まれてエンコードされ、アップロードされることはありません。
よくある質問
画像のBase64は何に使うのですか？
Base64は、バイナリの画像データをプレーンテキストの文字に変換します。開発者は小さな画像をHTML、CSS、JSON、メールのテンプレートに直接埋め込み、別の画像ファイルを読み込まなくて済むようにするために使います。
Base64文字列が画像ファイルより大きいのはなぜですか？
Base64は3バイトごとに4文字を使うため、結果は約33%大きくなります。30 KBの画像なら、およそ40 KBのテキストになります。
Base64とデータURIの違いは何ですか？
Base64はエンコードされたテキストだけです。データURIにはdata:image/png;base64,のような接頭辞が付き、ブラウザがファイルの種類を判断できます。このツールは文字列だけを出力し、「画像をデータURIに変換」では完全な形を出力します。
大きな画像をBase64に変換してもよいですか？
通常はおすすめしません。Base64はアイコンのような小さな画像に向いています。大きな写真はHTMLやCSSを大幅に重くし、ブラウザも画像を別ファイルとしてキャッシュできなくなります。
エンコード中に画像は変更されますか？
いいえ、元のバイトがそのままエンコードされます。唯一の例外はiPhoneのHEIC写真で、ほとんどのブラウザはHEICを表示できないため、先にPNGに変換されます。