0

小さな画面には、美しいカリブ海の夕日の大きな 2000px 幅の .jpg ストック画像は必要ないことを知っています。具体的: 優れたユーザー エクスペリエンスの限界は、Nokia の電話と帯域幅によって決まります。ロード時間についてです。

一部の人々は、小さい画面サイズに別の小さい画像を提供したいと考えています。彼らは別のリソース (<picture>要素ごとなど) を提供したいと考えていますが、ユーザーに提供したいのは 1 つの画像だけであることを知っているので、私はこれを望んでいません。

私はそれ<img>が欲しいのですが、ブラウザがファイルを最適に表示するために必要なだけファイルをダウンロードすることを望んでいます。スタイルシートを介してトリミングとスケーリングをアートディレクションしたいと考えています。

ブラウザーが必要に応じて画像リソースをダウンロードして表示することを奨励する必要がありますか?それとも、ブラウザーのスニッフィングを行い、Photoshop で画像を複製してトリミングする必要がありますか?

4

2 に答える 2

1

あなたが達成したいことの詳細に応じて、ここにあなたのために働く可能性のあるものがあります.

メディア クエリを使用して、さまざまなビューポートでさまざまな背景画像を配信することから始めます。 

CSS  
body{
background-image:url('desktop.jpg');
}  

@media (min-width: 768px) and (max-width: 979px) {
body{
background-image:url('tablet.jpg');
}  
}  

@media (max-width: 768px) {
body{
background-image:url('smartphone.jpg');
}    
}

次に、 http ://css-tricks.com/perfect-full-page-background-image/など、ページ全体の背景画像テクニックを使用して結果を微調整します

幸運を！

于 2013-08-02T11:59:51.410 に答える