web-dev-qa-db-ja.com

<a href="data; ...">を使用して画像を表示しても安全ですか？

別の画像ファイルにリンクする代わりに、このようにHTMLページに画像を埋め込むことができることを学びました。

<a href="data:image/png;base64,...(blah blah base64-encoded png goes here)..."
  width="70" height="38" alt="image embedded using base64 encoding!"></a>

PNG/JPGのような一般的な形式に固執している限り、すべての最新のブラウザで画像を表示できるように、これは「安全」ですか？画像のbase64エンコード以外に、画像サイズが少し大きくなるという欠点はありますか？

ありがとう。

htmlimagebase64
13
Colen

はい、これは安全です-すべての主要なブラウザは データURIスキーム をサポートしています。

1つの欠点は、ページで同じ画像を何度も使用すると、1回ダウンロードするのではなく、数回エンコードされることです。

もう1つは、一部のブラウザーによって課せられるサイズ制限です（IE 8では最大32kしか使用できません）。

これをCSSで使用して、ダウンロードの問題を軽減することもできます。

17
Oded

最新のブラウザはすべて、これらのタイプの画像を表示できるはずです。検証はしていませんが、この機能はしばらく前から存在しており、おそらく広くサポートされています。

しかし、あなたは欠点も求めました。 1つの欠点は、HTMLマークアップが動的に生成されるため、キャッシュできないことが一般的であるということです。

  • 静的なhtmlページがある場合は、htmlをキャッシュ可能にします。その場合、画像が大きすぎない限り、データURLを使用するとパフォーマンスが向上する可能性があります。
  • これをダイナミックHTML（php、cgi、jsp、shtml、xml、html、xhtml、htm以外のほぼすべて）に含める場合、キャッシュはゼロになるため、画像は毎回ロードする必要があります。初めて。

おそらく関係のないその他の欠点

  • また、一般的な注意点として、base64はファイルをまっすぐにする場合のちょうど1/3倍のスペースを必要とします。そのため、静的なhtmlページであっても、大きな画像の場合は少し劣る可能性があります。ただし、Webサーバーがgzipをサポートしている場合は、画像の処理に3分の1以上かかることはありません。
  • また、静的なhtmlであっても、データURL（画像のインライン化と呼ぶことができます）を使用すると、通常のように画像の前にページ全体が表示されません。しかし、重要ではない小さな画像のページの場合
  • そして最後に、大きな画像がある場合、ブラウザは通常のように複数のダウンロード接続を使用できないため、これを実行することをお勧めします。
  • また、私が考えていなかった@Odedの欠点（および利点）
3
Bryan Field