プレビューとファイル情報
利用シーン別コード
HTML <img> タグ
CSS background-image
Data URI (srcのみ)
Raw Base64 (ヘッダーなし)
Base64文字列を入力
デコード結果
このツールは、画像ファイルと「Base64（テキストデータ）」を相互に変換できる無料のWEBツールです。ブラウザ上で完結するため、特別なソフトのインストールは不要です。
目次
このツールでできること
主な機能
- 画像のエンコード（変換） JPG、PNG、GIF、WEBP形式の画像を、HTMLやCSSですぐに使えるBase64文字列に変換します。
- 画像のデコード（復元） Base64文字列を入力して、元の画像ファイルとしてプレビュー・ダウンロードできます。
- サイズと画質の調整 Base64化するとデータサイズが大きくなるというデメリットを解消するため、変換前に画像のリサイズや画質（圧縮率）の調整が可能です。
- コードのワンクリックコピー
imgタグ用、CSS背景画像用など、用途に合わせた形式でコードをコピーできます。
このツールで取得する情報の基礎知識
Base64（ベース64）とは データを64種類の英数字と記号（A-Z, a-z, 0-9, +, /）のみを使って表現するエンコード方式です。画像などのバイナリデータをテキストデータとして扱えるようになるため、通信環境やプログラム内でのデータ受け渡しが容易になります。
Data URIスキームとは ウェブページ上で、画像などの外部データをHTML文書内に直接埋め込むための記述方法です。このツールで生成される「data:image/…」から始まるコードがこれに該当します。
ファイルサイズについて 一般的に、画像をBase64に変換すると、元のファイルサイズより約1.3倍（約33%増）大きくなります。そのため、巨大な写真をそのまま変換するのではなく、アイコンやロゴ、小さめの画像に使用するのが一般的です。このツールにはファイルサイズを抑えるためのリサイズ機能がついているため、用途に合わせて調整してください。
このツールが役立つときはどんなとき？
主にWeb制作やシステム開発、データ管理の現場で役立ちます。
1. Webサイトの表示速度を上げたいとき（HTTPリクエストの削減）
通常、Webページ上の画像は1枚ごとにサーバーへ読み込み（HTTPリクエスト）が発生します。小さなアイコンや背景画像をBase64化してHTML/CSSに直接埋め込めば、通信回数を減らし、ページの表示速度を改善できる場合があります。
2. 画像をサーバーにアップロードできないとき
HTMLメールの作成や、ブログサービス、掲示板など、画像のアップロードや管理が難しい環境でも、Base64コードであれば「文字」として画像を貼り付けて表示させることができます。
3. プログラムで画像を扱いたいとき
JSONデータとして画像をAPIで送受信する場合や、データベースに画像自体をテキストとして保存したい場合に利用されます。
4. 謎の文字列を画像に戻したいとき（デコード）
受け取ったデータやソースコード内に「data:image…」という長い文字列があり、それがどんな画像かを確認したい場合に、デコード機能を使って瞬時に画像へ復元できます。
Base64変換のメリットとデメリット
利用シーンを判断するために、以下の特性を理解しておくと便利です。
メリット
- 画像ファイルとして管理する必要がなくなる（リンク切れのリスクがない）。
- サーバーへのリクエスト数を減らせる。
- シングルファイルのHTMLを作成できる（オフラインでも画像が表示される）。
デメリット
- データ量が元の画像より増える。
- HTMLやCSSのコードが長くなり、可読性が下がる。
- ブラウザのキャッシュ（一時保存）が効きにくくなる場合がある。
使い方：画像をBase64に変換する（エンコード）
- 画像をアップロード 枠内に画像ファイルをドラッグ＆ドロップするか、クリックしてファイルを選択します。すぐに変換結果が表示されます。
- 必要に応じてリサイズ データサイズを軽くしたい場合は「画像リサイズはこちら」を開き、幅や画質を設定して「リサイズ実行」を押してください。
- コードをコピー 用途に合わせて（HTMLタグ用、CSS用など）コピーボタンを押し、自身のコードに貼り付けてください。
使い方：文字列を画像に戻す（デコード）
- タブを切り替え 画面上部の「デコード」タブをクリックします。
- 文字列を入力 Base64文字列（data:image…など）をテキストエリアに貼り付け、「デコード実行」を押します。
- 画像の確認と保存 画像が復元されます。「画像をダウンロード」ボタンでファイルとして保存可能です。
