画像プレビューと情報
生のBase64文字列
Base64-encoded data (no prefix)
データURI
Complete data URI (data:image/...;base64,...)
CSS背景
CSS background-image property
HTML画像タグ
Ready-to-use <img> element
任意の画像を即座にBase64エンコード文字列に変換。データURI、CSS背景スニペット、HTML imgタグを取得できます――すべてブラウザ内で処理し、サーバーへのアップロードは一切不要です。
Base64エンコードは全体の一部に過ぎません。OneStepToRankは、ローカル検索結果で上位を獲得するための完全なツールスイートと最適化インテリジェンスを提供します。
無料で始めるBase64エンコードは、64文字の印字可能文字を使用してバイナリデータをプレーンなASCIIテキストに変換する方法です。画像に適用すると、画像ファイル全体を表すテキスト文字列が得られます。この文字列は、HTMLでは<img>タグのsrc属性に、CSSではbackground-imageプロパティに、またはAPI通信のJSONペイロードに直接埋め込むことができます。エンコードはA-Z、a-z、0-9、+、/の文字を使用し、=をパディングとして使用します。バイナリデータ3バイトごとにBase64出力4文字が生成され、エンコード結果は元ファイルより約33%大きくなります。
data URI（Uniform Resource Identifier）は、構文 data:[mediatype];base64,[data] を使用してファイル内容をURL自体に直接埋め込みます。画像の場合、サーバー上に別ファイルを用意せずにHTMLやCSS内に画像全体を含めることができます。これによりHTTPリクエストが削減され、アイコンやロゴ、UIスプライトなどの小さな画像に有利です。デメリットは、data URIがHTMLやCSS文書のサイズを増加させ、ブラウザが個別にキャッシュできず、元のバイナリより約3分の1大きくなることです。目安として、5〜10KB未満の画像はインライン埋め込みに適していますが、これ以上のサイズは適切なキャッシュヘッダーを設定した別ファイルとして提供する方が全体的なパフォーマンスが向上します。
HTTPリクエストを削減することで初期ページ描画が高速化される一方で、サイズの大きい画像をBase64文字列として埋め込むといくつかの欠点があります。HTMLやCSSファイルが大幅に肥大化し、初回のドキュメントダウンロードが遅延します。ブラウザは画像を包含文書とは別にキャッシュできません。また、33%のサイズオーバーヘッドにより、バイナリファイルを直接配信する場合と比べて転送データが増加します。クリティカルなレンダリングパスでは、小さなインライン画像がレンダリングブロックリクエストを回避し、実感的なロード時間を短縮できます。しかし、コンテンツ画像やヒーローバナー、数キロバイト以上の画像は、CDNキャッシュとWebPやAVIFといった最新フォーマットで最適化されたバイナリファイルを配信した方がパフォーマンスが向上します。Base64エンコードは、リクエスト数削減の恩恵を受ける小さく頻繁に使用されるアセットに対して戦略的に活用してください。