画像 → Base64
PNG・JPG・WebP・GIF画像をBase64のData URI、Base64文字列、HTMLのimgタグ、CSS背景に変換します
ここに画像ファイルをドロップ
またはクリックしてファイルを選択
PNG、JPG、WebP、GIF、SVGをBase64に変換し、実際に必要な形で取得できます。完全なData URI、Base64文字列のみ、HTMLの<img>タグ、CSSのbackground宣言を、貼り付けるだけの状態で出力します。
小さなグラフィックをコードに直接埋め込むと、ネットワークリクエストを1つ減らせ、スタイルシートが読み込まれる前でもアイコンが確実に表示されます。アイコン、スピナー、メール署名でData URIがよく使われるのはそのためです。代償はサイズで、Base64はバイナリファイルより約3割大きくなり、個別にキャッシュもできないため、小さな素材にとどめ、大きな画像は通常どおりリンクしてください。
画像をBase64に変換する方法
画像を選択します
必要な出力形式を選びます
Data URI、タグ、CSSをコピーします
よくある質問
画像はいつ埋め込むべきで、いつリンクすべきですか？
おおよそ10 KB以下の小さく頻繁に使うグラフィック（アイコン、ロゴ、スピナー）では、サイズの増加よりリクエスト削減のほうが価値があります。大きな写真はファイルのままにして、ブラウザにキャッシュさせてください。
Base64文字列が元のファイルより大きいのはなぜですか？
Base64は3バイトを4文字として符号化するため、約33%増えます。この増加は符号化の仕組み上避けられません。
どの形式を使えますか？
PNG、JPG、WebP、GIF、SVGです。ベクターのSVGはData URIとして埋め込んでも拡大縮小できるため、アイコンでは最良の選択になることがよくあります。
HTMLだけでなくCSSでも使えますか？
はい。background-image宣言にはCSSの形式を、imgのsrc属性にはHTMLの形式をコピーしてお使いください。
メールクライアントで表示されますか？
最近のクライアントのほとんどは表示しますが、セキュリティのためにData URIを削除するものもあります。レイアウトが重要なメールテンプレートでは、画像を配信してリンクする方式にしてください。
画像はアップロードされますか？
いいえ。エンコードはブラウザ内で行われます。
概要
| 入力 | 画像 |
|---|---|
| 複数ファイル | はい |
| 実行場所 | ブラウザ内で実行 - ファイルはアップロードされません |
| オフラインでも動作 | はい — ページを読み込んだ後 |
| 料金 | 無料・登録不要・透かしなし |
変換が静かに壊れるところ
変換のバグの多くは構文ではなく意味の問題です。郵便番号のCSV列は、表計算ソフトが数値だと推測した瞬間に先頭のゼロを失います。長いIDは浮動小数点の精度を超えてしまいます。日付は、日が先か月が先かによって意味が変わります。JSONのキーには順序がありませんが、配列にはあります。キーを並べ替えるツールは何も変えませんが、配列を並べ替えるツールはデータを変えてしまいます。Unicodeも落とし穴です。テキストはUTF-8やUTF-16、あるいはBOM付きで届くことがあり、推測を誤ったデコーダーはアクセント付きの文字を文字化けに変えてしまいます。変換を信用する前に、最初と最後の行、先頭にゼロがあるフィールド、引用符・カンマ・改行を含むフィールドを抜き取り検査してください。
データ形式の選び方
JSONは、APIが返すものやプログラムが読み取るものの既定の選択です。入れ子構造、数値、真偽値、nullを自然に扱え、どの言語でもパースできます。CSVはより小さく、表計算ソフトでそのまま開けますが、入れ子を表現する方法がなく、区切り文字、引用符、文字コードに関する共通規格もありません。変換がうまくいかないのはまさにこの点です。XMLは冗長ですが、属性、混在コンテンツ、スキーマを扱えるため、文書形式や既存の連携では今も主流です。YAMLは設定ファイルにとって最も読みやすい形式ですが、空白に敏感で、型の自動変換が意外な結果を生みます（「no」がfalseになったり、1.10のようなバージョンが1.1になったりします）。見た目が最もよいものではなく、利用する側のツールが好む形式を選んでください。