113

Retina ディスプレイを搭載した新しい Apple MacBook Pro では、Web サイトで「標準」の画像を提供すると、少しぼやけてしまいます。したがって、網膜画像を提供する必要があります。

@2xiOS (Objective-C を使用) のように、画像に自動的に切り替える方法はありますか? 私が見つけたものは次のとおりです:モバイルおよび網膜ディスプレイ上の高解像度画像の CSS ですが、 CSS や JavaScript を使用せずに、すべての画像の自動プロセスを見つけられたらいいのにと思います。

出来ますか？

更新@Paul D. Waiteによって提案された
この興味深い記事と、 Sebastianによってリンクされたそれに関する興味深い議論を強調します。

4

10 に答える 10

167

retina src 属性、つまり srcset を追加できる img タグの新しい属性があります。JavaScript や CSS は不要で、画像の二重読み込みもありません。

<img src="low-res.jpg" srcset="high-res.jpg 2x">

ブラウザのサポート: http://caniuse.com/#search=srcset

その他のリソース:

于 2013-10-04T17:01:04.803 に答える
14

さまざまなソリューションがあり、それぞれに長所と短所があります。どちらが最適かは、Web サイトの設計方法、一般的な訪問者が使用しているテクノロジーの種類など、さまざまな要因によって異なります。Retina ディスプレイは、Macbook Pro Retina と今後の iMac に限定されないことに注意してください。独自のニーズがある可能性があるモバイル デバイス。

この問題は、一般的にレスポンシブ デザインの画像にも密接に関連しています。実際、特定のデバイス向けに設計するのではなく、一般的なレスポンシブ デザイン手法を利用するのがおそらく最善です。結局のところ、テクノロジーは今後も常に変化し続けます。

私が指摘した解決策/議論のいくつか：

  • CSS テクニック (グラデーション、角丸など)、SVG、アイコン フォントを含む可能な限りのベクター。
  • Yoav Weissが提案するように、高解像度 (「網膜」) 画像を提供しますが、それらをさらに圧縮 (JPEG 品質) するか、 Paul Boagが提案するように、本当に必要なとき (つまり、モバイルのとき) にモバイル ネットワークに圧縮させます。
  • Adaptive Images、(ほとんど) サーバー側のソリューション。これは、画面解像度を保存する Cookie、PHP スクリプトから画像を提供するように構成された Web サーバー、および Cookie を読み取って適切な画像を提供する名前付きスクリプトに基づいています。
  • Smashing Magazineでよく説明され、議論されている一連の可能性。
  • Paul Boagのビデオで提案されているように、網膜の描写を少し滑らかにするために、わずかに高い解像度を提供します。
  • A List Apartの @1.5x 手法は、基本的に同じ考え方です。
  • 近い将来、この<picture>タグはW3C ワーキング グループや Appleによってサポートされるソリューションになる可能性があります。
  • Jake Archebaldによって提案されたJavaScript 手法。
  • Smashing Magazineのさまざまなテクニックと、一般的な問題についての広範な議論。

他の回答が示すように、さらに多くの手法がありますが、おそらくベスト プラクティスはまだありません。

私が疑問に思っていることの 1 つは、それぞれのデバイスが利用可能でなくても、これらの手法のいくつかをテストおよびデバッグする方法です...

于 2012-12-15T20:25:57.770 に答える
12

まだ誰も明白なことに言及していないので、私はそれを浮かび上がらせます: 可能であれば、SVG を使用してください。それらは、何の努力もせずに美しい網膜解像度で表示されます。

IE8 が心配すべき主な恐竜であるため、サポートは良好です。多くの場合、gzip ファイル サイズはビットマップ (png/jpg) 形式よりも優れており、画像はより柔軟です。それらをさまざまな解像度で再利用し、必要に応じてスタイルを変更できるため、開発時間とダウンロード帯域幅の両方を節約できます。

于 2012-12-14T18:06:35.967 に答える
9

これは、背景画像でこれを実現するために使用する mixin を減らしたものです。dotLess を使用している場合、retina.js は背景画像では機能しません。これは、dotLess ではサポートされていないスクリプト評価を使用する独自の mixin が必要なためです。

これらすべての秘訣は、IE8 のサポートを得ることです。background-size を簡単に実行できないため、ベース ケース (非モバイル メディア クエリ) は、単純で拡大縮小されていないアイコンでなければなりません。その後、メディア クエリは retina のケースを処理し、retina は IE8 では使用されないため、background-size クラスを自由に使用できます。

.retina-background-image( @path, @filename,@extension, @size )
{
     .background-size( cover );
     background-image: url( "@{path}@{filename}@{extension}" );
         @media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
                only screen and ( -moz-min-device-pixel-ratio: 2 ),
                only screen and ( -o-min-device-pixel-ratio: 2/1 ),
                only screen and ( min-device-pixel-ratio: 2 )
         {
             background-image:url( "@{path}@{filename}@x2@{extension}" );
             background-size:@size @size;
         }
}

使用例:

.retina-background-image( "../references/Images/", "start_grey-97_12", ".png", 12px );

これには、次の 2 つのファイルが必要です。

  • start_grey-97_12.png
  • start_grey-97_12@2x.png

2xファイルは網膜の倍の解像度です。

于 2013-07-05T07:06:47.937 に答える
7

Retina 画像をすべての人に提供し、画像要素内で画像を元のサイズの半分に縮小するだけです。たとえば、画像が幅広で高さがあるとしましょう。400px画像の幅を指定して、次の200pxようにシャープに見えるようにするだけです。

<img src="img.jpg" width="200px" height="200px" />

画像が写真の場合、画像が に表示されたときに JPG 圧縮アーティファクトが表示されない可能性があるため、見た目を悪くせずに JPG 圧縮を増やすことができます: http://blog.netvlies.nl/2xを参照してください。デザイン・インタラクティエ/レティナ・レボリューション/

于 2012-12-06T14:44:10.420 に答える
1

複数の解像度の画像を提供するこの興味深い方法を見つけました。
実際には避けたかった CSS を使用しており、Safari と Chrome でのみ動作します。
について話していimage-setます。

Apple が提供する例を次に示します (こちら)。

header {
    background: -webkit-image-set( url(images/header.jpg)    1x,
                                   url(images/header_2x.jpg) 2x);
    height: 150px; /* height in CSS pixels */
    width: 800px; /* width in CSS pixels */
}

次の 2 つのリンクも共有したいと思います。

于 2013-07-05T08:36:25.263 に答える
1

背景画像の場合、これを行う簡単な方法は次のとおりです。

    #image { background: url(image.png); }

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
           #image { background: url(image@2x.png); background-size: 50%; }
}

別の簡単な方法は、次の方法を使用することです。

置き換えるだけです：

<img src="image.jpg" alt="" width="200" height="100" />

と

<img src="image@2x.jpg" alt="" width="200" height="100" />
于 2012-12-06T13:48:37.153 に答える
0

If you are not frustrated by fear of using java-script then here is a good article http://www.highrobotics.com/articles/web/ready-for-retina.aspx. It has very simple solution.

And the example in JSFiddle is worth a thousand words.

Using:

<img onload="getImgSrc(this,'image_x1.png')" width="100" height="100" />

JS:

/* RETINA READY IMG SRC */
function getImgSrc(img, src) {
    var srcResult = src;
    // if high-res screen then change _x1 on _x2
    if (window.devicePixelRatio > 1 && 
        src.indexOf("_x1.")>=0) {
          srcResult = src.replace("_x1.", "_x2.");
    }
    img.onload = null; //protect from second rasing
    img.src = srcResult;    
}

$(document).ready(function(){
  // fire onload trigger on IMG tags that have empty SRC attribute
  var images = $('img:not([src=""])');
    images.each(function(i) {
        $(this).trigger('onload');            
    });
});
于 2013-10-18T06:57:05.167 に答える