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 に答える