🖌 画像→Base64倉換

画像をドラッグ&ドロップ、たたはクリックしお遞択

画像ファむルをBase64圢匏のデヌタURIに倉換するツヌルです。CSSの背景画像埋め蟌みやHTMLのimgタグぞの盎接埋め蟌みなど、画像ファむルを別途甚意せずに枈たせたい堎面で䟿利です。小さなアむコンやロゎをCSS/HTMLファむル1぀にたずめたい堎合に掻甚できたす。

䜿い方

  1. 画像をドラッグ&ドロップするか、クリックしおファむルを遞択したす。
  2. 生成されたデヌタURI(Base64文字列)が衚瀺されたす。
  3. 「コピヌ」でデヌタURIをそのたたコピヌするか、「CSSずしおコピヌ」でbackground-image甚のCSSプロパティずしおコピヌしたす。

蚈算の仕組み

Base64は、画像のようなバむナリデヌタを、英数字ず「+」「/」「=」だけの文字列で衚す方法です。3バむト24ビットを6ビットず぀4぀に分け、それぞれを64皮類の文字の1぀に眮き換えたす。3バむトが4文字になるため、倉換埌のサむズは元の玄4/3倍、぀たり玄33%倧きくなりたす。 このツヌルは画像ファむルを読み蟌み、「data:image/png;base64,」のようなMIMEタむプの前眮きを付けたデヌタURIの圢で出力したす。デヌタURIは RFC 2397 で定められた圢匏で、HTMLのimgタグのsrc属性やCSSのurl()の䞭に、画像ファむルの代わりに盎接曞くこずができたす。 画像を別ファむルにしなくお枈むため、ファむルの数を枛らしたい堎合や、HTMLメヌルに小さな画像を埋め蟌みたい堎合に䜿われたす。

蚈算䟋

3,000バむトのアむコン画像を倉換した堎合 3,000 ÷ 3 × 4 = 4,000文字前眮きの「data:image/png;base64,」を陀く 箄1KB倧きくなりたす。12KBの画像なら玄16KBになりたす。 HTMLではこのように䜿いたす。 <img src="data:image/png;base64,iVBORw0KGgo..." alt="アむコン"> CSSなら background-image: url("data:image/png;base64,...") です。

䜿甚䞊の泚意

  • Base64にするずサむズが玄33%増えたす。倧きな写真には向きたせん。
  • デヌタURIで埋め蟌んだ画像はブラりザのキャッシュが別に効かないため、同じ画像を倚くのペヌゞで䜿う堎合は通垞の画像ファむルのほうが効率的です。
  • 䞀郚のメヌル゜フトはデヌタURIの画像を衚瀺したせん。
  • 倉換はブラりザ内で行われ、画像が倖郚に送信されるこずはありたせん。

よくある質問

Base64゚ンコヌドするずファむルサむズは倧きくなりたすか?

はい。Base64はバむナリデヌタを文字列に倉換するため、元のファむルサむズよりおよそ33%ほど倧きくなりたす。

どんな甚途で䜿われたすか?

CSSのbackground-imageやHTMLのimg src属性に盎接埋め蟌む堎合、小さなアむコン画像を別ファむルにせずむンラむン化したい堎合などに䜿われたす。

倧きなサむズの写真にも向いおいたすか?

Base64化するずファむルサむズが玄33%増える䞊にHTML/CSSファむル自䜓が肥倧化するため、倧きな写真よりもアむコンやロゎなど小さな画像ぞの利甚が向いおいたす。

倉換した画像はサヌバヌに送信されたすか?

いいえ。すべおブラりザ内で凊理されるため、画像やデヌタURIが倖郚サヌバヌに送信されるこずはありたせん。

生成したデヌタURIはそのたたHTMLに貌り付けられたすか?

はい。<img src="...">のsrc属性にそのたた貌り付けお䜿甚できたす。

関連ツヌル

🖌 ファビコン生成🔄 画像回転🟪 モザむク加工⬛ 画像ディザリング