Retina ekranlarda net görüntüler nasıl elde edilir?

Retina ekranlarda net görüntüler nasıl elde edilir?

Retina ekranlarda net görüntüler elde etmek ve web sitelerini 2 kat büyük imajlar için nasıl optimize edebiliriz?

Retina ekran nedir? Normal ekranlarda baktığımızda çok net olan resimler Retina ekranlarda, cep telefonlarında, akıllı cihazlarda, tabletlerde neden net gözükmüyor ?

Retina ekranlar ile ilk olarak iPhone 4 ile hayatımıza girdi. Retina ekran basit olarak yüksek çözünürlüklü ekran manasındadır. Görüntü teknolojilerinin gelişmesi ile üretici firmalar daha net görüntü elde edecek çözümlere yönelmesi bu teknolojinin gelişmesinde önemli bir paya sahip oldu.

Genelde olarak hazırlanan resimlerin kaliteleri, Retina ekranlar için düşük kalır. Bundan dolayı Retina ekranlarda resimlerimiz daha bulanık görülmektedir.

Retina ekranlarda net görüntüler nasıl elde etmek için;

1. CSS ile uyarlama

/* düşük çözünürlükteki tanımlama */
.logo {
    background-image: url(/images/logo.png);
    height: 200px;
    width: 150px;
}
/* yüksek çözünürlük için tanım */
@media (min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .image {
        background: url(/images/logo@2x.png) no-repeat;
        background-size: 200px 300px; /* ilk değer genişlik ikinici yükseklik */
    }
}

CSS’in güzel özelliklerinden biri olan medya sorgularını kullanarak yüksek çözünürlükteki ekranları yakaladık. Yakaladığımız bu sınıfa yüksek çözünürlükte bir resim tanımladık. İkinci püf noktası backgrund-size tanımı ile Retina için oluşturduğumuz resmimizi normal boyutunda görünmesini sağlamaktır. Yoksa resim hazırlandığı gibi iki kat büyük görünür.

2. Javascript ile çözüm üretmek

<span data-picture data-alt="">
      <span data-src="kucuk.jpg"></span>
      <span data-src="orta.jpg"     data-media="(min-width: 300px)"></span>
      <span data-src="buyuk.jpg"    data-media="(min-width: 600px)"></span>
      <span data-src="cokbuyuk.jpg" data-media="(min-width: 900px)"></span>
      <noscript>
          <img src="kucuk.jpg" alt="kucuk">
      </noscript>
</span>

Javascript ile bir kaç çözüm bulunmakla beraber en mantıklı çözüm eğer kullanıcı Retina kullanan bir makineden geliyor ise resimlerin 2x hallerini gösterip, window.matchMedia metodu bu işi için biçilmiş kaftan tabi bu metodu desteklemeyen tarayıcılar bir sorun olarak ortaya çıkıyor. Destekleyenler için bu metodu kullanan; desteklemeyenler için alternatif çözüm üreten bu kod ile sorunumuz çözülmüş olacaktır.