3

私は、美しく高品質の写真をブラウザー ウィンドウにフルサイズで表示することに依存するポートフォリオ サイトを構築しています。

CSS3 の background-size: cover タグと、高解像度のデバイス用に高解像度の画像に置き換えることができるこの小さなスニペットを組み合わせて使用​​しています。

http://www.bdoran.co.uk/2012/08/28/detecting-and-delivering-images-to-retina-displays/

その記事によると、1 倍、1.5 倍、2 倍の少なくとも 3 つのバージョンの画像が必要ですが、これらは完全に巨大になる可能性があります。

大きな画面で十分に拡大縮小できますが、巨大なファイルサイズとダウンロード時間を持たない画像の最適なサイズはありますか?

ユーザーがページに滞在する時間が長くなるにつれて、品質を徐々に向上させることを検討する必要がありますか? 低品質/解像度の画像が最初に読み込まれてから、より高い画像に置き換えられますか?

4

1 に答える 1

1

このブラウザの統計によると、 1800 x 1080 が妥当なサイズのように思えます。ターゲット ユーザーがより大きな画面を使用している可能性があるため、可能であればそれを確認する必要があります。

あなたが説明したように、私はプログレッシブエンハンスメントをしません。すべてのユーザーは、イメージを 3 回ダウンロードする必要があります。

代わりに、ここに示すように、メディア クエリを使用してユーザーの画面サイズを確認できます。そのため、ユーザーは自分向けのものだけをダウンロードしています。

編集：これも興味深いアプローチです。

于 2013-05-27T20:33:09.533 に答える