画像を Base64 に変換
このツールについて
HTML や CSS で使える Base64 データ URL を作るために画像を選べます。Base64 の画像値を貼り付けて画像ファイルに戻すこともできます。結果の文字数と推定サイズを表示します。
使い方
- 画像を Base64 データ URL に変換
- Base64 データ URL を画像ファイルに戻す
- PNG、JPEG、WebP、GIF を認識
- 結果の長さと推定サイズを表示
- 値をコピーするか、復元した画像をダウンロード
- 方向を選ぶ: 画像から Base64 か、Base64 から画像かを選びます。
- 内容を追加: 画像を選ぶか、Base64 の画像値を貼り付けます。
- コピーまたはダウンロード: データ URL をコピーするか、復元した画像をダウンロードします。
例
- HTML メールに小さなアイコンを埋め込む
- Web ページ用の既定アバター画像を作る
- コピーした Base64 値から画像を復元する
- 別ファイルを置かずに背景画像を試す
制限事項
- Base64 にすると文字量は通常およそ3分の1増えます
- 非常に大きな画像は長すぎる値になり、ページへの直接埋め込みには向きません
- 選んだ画像や入力した Base64 値はブラウザ上で処理され、サーバーには送信されません。
よくある質問
- データ URL と Base64 だけの違いは？
- データ URL には data:image/png;base64,... のような MIME タイプの接頭辞が含まれます。Base64 だけの場合はエンコード内容のみです。
- おすすめの画像サイズは？
- 元画像は数百 KB 以内を目安にしてください。長すぎるデータ URL はページ読み込みを遅くする場合があります。
- CSS の url() から復元できますか？
- データ URL 部分を貼り付ければ、外側の記述があれば自動で取り除きます。