Keyword Search

  • 文字数カウントチェッカー

Tools

Text Tools

データ変換 | 開発者向け

このページはプロモーションが含まれています。

この記事のURLをコピー
Base64エンコード・デコードツール

Base64エンコード・デコードツール

テキスト・画像・SVGファイルをBase64エンコード／デコードできる無料ツールです。画像やSVGはドラッグ＆ドロップでData URIに変換し、HTML・CSS用のコードをそのままコピーできます。入力データはサーバーに送信されず、ブラウザ内で完結して処理されます。
0
入力文字数
0
出力文字数
※入力データ・ファイルはサーバーに送信されません。ブラウザ内で完結して処理されます。


Base64エンコード・デコードツール（画像/SVG対応）
目 次

Base64エンコード・デコードツールとは？

Base64は、テキストやバイナリデータを英数字と一部の記号だけで表現するエンコード方式です。本ツールはテキストのBase64変換に加え、画像・SVGファイルをドラッグ＆ドロップするだけでData URI形式に変換し、そのままHTML・CSSに埋め込めるコードを生成できます。フロントエンド開発・コーディング作業で「画像をCSSに直接埋め込みたい」というニーズに特化したツールです。

各機能の説明

  • テキストのエンコード・デコード
    テキストをBase64に変換、またはBase64文字列を元のテキストに復元。リアルタイムで結果を表示します
  • 文字コード選択（デコード時のみ）
    デコード時にUTF-8とShift_JISを切り替え可能。Shift_JIS環境から出力されたBase64文字列を正しく復元できます
  • 画像・SVGのドラッグ＆ドロップ変換
    画像やSVGファイルをドロップするだけでBase64（Data URI）形式に変換します
  • HTML/CSSコード自動生成
    変換結果をimgタグ用のHTML、background-image用のCSSとしてワンクリックでコピーできます
  • SVG軽量化オプション
    SVGファイルのコメントや余分な改行を除去してからBase64化し、コード量を削減します
  • 文字数表示
    入力・出力のテキスト量をリアルタイムで確認できます

対応形式・出力コードについて

  • 対応ファイル形式
    JPEG・PNG・GIF・WebP・SVGに対応しています。一般的な画像形式であれば変換可能です
  • Data URI形式
    「data:image/png;base64,〜」のような、ファイルを直接埋め込める文字列を生成します
  • HTML出力
    <img src=”data:…” alt=”” /> の形式で、そのままHTMLに貼り付け可能なコードを出力します
  • CSS出力
    background-image: url(data:…); の形式で、CSSにそのまま記述できるコードを出力します
  • ファイルサイズの目安
    Data URI化するとファイルサイズが約1.37倍になります。数十KB程度の小さい画像・アイコン・SVGでの利用がおすすめです

こんなときに使う

  • アイコン・小さな画像のCSS埋め込み
    HTTPリクエストを減らしたい小さなアイコンをCSSに直接埋め込みたいときに
  • SVGのインライン化
    SVGファイルをCSSの背景画像として使いたい場合のコード生成に
  • API・JSON連携
    画像データをJSON等のテキスト形式でやり取りする際のBase64変換に
  • メール・HTMLテンプレート
    外部画像を読み込めない環境向けに、画像を直接埋め込みたい場合に
  • 古いシステムとのデータ連携
    Shift_JIS環境から渡されたBase64文字列を、デコードして元のテキストを確認したい場合に

よくある質問

  • Q

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

    A

    Base64エンコードすると、元のデータより約1.37倍（約33%増）のサイズになります。そのため、Data URIとしての利用は数十KB程度の小さな画像・アイコン・SVGに向いています。大きな画像をBase64化すると、かえってページの読み込みが遅くなる場合があります。

  • Q

    アップロードした画像やテキストはサーバーに送信されますか？

    A

    送信されません。テキスト変換・画像変換のいずれも、すべての処理はブラウザ内のJavaScriptで完結します。機密性の高いファイルやテキストでも安心してご利用いただけます。

  • Q

    UTF-8とShift_JISはどちらを選べばよいですか？

    A

    文字コードの選択は「デコード」時のみ表示されます。エンコードは常にUTF-8で行われます（Webサイト・システム制作では現在ほとんどの場合UTF-8が使われているため）。Shift_JIS環境から出力されたBase64文字列をデコードして元のテキストを確認したい場合は、デコードに切り替えたうえでShift_JISを選択してください。

  • Q

    SVGの「軽量化」オプションは何をしていますか？

    A

    SVGファイル内のコメントや、表示に影響しない余分な改行・空白を取り除いてからBase64化します。これによりData URIの文字数を削減できます。複雑なSVGの場合、効果が小さいこともあります。

  • Q

    対応しているファイル形式を教えてください。

    A

    JPEG・PNG・GIF・WebP・SVGに対応しています。それ以外の画像形式や動画ファイルなどは変換対象外です。