srcまたはcss背景画像のurl値はbase64でエンコードされたコードです

ウェブ上の一部の画像の src または CSS 背景画像 URL の後に、data:image/png;base64、iVBORw0KGgoAAAANSUhEUgnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/KuVgz5BDCSZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D などの長い文字列が続くことにお気づきかもしれません。それでこれは何ですか？これはデータ URI スキームです。

Data URI スキームは RFC2397 で定義されています。その目的は、外部ファイルから読み込むことなく、小さなデータを Web ページに直接埋め込むことです。たとえば、上の文字列は実際には小さな画像です。これらの文字をコピーして Firefox のアドレスバーに貼り付けてアクセスすると、1X36 の白とグレーの png 画像が表示されます。

上記のデータ URI において、data はデータを取得するためのプロトコル名、image/png はデータ型名、base64 はデータのエンコード方式、カンマの後のデータは image/png ファイルの base64 エンコードされたデータを表します。

現在、データ URI スキームは次のタイプをサポートしています。
データ: テキストデータ
データ:text/plain、テキストデータ
データ:text/html、HTML コード
data:text/html;base64、base64 でエンコードされた HTML コード
データ:text/css、CSS コード
data:text/css;base64、base64 でエンコードされた CSS コード
データ:text/javascript、Javascript コード
data:text/javascript;base64、base64 でエンコードされた Javascript コード
data:image/gif;base64、base64 でエンコードされた gif 画像データ
data:image/png;base64、base64 でエンコードされた png 画像データ
data:image/jpeg;base64、base64 でエンコードされた jpeg 画像データ
data:image/x-icon;base64、base64 でエンコードされたアイコン画像データ

簡単に言うと、base64 は 8 ビットデータを標準の ASCII 文字に変換します。インターネット上には無料の base64 エンコードおよびデコードツールが多数あります。PHP では、base64_encode() 関数を使用してエンコードできます (例: echo base64_encode(file_get_contents('wg.png'));)。
現在、IE8、Firfox、Chrome、Opera ブラウザはすべて、このタイプの小さなファイルの埋め込みをサポートしています。

写真の例を見てみましょう:

Web ページ上の画像は次のように表示できます。
<img src="upload/2022/web/wg.png"/>
次のように表示することもできます。

コードをコピー

コードは次のとおりです。

画像ファイルの内容を HTML ファイルに直接書き込みます。この利点は、HTTP リクエストを節約できることです。欠点は、ブラウザがそのような画像をキャッシュしないことです。実際の状況に応じて自由に選択できます。

<<: ウェブページ内のFlash SWFファイルを変更する方法

>>: 指定された期間内のすべての日付または月を取得する MySQL ステートメント (ストアドプロシージャの設定やテーブルの追加は不要)