← ハシトシステム トップ English ツール ブログ ポスター
画像を選択
クリックして画像を選択
またはここに画像ファイルをドラッグ&ドロップ(PNG・JPEG・GIF・SVG・WebP など)
ここに画像のプレビューが表示されます。
ファイル名: -
元のサイズ: - 変換後(Data URL): -
使い方:画像を選ぶと、右側にData URL(data:image/...;base64,....)と、そのまま貼り付けて使える <img> タグ・CSS background-image のスニペットが生成されます。画像はサーバーに送信されず、すべてお使いのブラウザ内で処理されます。
結果
📖 文字コードやデータ変換のしくみをやさしく図解した学習ポスター(無料配布)もあります。あわせて 学習ポスター一覧 をご覧ください。

よくある質問(FAQ)

Data URL(データURI)とは何ですか?

Data URLは、画像などのファイルの中身を「data:image/png;base64,....」のような1本の文字列として表現したものです。画像をBase64でエンコードしてURLの中に直接埋め込めるため、外部ファイルを別途読み込まなくても、HTMLの img タグや CSS の background-image にそのまま貼り付けて表示できます。小さなアイコンやロゴをHTTPリクエストを増やさずに埋め込みたいときに便利です。

選んだ画像はサーバーにアップロードされますか?

いいえ。変換はすべてお使いのブラウザ内のJavaScript(FileReaderのreadAsDataURL)で完結します。選択した画像がサーバーへ送信・保存されることはありません。社外秘の画像や個人情報を含む画像も安心して変換できます。

Base64にするとファイルサイズはどうなりますか?

Base64エンコードは3バイトを4文字で表すため、元の画像より約33%大きくなります。さらに data: のプレフィックスや改行が加わります。小さな画像の埋め込みには向きますが、大きな画像をData URLにするとHTMLやCSSが肥大化しキャッシュも効きにくくなるため、通常の画像ファイル参照の方が適しています。

📖 小中学生向け 学習ポスター(無料配布)はこちら →