web-dev-qa-db-ja.com

Webサイトの自動Retina画像

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

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

出来ますか？

UPDATE
この興味深い点を強調します article@ Paul D. Waite そして興味深い discussionSebastian でリンクされていることについて.

htmlimageretina-display
98
jan267

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

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

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

その他のリソース：

134
mtaube

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

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

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

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

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

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

14
bhell

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

これすべてのコツは、IE8サポートを取得することです。バックグラウンドサイズを簡単に実行できないため、ベースケース（非モバイルメディアクエリ）は、シンプルで、スケーリングされていないアイコンである必要があります。メディアクエリは網膜のケースを処理し、IE8では網膜は使用されないため、背景サイズのクラスを自由に使用できます。

.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つのファイルが必要です。

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

10
muzzamo

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

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

10
svachalek

全員に網膜画像を提供し、画像要素内で画像を元のサイズの半分に絞ります。画像が400px幅と高さだとしましょう-画像の幅を200pxと指定するだけで、このようにシャープに見えます：

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

画像が写真の場合、おそらく2xで画像が表示されるときにJPG圧縮のアーティファクトが表示されないため、見た目を悪くすることなくJPG圧縮を増やすことができます。参照 http://blog.netvlies.nl/design-interactie/retina-revolution/

6
webdev

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

Apple（ here ）が提供するexampleは次のとおりです。

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つのリンクも共有します。

1
jan267

私のコードスニペットはまさにこれを行います。 jQueryは必要ありません。data-hdimg属性を使用するだけです。

https://github.com/ajkochanowicz/High-Res-Images

document.addEventListener 'DOMContentLoaded', ->
  HDimgs = document.querySelectorAll '[data-hdimg]'
  (
    image = new Image()
    image.onload = ->
      console.info 'Image loaded'
      img.src = image.src
      img.style.width = "#{image.width / 2}px"
      img.removeAttribute 'data-hdimg'
    image.onerror = ->
      console.error 'Could not load image'
    image.src = img.dataset.hdimg
  ) for img in HDimgs
1
Adam Grant

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

    #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([email protected]); background-size: 50%; }
}

別の簡単な方法は、このメソッドを使用することです：

単に交換してください：

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

と

<img src="[email protected]" alt="" width="200" height="100" />
1
SonnyP

Javaスクリプトを使用することに不安を感じていない場合は、こちらの記事をお勧めします 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');            
    });
});
1
Artru

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

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

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

0
Keegan's hairstyle 82