1

ここ数年、頭に浮かんできた質問があります。Web サイトで使用する画像を Retina 対応にするためには、どのように準備すればよいですか?

はい、私はこのトピックについてインターウェブで何時間も費やしてきましたが、これまでのところ「究極の答え」は見つかりませんでした.

たとえば、このスレッド (リンク: Retina ディスプレイの画像サイズ) では、寸法を 2 倍にする必要があることだけが言及されています。しかし、解像度はどうですか？

実際の状況: 画像は、Photoshop (または任意の修正) を使用して、寸法 400px x 200px、解像度 72 ppi で作成されます。
この画像をどのように変更すればよいですか?

  • 72 ppi で 800 x 400px (サイズを変更するだけで 2 倍)
  • 144 ppi で 800 x 400 ピクセル (寸法と解像度の 2 倍)
  • 144 ppi で 400 x 200 ピクセル (解像度がちょうど 2 倍になります)
  • 246 ppi で 400 x 200 ピクセル (同じ寸法、より高い解像度 -- iPad の壁紙のデザインに関するチュートリアルから 246 という数字を取得しました)
  • ...など... ??

ターゲットは、画像を選択し、非 Retina ディスプレイと Retina ディスプレイの両方に表示することです (つまり、「通常の」コンピューター/ラップトップ、Mac (両方のバージョン、Retina と非)、iDevice、Android など)。

フィードバックをお待ちしております:-)

4

3 に答える 3

2

ユーザーのデバイスに Retina ディスプレイが装備されている場合に限り、Retina.jsを使用して画像を高解像度バージョンに置き換えることができます。

于 2013-04-12T14:19:44.107 に答える
1

リンクした質問は正しいです。解像度を 2 倍にするには、画像のサイズを 2 倍にする必要があります。

あなたが混乱しているのはPPIです。PPI は 1 インチあたりのピクセル数で、ディスプレイのサイズと同じように、単に画像の大きさを測定するものです。

一方は他方から独立していません。

400x200 の画像は、72 ppi ディスプレイで 144 ppi ディスプレイで 800x400 の画像と同じくらいの画面スペースを占有します。違いは、144 ppi のデバイスは 72 ppi よりも 1 インチの画面スペースにより多くのピクセルを収めることができるということです。

したがって、72ppi の画像の解像度を 2 倍にすることで、同じように見え、同じ量の画面スペースを占有することが保証されます。

于 2013-03-11T15:35:31.873 に答える
0

新しいレスポンシブ画像HTML5 標準があります。2014 年 7 月の時点では、まだブラウザーのベータ ビルドのみです。しかし、Picturefillポリフィルは既に利用可能です。

この記事では、さまざまなユースケースについて非常によく説明しています。ただし、ここで必要なのは、高解像度 (たとえば「retina」) ディスプレイ用の代替画像を単純に提供することです。

<img srcset="small.jpg 1x, large.jpg 2x"
   src="small.jpg"
   alt="A rad wolf" />
于 2014-07-09T10:51:30.470 に答える