0

Retinaディスプレイを搭載したコンピューターのブラウザーで非常にうまく表示される、HTMLの素敵な画像が欲しいです。imgタグに高解像度の画像があればいいのではないかと思います。ただし、低解像度のブラウザはすべて、この大きなファイルをダウンロードしてからダウンスケールする必要があり、フォトショップなどのツールでダウンスケールした場合よりも画像の品質が低下する可能性があります。

私はこのようなことができることを望んでいます：

<img src="/example.png" src-retina="/example-high-res.png"/>

通常のディスプレイ用と網膜ディスプレイ用の2つの異なる画像を表示する適切な方法は何ですか？

4

6 に答える 6

2

CSSを使えば簡単です

画像ソース属性を使用すると、それを行うための標準的な方法が少なくなります。私は自分でJSベースのアプローチを使用してチェックしましたwindow.devicePixelRatio：

<img id="example-img" width="100" height="100"/>
<script>
  if (window.devicePixelRatio > 1) {
    $('#example-img').src = "/example-high-res.png";
  } else {
    $('#example-img').src = "/example.png";
  }
</script>

ただし、可能であれば、CSSとメディアクエリを使用してください。それははるかにきれいです。

于 2012-11-12T19:41:34.483 に答える
1

2つ（またはそれ以上）のCSSファイルを作成し、JSを使用してユーザーのブラウザー設定に応じてそれらを使用する必要があります。モバイルサイトのcssファイルは、携帯電話で完全に表示される新しいレイアウトを作成する必要があります。

このSOの質問をチェックして、トピックをよりよく理解してください。

于 2012-11-12T19:41:22.910 に答える
1

レスポンシブデザインの原則を使用して、デバイスの画面解像度に応じて画像サイズを拡大または縮小します。

CSSでは、ターゲットデバイスのmax-widthとを定義できます。max-heightこれは、CSSで宣言する方法です。

@media only and (max-device-width:1024px) and (orientation:portrait)

その後、親要素に対する要素の幅と高さをパーセンテージで指定する必要があります。これは有効な方法ですが、モバイルデバイスでの帯域幅消費の観点からは最適な方法ではありません。パーセンテージを低く設定しても、画像はネイティブサイズでアップロードされ、ブラウザがCSSドキュメントを解析した後にダウンスケールが実行されるためです。

さまざまなデバイスで画像をどのように処理するかについて、W3Cからいくつかの提案がありますが、一般的に受け入れられ、標準化されているものはありません。

最も好評な提案の1つは、新しいタグ<image>と<source>タグです。これらは異なる画像ソースを受け入れ、画面解像度に応じて最も適切な画像サイズを使用します。

<picture alt="">

  <!-- low-res, default -->
  <source src="small.jpg">

  <!-- med-res -->
  <source src="medium.jpg" media="(min-width: 400px)">

  <!-- high-res -->
  <source src="large.jpg" media="(min-width: 800px)">

  <!-- Fallback content -->
  <img src="small.jpg" alt="description of image">

</picture>

提案された画像要素を模倣するポリフィルがあります：https ：//github.com/scottjehl/picturefill

概念についての2つの徹底的に説明された記事はここにあります：

http://nicolasgallagher.com/sensitive-images-using-css3/

http://css-tricks.com/on-sensitive-images/

于 2012-11-12T19:43:09.423 に答える
1

そこにはいくつかの異なるアプローチがあり、それらには長所と短所があります。Apple自体は、実際には網膜と標準画像の両方を網膜デバイスに提供します。これは機能しますが、明らかにかなり大量のダウンロードになります。

半自動化されたものが必要な場合は、Retina.jsを試してください。説明から：

ユーザーがページを読み込むと、retina.jsはページ上の各画像をチェックして、サーバー上にその画像の高解像度バージョンがあるかどうかを確認します。高解像度のバリアントが存在する場合、スクリプトはその画像をインプレースで交換します。

このスクリプトは、Appleが規定する高解像度修飾子（@ 2x）を使用して、サーバー上の高解像度の画像バリアントを示すことを前提としています。

于 2012-11-12T19:44:40.107 に答える
0

画像を指定するcss背景定義でdivを使用できます。cssメディアクエリを使用すると、クライアントが「retina-display」を備えたAppleデバイスである場合に、適切なcss定義を選択できます。

于 2012-11-12T19:42:03.187 に答える
0

あなたはjQueryでそれを行うことができます：

HTML：

<img src="/example.png" src-retina="/example-high-res.png"/>

Javascript：

  if (window.devicePixelRatio > 1) {
    $('img').each(function() {
      var src_retina = $(this).attr("src-retina");
      $(this).attr("src", src_retina);
    });
  }

このデモは、その仕組みを示しています：http: //jsfiddle.net/TLz7S/。

注：網膜ディスプレイが間違って検出されている可能性があります。私は実際には持っていません。誰かがそれを間違っていると思ったら、私に知らせてください。

于 2012-11-12T20:08:35.277 に答える