0

WordPress テーマを作成し、画像を HTML ドキュメントと CSS ファイルに埋め込んで提供できる機能を実装しました。

つまり、Web サイトに画像を次のように追加するのではなく、

<!-- In HMTL -->
<img src="http://www.some-url.ext/img/my_image.jpg" />

/* In CSS */
selector
{
    background-image: url(http://www.some-url.ext/img/my_image.jpg);
}

次の形式でサイトに画像を追加するには:

<!-- In HMTL -->
<img src="data:image/gif;base64,R0lG...." />

/* In CSS */
selector
{
    background-image: url(data:image/gif;base64,R0lG....);
}

処理された画像は、パフォーマンスを向上させるためにキャッシュ ファイルに保存されます。

私の現在のテーマには、大きな画像を含む全幅のスライダーもあります。

問題は、画像が埋め込まれているため、処理されたドキュメントのサイズが 1.83MB になることです。

また、ドキュメントの読み込みは非常に高速ですが、スライドショーの下にあるものは表示が遅くなります:(

では、画像をドキュメントに埋め込んだ方が良いですか、それとも URL で通常の方法を使用する方が良いでしょうか?

4

3 に答える 3

3

答えは、いつものように、「場合による」です。ここにいくつかの興味深い点があります:

  • 画像を埋め込むと、HTTP リクエストの数が減り、ページが高速化されるため、小さなファイルがたくさんある場合に役立ちます。
  • Base 64 でエンコードすると、画像のサイズが約 1/3 増加します。
  • ブラウザは画像をデコードする必要があるため、レンダリングが遅くなる可能性があります。

長所と短所の完全なリストについては、http://en.wikipedia.org/wiki/Data_URI_schemeを参照してください。

大きな画像の場合は、HTTP リクエストをヒットさせたほうがよいでしょう。さまざまなプリロード スキームを使用して、HTTP ヒットがユーザーに表示されないようにすることができます。

PageSpeed、YSlow などはガイドラインであり、福音ではありません。あなたが見つけたように、常に変更をテストしサイトにとって意味のあるものを見つける必要があります.

于 2012-10-17T13:34:24.663 に答える
1

一般に、Data URI の使用は小さな画像 (1 つのスプライトに結合された複数のアイコンなど) にのみ意味があります。大きな画像は別のファイルとして提供する必要があります。

于 2012-10-17T13:28:35.870 に答える
1

ここでの暗黙の基準は効率だと思います。キャッシュの理由から、各画像をキャッシュできるため、通常、画像は個別に提供する必要があります。そうしないと、画像データを含むドキュメント全体しかキャッシュできず、非常に安定したドキュメントであり、画像がこのドキュメントでのみ使用されている場合を除き、かなり非効率的になります。

キャッシュに関する一般的な情報については、http://www.mnot.net/cache_docs/を確認してください。通常、適切なキャッシュ フレンドリ サーバー側 (多くの場合、デフォルトでオン) により、イメージは頻繁に変更されないため、イメージが適切にキャッシュ可能になります。

于 2012-10-17T13:38:19.007 に答える