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

0

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 ?

fenerbahce fenerbahce (107)
5 yıl önce sordu

Toplam 1 Cevap


0

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.

ergin ergin (2515)
5 yıl önce cevaplandı

  • çok teşekkürler. fenerbahce 5 yıl önce
  • Ergin Bey hoş geldiniz hakan 5 yıl önce

üyelik gerektirir

Cevap yazabilmek için üye girişi yapmalısınız.

Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol