3

私はこれを可能な限り要約しようとします。私は次のようなWebアプリケーションを開発しています。

  • デスクトップとiPhone（Retinaディスプレイ）に重点を置いたレスポンシブ
  • 最新のすべてのブラウザに加えて、ie8およびie9をサポート
  • サーバー効率の良い意味：スプライト内のJSとアイコンをできるだけ少なくする

ターゲティングデバイスの幅/高さvsターゲティングピクセル比：

条件付きCSSの場合、特定のプラットフォームやデバイス用に異なるレイアウトを作成したり、safariユーザーエージェントを使用したりする代わりに、ピクセル比をターゲットにすることにしました。だから私は@media (-webkit-min-device-pixel-ratio: 2)プラスすべてのレスポンシブスタイルを使用しています。

今、私は画像の扱い方を決めようとしています。

背景ごとに2つの画像と背景付きの1つの画像-サイズ変更

サーバーリクエストをできるだけ少なくしたいので、個別のpngの代わりにスプライト（4つまたは5つの「ステンシル」）を使用しています（SVGの議論は別のものです！）。しかし、私のユーザーの大部分であるIE8ではサポートされていないため、 jquery.backgroundSize.jsBackground-sizeのようなJSフォールバックが必要です。

それで：

スプライト、条件付き背景サイズ、およびIE8のJSフォールバックの組み合わせは、パフォーマンスと優れた実践の観点から、最良のオプションですか？

この特定の（今日ではまだ非常に一般的な）シナリオで他の質問は見つかりませんでした。ディスカッションの質問を意図したものではありません。Retinaディスプレイ、スプライト、IE、JSなど、状況に対処する方法について実際に合意があるかどうかを知りたいと思っています。

4

2 に答える 2

1

条件付きbackground-sizeは、推奨されるオプションではありません。このプロパティを使用して、「通常の」ピクセル比率のクライアントに高解像度スプライトを使用することを選択した場合、事前にレンダリングされた画像よりも画質が低下し、クライアントがグラフィックをスケーリングするための追加の計算オーバーヘッドが発生します。必要なスプライトの最大 4 倍を転送します。また、IE8 JS フォールバックによってbackground-sizeコンテンツのちらつきが発生する可能性があります (シナリオで許容できるかどうかにかかわらず)。

ピクセル比ごとに事前にレンダリングされたバージョンを使用します（したがって、実際には2倍の画像ファイルになります）。これまで以上に高品質のグラフィックスをユーザーに提供background-sizeできます。スプライトを手動で作成する場合 (スプライトを生成し、自動化されたツールで css を付随させるのではなく)、メンテナンスのオーバーヘッドが発生しますが、ソリューションは全体的に望ましいものです。

  1. css ファイルの高 dpi バージョンを作成します (例: main-highdpi.cssと条件付きで似ていない適切なメディアクエリでそれを含めます<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="main-highdpi.css" />

  2. 依存するスプライトの高解像度バージョンを作成し、css スプライト参照を更新します。推奨される命名規則がまだ合意されているとは思えません (リソース名の後にmain.png と main@2x.png@2xを付けるのが一般的なようです) 。

  3. 利益！

ラスター イメージのレンダリング品質が高く ( でスケーリングするのとは対照的にbackground-size)、互換性の問題がなく、クライアント側のレンダリングが高速であるため、このようなアプローチをお勧めします。欠点は、より大きな画像ファイルを転送することです。これは、高解像度の画像をクライアント デバイスに取得するのに許容できる価格です (いずれにせよ、スプライトはキャッシュされます)。少なくとも、この記事で示唆されているように、両方のコピーを要求することはありません。

個々のデバイスの制限 (画像のサイズや寸法など) に注意してください。

于 2012-08-06T00:38:06.777 に答える
0

私のウェブサイトは主にコンテンツであり、いくつかの非常に基本的なスクリプトを使用しているため、ページの読み込み時間に大きな影響を与える外部スクリプト (jquery など) を避けて、すべての JavaScript をページに埋め込むことにしました。

また、デフォルトとして高解像度の画像を優先することにしました。デフォルトが間違った画像である場合、一部は 2 回ダウンロードされます。モバイル デバイスでは帯域幅が最も重要であるため、高解像度をデフォルトにし、低解像度は後で有効にする必要があります。

また、率直に言って、ほとんどの訪問者は違いに気付かないため、すべての状況で最適な画像を選択するよりもシンプルさを好みました。間違った人が現れても大惨事ではありません。

srcsetそして最後に、まだ実装されていませんが、この問題に対する長期的な解決策と思われる新しいドラフト標準を使用することを望みました。

srcそこで、高解像度srcset用と低解像度用のイメージ タグを使用します。

<img src="foo.png" srcset="foo-low.png 1x" width="42" height="42">

次に、javascript を使用して、すべてのイメージ タグを処理します。</body>ページの読み込み速度を向上させるために、イベントではなく直前にインライン JavaScript を選択domreadyしました。この場合、ミリ秒単位で、ブラウザに正しい画像 URL をできるだけ早く認識してもらいたいと考えています。

    <script type="text/javascript">
      function swapRetinaImagesOut() {
        // skip anything with a "retina" screen
        if (window.devicePixelRatio > 1)
          return;

        // check if the browser appears to support the "srcset" attribute
        if (typeof(document.createElement('img').srcset) != "undefined")
          return;

        // find all images with an "srcset" property, and swap them
        var imageEls = document.getElementsByTagName('img');
        for (var i = 0; i < imageEls.length; i++) {
          var imageEl = imageEls[i];
          var srcset = imageEl.getAttribute('srcset');
          if (!srcset)
            continue;

          imageEl.src = srcset.match(/^[^ ]+/)[0];
        }
      }

      swapRetinaImagesOut();
    </script>
  </body>
</html>

シンプルですが効果的です。誰もが貢献できる改善を楽しみにしています。

于 2013-09-30T15:34:24.200 に答える