画像をData URLに変換してHTML/CSSに直接埋め込み。プレビュー・imgタグ/CSSスニペットつき。すべてブラウザ内で処理
data:image/...;base64,....)と、そのまま貼り付けて使える <img> タグ・CSS background-image のスニペットが生成されます。画像はサーバーに送信されず、すべてお使いのブラウザ内で処理されます。
Data URLは、画像などのファイルの中身を「data:image/png;base64,....」のような1本の文字列として表現したものです。画像をBase64でエンコードしてURLの中に直接埋め込めるため、外部ファイルを別途読み込まなくても、HTMLの img タグや CSS の background-image にそのまま貼り付けて表示できます。小さなアイコンやロゴをHTTPリクエストを増やさずに埋め込みたいときに便利です。
いいえ。変換はすべてお使いのブラウザ内のJavaScript(FileReaderのreadAsDataURL)で完結します。選択した画像がサーバーへ送信・保存されることはありません。社外秘の画像や個人情報を含む画像も安心して変換できます。
Base64エンコードは3バイトを4文字で表すため、元の画像より約33%大きくなります。さらに data: のプレフィックスや改行が加わります。小さな画像の埋め込みには向きますが、大きな画像をData URLにするとHTMLやCSSが肥大化しキャッシュも効きにくくなるため、通常の画像ファイル参照の方が適しています。