Web siteleri için otomatik Retina görüntüleri

Retina ekranlı yeni Apple MacBook Pro ile, web sitenize "standart" bir görüntü sağlarsanız, biraz bulanık olacaktır. Yani bir retina görüntüsü sağlamalısınız.

@2xİOS'un (Objective-C ile) yaptığı gibi otomatik olarak görüntülere geçmenin bir yolu var mı ? Bulduğum şey şudur: Mobil ve retina ekranlardaki yüksek çözünürlüklü görüntüler için CSS , ancak keşke tüm resimlerim için CSS veya JavaScript olmadan otomatik bir işlem bulabilseydim .

Mümkün mü?

GÜNCELLEME @ Paul D. Waite tarafından önerilen
bu ilginç makaleyi ve bununla ilgili Sebastian tarafından bağlantılı ilginç bir tartışmayı vurgulamak istiyorum .

İmg etiketi için bir retina src niteliği, yani srcset eklemenize izin veren yeni bir öznitelik vardır. Javascript veya CSS gerekmez, resimlerin çift yüklenmesi gerekmez.

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

Tarayıcı Desteği: http://caniuse.com/#search=srcset

Diğer kaynaklar:

• WebKit sürüm yayını
• Srcset için W3C belgeleri
• srcset'in neden ve nasıl kullanılacağına dair iyi bir açıklama
• Chris Coyer'in daha iyi bilgi için gönderisi

Her birinin kendi artıları ve eksileri olan farklı çözümler var. Hangisinin sizin için en iyisi olduğu, web sitenizin nasıl tasarlandığı, tipik ziyaretçilerinizin ne tür bir teknoloji kullandığı vb. Gibi çeşitli faktörlere bağlıdır. Retina ekranların Macbook Pro Retina ve gelecek iMac'lerle sınırlı olmadığını, aynı zamanda kendi ihtiyaçları olabilecek mobil cihazlar.

Sorun, genel olarak duyarlı tasarımlardaki görüntülerle de yakından ilgilidir. Aslında, belirli cihazlar için tasarım yapmak yerine genel duyarlı tasarım tekniklerini kullanmak muhtemelen en iyisidir. Sonuçta, teknoloji gelecekte de her zaman değişmeye devam edecek.

Not ettiğim çözümlerden / tartışmalardan bazıları:

• CSS teknikleri (gradyanlar, yuvarlatılmış köşeler vb.), SVG ve simge yazı tipleri dahil olmak üzere mümkün olan her yerde vektörler.
• Yüksek çözünürlüklü ("retina") görüntüler sunmak, ancak bunları Yoav Weiss tarafından önerildiği gibi daha fazla sıkıştırın (JPEG kalitesi) veya Paul Boag tarafından önerildiği gibi gerçekten ihtiyaç duyulduğunda (yani mobil olduğunda) mobil ağların sıkıştırmasına izin verin .
• Adaptive Images , (çoğunlukla) sunucu tarafı çözümü. Ekran çözünürlüğünü depolayan bir tanımlama bilgisine, bir PHP komut dizisinden görüntüler sunmak için yapılandırılmış bir web sunucusuna ve tanımlama bilgisini okumak ve uygun görüntüyü sunmak için adlandırılmış komut dosyasına dayanır.
• Smashing Magazine'de iyi tanımlanmış ve tartışılmış bir dizi olasılık .
• Paul Boag tarafından bir videoda önerildiği gibi, retina tasvirini biraz yumuşatmak için biraz daha yüksek çözünürlükler sunmak .
• @ 1,5x tekniği üzerinde A List Apart temelde aynı fikir.
• Yakın gelecekte <picture>etiket , bir W3C çalışma grubu ve hatta Apple tarafından desteklenen bir çözüm haline gelebilir .
• Jake Archebald tarafından önerilen bir JavaScript tekniği .
• Bir geniş tartışma farklı tekniklerin Smashing Magazine ve genel olarak sorun.

Diğer yanıtların gösterdiği gibi, daha da fazla teknik var - ancak muhtemelen en iyi uygulama henüz yok.

Merak ettiğim bir şey, ilgili cihaz (lar) olmadan bu tekniklerden bazılarının nasıl test edilip hata ayıklanacağı ...

Henüz kimse bariz olandan bahsetmediğine göre, onu oraya taşıyacağım: mümkünse, sadece SVG'yi kullanın. Hiç çaba harcamadan güzel retina çözünürlüklerinde ortaya çıkarlar.

IE8'in endişelenmesi gereken ana dinozor olduğu için destek iyidir. Gzip ile sıkıştırılmış dosya boyutları genellikle bit eşlemli (png / jpg) biçimlerinden daha iyidir ve resimler daha esnektir; onları farklı çözünürlüklerde yeniden kullanabilir ve gerekirse yeniden biçimlendirebilirsiniz, bu da hem geliştirme süresinden hem de indirme bant genişliğinden tasarruf sağlar.

Arka plan resimleri için bunu başarmak için kullandığım daha az karışım. dotLess kullanıyorsanız, retina.js arka plan resimleri için çalışmaz, çünkü dotLess'te desteklenmeyen komut dosyası değerlendirmesini kullanan kendi mixini gerektirir.

Tüm bunların püf noktası IE8 desteği almaktır. Arka plan boyutunu kolayca yapamaz, bu nedenle temel durum (mobil olmayan medya sorgusu) basit, ölçeklenmemiş bir simge olmalıdır. Ortam sorgusu daha sonra retina durumunu ele alır ve arka plan boyutu sınıfını kullanmakta serbesttir çünkü retina IE8'de asla kullanılmayacaktır.

.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;
         }
}

Kullanım örneği:

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

Bu, iki dosyanızın olmasını gerektirir:

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

2xDosyanın retina için çift çözünürlüklü olduğu yerde .

Herkese retina görüntüleri sağlayın ve görüntü öğesinin içinde görüntüyü doğal boyutunun yarısına kadar sıkıştırın. Resminizin 400pxgeniş ve uzun olduğunu varsayalım - 200pxbunun gibi keskin görünmesini sağlamak için resmin genişliğini belirtmeniz yeterlidir:

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

Resminiz fotografik ise, JPG sıkıştırmasını daha da kötüleştirmeden artırabilirsiniz, çünkü JPG sıkıştırma kalıntıları resim şu adreste görüntülendiğinde büyük olasılıkla görünmeyecektir 2x: bkz. Http://blog.netvlies.nl/ tasarım-etkileşim / retina-devrim /

arka plan resimleri bunu yapmanın basit bir yolu ise:

    #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%; }
}

başka bir basit yol da bu yöntemi kullanmaktır:

Değiştirin:

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

ile

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

Çoklu çözünürlüklü görüntüler sağlamanın bu ilginç yolunu buldum.
Aslında kaçınmak istediğim bir şey olan CSS kullanıyor ve yalnızca Safari ve Chrome'da çalışıyor.
Ben bahsediyorum image-set.

İşte Apple tarafından sağlanan bir örnek ( burada ):

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 */
}

Bu iki bağlantıyı da paylaşmak istiyorum:

• Safari 6 ve Chrome 21, retina görüntülerini desteklemek için görüntü seti ekler
• image-set()Gösterimde @ W3C

JSF ile , her bir görüntüye ekleme zorunluluğunu ortadan kaldırmak için özel bir Facelets etiketi oluşturabilirsiniz srcset.

Senin taglib.xmlgibi bir şeye sahip olabilirsin:

<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>

Ve etiketiniz şunun gibi görünebilir:

<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>

Hangisi şu şekilde kullanılabilir:

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

Ve oluşturacak:

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

Bu sorun, özellikle görüntünün tarayıcı boyutuna bağlı olarak değişen genişliklerde olabileceği duyarlı sitelerde zordur. Ayrıca, birden fazla editörün potansiyel olarak 1000 görüntü yüklediği bir CMS ile uğraşırken, insanlardan özel olarak sıkıştırılmış görüntüler yüklemelerini istemem bana gerçekçi görünmüyordu.

Bu yüzden bunu hesaba katan bir komut dosyası yazdım, sayfanın alt kısmında ve yeniden boyutlandırma bitiminde tetikleniyor. Her seferinde piksel yoğunluğu ve görüntünün kapladığı boyut dikkate alınır.

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

Eğer java-script kullanmaktan korkmuyorsanız, işte size iyi bir makale http://www.highrobotics.com/articles/web/ready-for-retina.aspx . Çok basit bir çözümü var.

Ve JSFiddle'daki örnek bin kelimeye bedeldir.

Kullanarak:

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