画像をBase64に変換
画像を、HTMLやCSS、JSON、メールテンプレートにそのまま貼り付けられるBase64の文字列にします。
またはここにドラッグ＆ドロップ · 50MBまで無料
もっと大きなファイルは？Proなら500MBまで変換できます無料の上限を超えています。ダウンロードは€1.99から解除できます。
処理中…
ファイルの準備ができました
無料 · 登録不要 · 透かしなし · ファイルは端末から出ません
3ステップで画像をBase64に変換
- 画像を選択するか、ボックスにドロップします。
- 出力形式（データURI、Base64のみ、CSS、HTMLタグ）を選びます。
- 「Base64に変換」をクリックし、コードをコピーするか.txtファイルとしてダウンロードします。
画像をBase64で埋め込むべきとき
Base64はファイルのバイトを普通のテキストとして書き表す方式なので、画像を別ファイルにせず、HTMLページやスタイルシート、JSONデータ、メールの署名の中に直接入れられます。小さなアイコンやロゴならリクエストが1つ減りますし、テキストしか受け付けないAPIやフォームの欄で画像を送る唯一の方法でもあります。
その代わりサイズが増えます。Base64のテキストは元の画像より約3分の1大きくなり、単独でキャッシュすることもできません。数KB程度の画像に使い、写真は普通のファイルのままにしましょう。コードをできるだけ短くしたいなら、先に画像を圧縮するか、ロゴやアイコンにはどのサイズでもくっきり表示されるSVGを使ってください。
よくある質問
画像をBase64に変換する方法は？
画像を選び、出力形式を決めて「Base64に変換」をクリックしてください。コピーボタン付きの欄にコードが表示され、.txtファイルとしてダウンロードすることもできます。JPG、PNG、GIF、WebP、SVG、AVIF、BMP、ICOの画像に対応しています。
データURIとは何ですか？
データURIは、data:image/png;base64, のようにファイルの種類をブラウザに伝える短い接頭辞を、Base64のテキストの前に付けたものです。imgタグのsrcやCSSのurl()など、画像のURLを指定する場所ならどこでも使えます。
HTMLやCSSでBase64を使うには？
出力形式で「HTML の <img> タグ」を選ぶとそのまま使えるimg要素が、「CSS background-image」を選ぶとスタイルのルールに貼り付けられる1行が手に入ります。どちらもデータURI全体を含むので、別ファイルなしで画像が表示されます。
Base64が元の画像より大きくなるのはなぜ？
Base64は3バイトごとに4文字のテキストを使うため、コードはファイルより約33%大きくなります。小さなアイコンなら問題ありませんが、写真ではすぐに大きくなります。コードが長すぎる場合は、先に画像を圧縮するかサイズを小さくしてください。
画像はサーバーにアップロードされますか？
いいえ。画像はお使いの端末のブラウザ内で読み込まれてエンコードされるので、当サイトに送信されたり、どこかに保存されたりすることはありません。ページの読み込みが終われば、インターネット接続がなくても使い続けられます。