ホームページ > バックエンド開発 > PHPチュートリアル > 外部リンクを使用せずに PNG 画像を HTML ページに直接埋め込む方法

外部リンクを使用せずに PNG 画像を HTML ページに直接埋め込む方法

Barbara Streisand
リリース: 2024-10-31 16:59:02
オリジナル
512 人が閲覧しました

How to Embed PNG Images Directly into HTML Pages Without External Links?

HTML ページへの PNG 画像の埋め込み

デジタル領域では、画像はユーザー エクスペリエンスを向上させ、視覚的な情報を伝える上で重要な役割を果たします。 Web 開発者が直面する一般的な質問の 1 つは、外部にリンクせずに、ポータブル ネットワーク グラフィックス (PNG) 画像を HTML ページに直接埋め込む方法です。

Base64 エンコーディングによる画像の埋め込み

PNG 画像を HTML に埋め込むには、Base64 エンコーディングを利用できます。このプロセスでは、バイナリ画像データを HTML コードに埋め込むことができる文字列に変換します。

いくつかのオンライン Base64 エンコーダがこのタスクを支援します。推奨ツールの 1 つは http://www.greywyvern.com/code/php/binary2base64 にあります。

画像をエンコードした後、次の 2 つの方法のいずれかを使用して画像を埋め込むことができます。

1. CSS の Background-Image プロパティの使用:

div 要素を作成し、そのbackground-image プロパティを Base64 でエンコードされた文字列に設定します。例:

<code class="css">div.image {
  width: 100px;
  height: 100px;
  background-image: url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}</code>
ログイン後にコピー

2. を使用するタグ:

または、 を使用することもできます。タグを使用して画像を直接埋め込みます。 src 属性は、エンコードされた文字列を値として受け取ります。例:

<code class="html"><img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" /></code>
ログイン後にコピー

これらのメソッドを使用すると、PNG 画像を HTML ページに埋め込むことができ、外部ファイル参照なしで画像を表示できるようになります。

以上が外部リンクを使用せずに PNG 画像を HTML ページに直接埋め込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート