画像 → Base64変換

上部のボックスに画像をドロップするか、クリックして選択・クリップボードから貼り付け・URLから読み込んでください。ツールが即座に画像をBase64文字列に変換し、CSS・HTML・MarkdownとしてコピーできるデータURIを表示します。すべてブラウザ内で処理されるため、画像はサーバーにアップロードされることはなく、プライベートな画像や機密性の高い画像も安全に変換できます。

「Base64 → 画像」タブに切り替えて、データURI（data:image/png;base64,…）または生のBase64文字列を貼り付けてください。ツールがデコードして画像をプレビューし、ファイルとしてダウンロードできます。フォーマットは自動検出されるため、PNG・JPG・SVG・WebP・GIFすべてに対応しています。デコードはブラウザ内で完全に行われ、サーバーへのリクエストは発生せず、Base64文字列がどこかに送信されることもありません。

Base64データURIをimgタグのsrc属性に使用します。src="data:image/png;base64,…"のようにエンコード済みの文字列を貼り付けてください。上部の「<img>をコピー」ボタンをクリックすると、別ファイルへのリクエストが不要な完全なimgタグをすぐに貼り付け形式で取得できます。メール・単一ファイルのページ・インラインアイコンに最適です。余分なHTTPラウンドトリップが省略され、元の画像ファイルが存在しない場合でも動作します。

url()の中にデータURIを記述します。例えばbackground-image: url("data:image/png;base64,…")のようにします。上部の「CSSをコピー」ボタンで完全なbackground-imageルールを取得できます。小さな背景やアイコンをこの方法でインライン化するとHTTPリクエストを1回省略でき、デザインシステムのアイコン・ローディングスピナー・変更頻度の低い装飾的な要素によく使われます。単一ファイルのHTMLデモを完全に自己完結させることにも役立ちます。

ブラウザではFileReader APIを使います。const reader = new FileReader(); reader.onload = () => console.log(reader.result); reader.readAsDataURL(file)と記述すると、reader.resultに完全なdata:image/...;base64 URIが格納されます。ReactやNext.jsではuseEffect内またはinput要素のonChangeハンドラ内でこれを呼び出してください。このコンバーターはまさにそのアプローチを使用しており、完全にクライアントサイドで動作します。ローカルサーバーを立ち上げなくても、自分のJavaScript実装の出力をすぐに確認できます。

ファイルをバイナリモードで開いてエンコードします。import base64; data = base64.b64encode(open('image.png', 'rb').read()).decode(); uri = f'data:image/png;base64,{data}'と記述してください。PIL/Pillowを使う場合は、まず画像をBytesIOバッファに保存してから、そのバッファのバイト列をbase64エンコードします。このオンラインツールを使えば、本番コードに埋め込む前にPythonの出力が期待通りかどうか確認できます。

データURIは、画像のバイトデータをHTML・CSS・JSON・メールにテキストとして直接埋め込み、別のHTTPリクエストを発生させずにドキュメントと一緒に読み込めるようにします。小さなアイコン・HTMLメール内のロゴ・単一ファイルのデモ・データベースや設定ファイルへの小さな画像の保存に最適です。また、同一ページ上のキャンバス操作で画像を読み込む際のCORS制限を回避するためにも開発者に利用されています。ファビコンは最初の読み込み時の余分なネットワークラウンドトリップをなくすため、HTMLのheadにデータURIとして埋め込まれることが多いです。

通常はおすすめしません。Base64エンコードによりデータは元のバイナリより約33%大きくなり、インライン化された画像はブラウザが個別にキャッシュできず、loading="lazy"による遅延読み込みも適用できません。Base64はファビコン・小さなロゴ・約10KB以下のアイコンスプライトなど、小さくて変更頻度の低いアセットに限定して使用してください。大きな写真・ヒーロー画像・多くのページで再利用されるアセットは、適切なHTTPキャッシングヘッダーを付けた通常の画像ファイルとして提供するほうが適切です。

はい、完全に安全です。エンコードとデコードはFileReader APIとCanvas APIを使ってブラウザ内でのみ実行されます。画像データはデバイスの外に出ることなく、サーバーに送信されることも一切ありません。これは<strong>base64.guru</strong>や<strong>base64encoder.io</strong>のような、処理のために画像をサーバーにアップロードするツールと比べた場合の重要なプライバシー上の優位点です。UtiloKitでは、プライベートな画像・機密画像・未公開の画像は変換中もずっとあなたのマシン上に留まります。ページ読み込み後にインターネットを切断しても正常に動作します。

エンコードはブラウザが読み取れるあらゆるフォーマットに対応しています。PNG・JPEG/JPG・SVG・WebP・GIF・AVIF・BMP・ICOが含まれます。デコードはすべての標準的なdata:image/* MIMEタイプをサポートし、ダウンロード前に結果をプレビューできます。SVGファイルは特別な処理があり、Base64の代わりにURLエンコードを使ってurl('data:image/svg+xml,…')の形式でCSSに直接埋め込むことも可能ですが、Base64のほうが汎用性が高く、すべてのブラウザとメールクライアントで動作します。

はい。「Markdownをコピー」ボタンで形式を取得でき、「&lt;img&gt;をコピー」でHTMLメール用の記述が得られます。ただし、一部のメールクライアント（特にOutlookやGmailのモバイルアプリ）はBase64画像を除去またはブロックする場合があるため、広いユーザーに送信する前に必ずテストしてください。メールマガジンのキャンペーンでは、CDNで画像をホスティングしてリンクする方が安全です。個人宛のトランザクションメールでは、Base64はほとんどのクライアントで確実に動作します。

base64.guruとbase64encoder.ioはどちらも画像をサーバーサイドで処理します。つまり、ファイルが相手のインフラにアップロードされます。UtiloKitの画像→Base64コンバーターは100%ブラウザ内で動作し、アップロードなし・サーバーなし・データの保存もありません。またUtiloKitは、CSS・HTML・Markdownのスニペットをすぐ貼り付けられる形で提供し、双方向変換（エンコードとデコード）をサポートし、ページ読み込み後はオフラインでも動作します。ファイルサイズや変換回数の制限もなく、完全無料です。

完全無料で、会員登録不要・透かし（ウォーターマーク）なし・ファイルサイズや画像枚数の制限もありません。無料ユーザーに変換回数の制限を設け、一定サイズ以上のファイルには有料プランを要求するbrowserling.comとは異なり、UtiloKitには制限がありません。クライアントサイドで動作するため、画像ごとの課金や帯域幅コストも発生しません。ブラウザのメモリが許す限り、何枚でも何度でも変換できます。

はい。このツールは完全にレスポンシブ対応しており、iPhoneのSafari・AndroidのChromeを含むすべてのモバイルブラウザで動作します。カメラロールやファイルアプリから画像を選択したり、URLを貼り付けてリモート画像を読み込んだりすることが可能です。出力はクリップボードにコピーされるため、Notion・コードエディタ・他のアプリにそのまま貼り付けられます。アプリのダウンロードは不要です。モバイルブラウザでページを開けば、デスクトップ版とまったく同じように動作します。