Webサイト用の自動Retina画像

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

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

出来ますか？

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

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

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

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

その他のリソース：

• WebKitリリースポスト
• srcsetのW3Cドキュメント
• srcsetを使用する理由と方法についての適切な説明
• Chris Coyerのより詳しい情報の投稿

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

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

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

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

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

私が不思議に思うことの1つは、それぞれのデバイスを使用可能にせずに、これらの手法のいくつかをテストおよびデバッグする方法です...

明らかなことについてはまだ誰も言及していないので、ここで説明します。可能な場合は、SVGを使用してください。彼らはまったく努力なしで美しい網膜解像度で表示されます。

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

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

これらすべての秘訣は、IE8サポートを取得することです。背景サイズを簡単に行うことができないため、基本ケース（非モバイルメディアクエリ）は、単純な非スケーリングアイコンでなければなりません。メディアクエリは、Retinaのケースを処理します。IE8ではRetinaが使用されないため、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ファイルが網膜のための二重の解像度です。

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

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

画像が写真の場合、画像を表示したときにJPG圧縮アーティファクトが表示されない可能性があるため、画質を悪化させることなくJPG圧縮を増やすことができ2xます。http：//blog.netvlies.nl/を参照してください。デザイン相互作用/網膜革命/

背景画像がこれを行う簡単な方法である場合：

    #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" />

複数の解像度の画像を提供するこの興味深い方法を見つけました。
実際には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つのリンクも共有したいと思います。

• Safari 6とChrome 21が網膜画像をサポートする画像セットを追加
• image-set()表記W3C @

JSFを使用すると、カスタムFaceletsタグを作成して、srcset各画像に追加する必要があるというファズを保存できます。

あなたのtaglib.xmlようなものを持つことができます：

<tag>
  <tag-name>img</tag-name>
  <source>tags/img.xhtml</source>
  <attribute>
    <name>src2x</name>
    <required>true</required>
    <type>java.lang.String</type>
  </attribute>
</tag>

また、タグは次のようになります。

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

  <img src="#{fn:replace(src2x, '@2x', '')}"
       srcset="#{src2x} 2x"/>

</ui:composition>

これは次のように使用できます：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:myTag="http://your.com/namespace-of-taglib">
  <myTag:src2x="image@2x.jpg"/>
</html>

そしてレンダリングします：

<img src="image.jpg"
     srcset="image@2x.jpg 2x"/>

この問題は、ブラウザのサイズに応じて画像の幅が変化する可能性があるレスポンシブサイトでは特に注意が必要です。また、複数の編集者が数千の画像をアップロードする可能性があるCMSを扱う場合、特別に圧縮された画像をアップロードするように依頼するのは現実的ではないように思えました。

そこで、これを考慮したスクリプトを作成しました。これは、ページの下部とサイズ変更の終了時に起動します。毎回、ピクセル密度と画像が占めるサイズを考慮に入れます。

http://caracaldigital.com/retina-handling-code/

java-scriptの使用に不安を感じていない場合は、http：//www.highrobotics.com/articles/web/ready-for-retina.aspxの良い記事をご覧ください。それは非常に単純な解決策を持っています。

そして、JSFiddleの例は 1000語の価値があります。

使用：

<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');            
    });
});