2

Retina 写真を 2 倍のピクセル密度のデバイスに提供するためのスクリプトをいくつか見つけました。

  • Retina.js — インライン画像ではなく背景を表示するようです:@2xファイル名を探します。
  • Retinise.js — を使用していますdata-src、それは何ですか? ブラウザのサポートはどうですか?
  • 自動条件付き Retina イメージ— .htaccessmod_rewriteと単純な JS を使用します。

(ここでは、CSS の背景画像を無視しています。写真である要素だけに関心がありimgます。SVG として提供しようとしているグラフィックスは無視しています。)

私は、Retina イメージをサポートするデバイスがフル機能を利用できるようにし、低帯域幅 (つまり、小さな画面) のデバイスはサポートしないようにしたいと考えています (両方をダウンロードする必要がないように)。

モバイル ファーストのセマンティック アプローチのベスト プラクティスに従っているソリューションはどれですか?

レスポンシブ画像にはまだ全会一致の最善の解決策がないようです (帯域幅などに関して)。これを Retina 画像と組み合わせると、さらに複雑になります...

Retinise.js のドキュメントではdata-src、 を使用しているため、必要な画像のみがダウンロードされることが暗示されているように思われるため、質問しsrcています。

4

3 に答える 3

4

私はretinise.jsを作成しました。これは、多くの網膜ソリューションが実際に両方の画像を提供するため、ユーザーが大量の帯域幅を使用することを意味します。カスタムデータ属性を使用すると、ブラウザーが元の画像をダウンロードするのを停止できます。

ただし、プラグインはユーザーの接続タイプを考慮していません。たとえば、3gとWiFiは、プラグインを変更して含めることができる単純な速度テストを実行する以外に、現在これを検出する方法がないためです。

私は今作成したいくつかのサイトでプロジェクトを使用しましたが、すべて良い結果が得られました:)

古いブラウザのサポートについては、data-srcがsrc属性に置き換えられているため、JSが有効になっている限り機能します。

JS以外のブラウザをサポートするには、ドキュメントで説明されているように、noscriptタグを使用できます。

于 2013-01-07T08:48:11.103 に答える
2

レスポンシブ画像に最適な解決策がないかどうかはわかりませんが、max-width:100%私にとっては常に十分に機能しています。

data-属性は HTML5 の新機能であり、属性を悪用することなく要素にカスタム データを追加できrelます。data-Bootstrap は、jQuery Mobile と同様に、属性を多用します。

はい、Retina.js は両方のサイズの画像をデバイスに提供している (または少なくとも使用していた) と思いますが、表示されるのは 1 つだけです。Retinise がそれを克服した場合、それは大きなメリットだったと言えます。

于 2012-11-27T14:46:27.803 に答える