画像をBase64に変換
画像をBase64テキスト形式に無料で変換できます。小さなロゴやアイコンをHTMLやCSSファイルの中にインラインで埋め込むのに非常に便利です。
Drop an image here
or click to select — JPG, PNG, WebP, GIF all work
Why Convert an Image to Base64
Single File Delivery
Embed images directly in HTML or CSS and eliminate separate HTTP requests. Base64 encoded images travel as part of the document, reducing network calls and simplifying asset management.
Email Templates
Email clients block external images and treat attachments differently. Base64 inline images display consistently across Gmail, Outlook, and Apple Mail without broken image links.
100% Private
Your image never leaves your browser. The converter runs entirely using FileReader and Canvas APIs — everything stays local. No uploads, no servers, no privacy concerns.
Instant Encoding
No waiting for uploads or processing. Base64 encoding happens in milliseconds on your machine. Copy the result and paste it directly into your code.
このツールの使用方法
Choose Your Input Method
Upload an image file from your device or paste a URL. The upload option handles any image format your browser supports — JPG, PNG, WebP, GIF, SVG. URL mode fetches publicly accessible images from the web, though CORS restrictions may prevent some sources from loading.
Configure Your Output
Decide whether to include the Data URL prefix (the `data:image/png;base64,` part). Most use cases need it, but if you only want the raw encoded string, uncheck that option. Line wrapping at 76 characters is useful for email attachments and MIME standards, but web applications typically omit it.
Copy or Download
Click convert and the Base64 string appears instantly. Copy it directly or download as a text file for safekeeping. The format buttons give you ready-to-paste HTML img tags, CSS background-image declarations, or Markdown image syntax — all with the Data URL pre-filled.
When to Use Base64 (and When Not To)
Good: Small Icons and UI Elements
Favicons, social media icons, status indicators — anything under 10KB is a solid candidate. The Base64 string fits comfortably inline and saves an HTTP request. You avoid the waterfall delay where the browser waits for the CSS file, then waits again for each background image.
Good: Email Templates and Newsletters
Email clients are aggressive about blocking external images. Base64 images render reliably because they're part of the message body, not separate resources. This is why you see logo images that actually display in promotional emails instead of showing as broken links.
Avoid: Large Photos and Background Images
Base64 エンコードにより、ファイル サイズが約 33% 増加します。 100 KB の写真は 133 KB の文字列になります。これはブラウザーの解析オーバーヘッドが発生する前です。小規模なアセット以外の場合は、外部画像ファイルの方が効率的です。これらは個別にキャッシュされ、gzip 圧縮で転送され、HTML や CSS が肥大化しません。
Avoid: Images That Change Frequently
User avatars, dynamically generated content, or anything that updates per user should stay as external URLs. Base64 strings are hard to cache granularly — changing the image means redeploying the entire HTML file. External images let you update assets independently and leverage CDN caching.
よくある質問
このツールは私の画像をどこかにアップロードしますか?
いいえ。すべては FileReader と Canvas API を使用してブラウザ内で行われます。画像はローカルで処理され、コンピューターから離れることはありません。そのため、ページが読み込まれた後はオフラインで動作します。
データ URL と生の Base64 の違いは何ですか?
データ URL には、「data:image/png;base64」のようなプレフィックスと、それに続くエンコードされた文字列が含まれます。これにより、ブラウザにデータ型とエンコーディングが伝えられます。 Raw Base64 は、プレフィックスのないエンコードされた文字だけです。 Web 開発にはデータ URL を使用します。文字列のみを必要とするシステムには生の Base64 を使用します。
なぜ行折り返しを使用するのでしょうか?
76 文字での行折り返しは、電子メールの添付ファイルおよび一部のレガシー システムの MIME 標準です。最近の Web アプリケーションではこれは必要ありません。実際、ラップされていない文字列はわずかに小さくなります。電子メール テンプレートに画像を埋め込む場合、またはそれを必要とするシステムを操作する場合にのみ、ラッピングを有効にします。
任意の Web サイトから URL を貼り付けることができますか?
サーバーがクロスオリジンリクエストを許可する場合のみ。多くの Web サイトはホットリンクをブロックし、CORS ヘッダーを送信しないため、ブラウザーは画像データを読み取ることができません。 URL モードが失敗した場合は、画像をダウンロードし、代わりにアップロード オプションを使用してみてください。
どれくらいの大きさの画像を変換できますか?
技術的には、ブラウザは非常に大きな画像を処理できますが、Base64 文字列は 33% 増加して扱いにくくなります。 5 MB の画像は 6.7 MB のテキスト文字列に変換されます。これは数百万文字に相当します。実際的な目的のために、画像は 500 KB 未満に抑えてください。大きな写真と背景は外部画像ファイルとして保持する必要があります。
Base64 エンコードはアニメーション GIF で機能しますか?
Yes. The encoder preserves the entire file, including all frames and timing data. When you embed the Data URL in an `` tag, the animation plays just like the original GIF. The same goes for PNG transparency and WebP features — nothing is lost in the encoding process.
Frequently Asked Questions
Base64エンコーディングは何に使われますか？
Base64エンコーディングはバイナリ画像データをテキスト形式に変換し、HTML、CSS、JavaScriptに直接埋め込めるようにします。小さなアイコンをCSSに埋め込む、単一ファイルHTMLページのデータURIを作成する、データベースにテキストとして保存する、Base64入力を受け付けるAPIとの連携などに使用されます。
Base64出力は元のファイルよりどれくらい大きくなりますか？
Base64エンコーディングは元のバイナリファイルより約33%ファイルサイズが増加します。小さな画像（10KB未満）では、このオーバーヘッドは埋め込みの利便性に対して許容範囲です。大きな画像ではBase64は非効率です。20KBを超えるファイルはURL経由の読み込みが適しています。
複数の画像を一度にBase64に変換できますか？
はい、複数の画像をアップロードすると、それぞれが独立してBase64に変換されます。すべての結果にコピーボタンが表示されます。単一プロジェクトの複数のアイコンやアセットにBase64文字列が必要な場合に特に便利です。
Base64出力のフォーマットは？
出力にはデータURIプレフィックス（例：'data:image/png;base64,...'）が含まれているため、文字列はHTML src属性、CSS background-imageプロパティ、JavaScript Imageオブジェクトで即座に使用できます。そのまま貼り付けるだけでフォーマット不要です。