Retina Ekranlarda Net Görüntüler Elde Etme ve Web Sitelerini 2 Kat Büyük İmajlar İçin Optimize Etme

Retina tam olarak nedir biliyor muyuz? Bu ekranları bu kadar hayret verici yapan nedir veya tasarımcıları veya geliştiriciler için bu ekranı kabus yapan nedir? Bu teknolojiyi anlamak için okumaya devam edin ve bu yolla çeşitli şekillerde retina ekranlar için resimleri optimize edebilirsiniz. Normal ekranlardan baktığımızda çok net olan resimler neden retina ekranlı cep telefonlarında, akıllı cihazlarda, tabletlerde net gözükmez?

Retinayı Anlayalım

Bu terim çok basit olarak yüksek çözünürlüklü ekran demektir. Fakat bu ekranlarla ilgili detaylara geçmeden önce bunun arkasındaki teknolojiyi anlamak gerekir.

İlk olarak bazı terimler üzerinden geçelim:

  • Cihaz Pikseli(Device pixel) görüntü veren en küçük fiziksel birim.
  • Piksel yoğunluğu (pixel density) belirli bir alan içinde görüntülenen piksel sayısını ifade eder.
  • Çözünürlük bir cihazın  en veya boyu için bütün piksellerinin sayısını ifade eder.
  • İnç başına piksel sayısı /ppi veya dpi (pixel per inch/dot per inch) ise ekranın fiziksel genişliğinin yataydaki piksel sayısına böldüğünüzde alacağınız pixel miktarıdır. Örneğin benim monitörüm  Samsung XL2370 modeli, kılavuzdan aldığım ekran görüntüsü aşağıda. Görüntü alanı genişliği 509,76mm(200,69inç) ve 1920×1080 çözünürlükte kullanıyorum. 1920/200,69= 9,57 çıkıyor. Yani 1 inçte 9,57 piksel varmış. 1 inç karede ise ~92 piksel var demektir. 23,5 inç büyüklüğündeki ekranımda ise  1920×1080=2.073.600 adet piksel var.

    Apple retina ekranlı 13 inç MacBook Pro 2560×1600 çözünürlüğe sahip. 13 inçte  2560×1600=4.096.000 tane piksel var. 13 inch retina ekranlı MacBookta 4milyon pixsel varken Retina MacBook'a göre benim 1,6 kat daha büyük 23,5inç ekranımda  yaklaşık 2 milyon piksel var. Yani yar yarıya daha az pixel var benim ekranımda!
  • Yüksek çözünürlük (High DPI) 1 inç büyüklüğe 200 piksel veya daha fazla olan görüntü yoğunluğudur.

Yani şöyle söyleyebiliriz, bir iPadiniz olabilir ve aynı büyüklükte fakat farklı pixel yoğunluğuna sahip eski bir monitörünüz olabilir. iPad çok daha fazla pikseli alana sığdırdığı için çok daha kaliteli görüntü vermektedir. Yani retina için  tam olarak şöyle denebilir: Aynı ekran boyununda fakat daha fazla pikseli olan demektir yani bunun diğer bir anlamı yüksek dpi görüntü demektir.

Standart ekranlar için çoğunlukla resimler 72 dpi yapılır. Bununla birlikte retinaların DPI'ları çok büyüktür, resim çözünürlükleri adapte edilmediyse bu resimler retina ekranlarda bulanık gözükecektir. İşte yüksek çözünürlüklü cihazlar için resimleri optimize etmenin nedeni budur.

 

Özetleyecek olursak; küçük ve yakın pikseller en iyi, en kaliteli  görüntüyü görmemizi sağlar. Retina cihazlar standart ekranlara göre yukarıda da matematiksel olarak hesapladığımız üzere 2 kat fazla piksel gerektirir. Yani elinizdeki resimlerin retina ekranlı cihazlarda net gözükmesini istiyorsanız onları 2 kat büyük resim olarak kaydetmeniz  gerekli ve resim boyutu olarak da yarı yarıya büyüklük vermeniz gerekmektedir. 

iPad2 ve iPad3 aynı fiziksel ekran büyüklüklerine sahip olmasına rağmen iPad2 1024×768 çöznürlükte iken iPad3 2048x1536px çözünürlüktedir.

Şimdi retina ekranlara göre hazırlanmış resimleri neden yapmamız gerektiğini daha iyi kavramış olduk ve bunu sitemize hangi yollarla yapacağımızın çeşitli yollarına bakalım.

Resim/Piksel Dosyalar

Resimler -bitmap dosyalar- kare ızgaralardan oluşan bir tuval içerisinde karelerin bir matrisle doldurması esasına dayanır. Webte en yaygın resim formatları JPG, PNG ve GIFtir. Resim dosyalarının özelliği tüm alan içinde her bir pikselin renk tonu, doygunluğu, parlaklığı, şeffaflığı ve yeri  piksel piksel işlenerek şekillendirilmesidir. Dikkat edilmesi gereken resim dosyalarının çözünürlüğe bağımlı olmasıdır. Bunun anlamı görüntü kalitesi kaybolmadan büyütmenin yapılamayacağıdır. Ancak retina ekranlar için resimlerin kaliteli görünmesi için küçülterek boyutlandırma yapılabilir.

Standart çözünürlükte bir resim dosyasındaki 1 piksel cihaz ekranlarının 1 pikseline eşdeğerdir.  1 resim pikseli retina ekranlarda 4 piksele eş değerdir. 

Bu değişikliği karşılamak amacıyla retina ekranlar 1 pikseli 4 piksel ile çarpar. Aslında resim aynı boyutta görünür ancak büyütülüp gösterildiği için resimlerin bulanık görünmesine neden olur.

Peki bu durumda bulanık görünmemesi için ne yapabiliriz? Öncelikle istenilen boyuttan 2 kat boyuta sahip resimleriniz olması gerekir ve bu resim dosyalarını kod düzenlemesi yaparak yarı boyutunda göstermelisiniz. Burada bu büyük resimleri web sitelerinde göstermek için yaygın olarak kullanılan 3 farklı yolu anlatacağım:

1. HTML ve CSS

HTML ve CSS ile resim dosyalarının boyutunu yarı yarıya küçültebilirsiniz. 200px genişliğinde resim göstermeniz gerekiyorsa resim dosyasını 400px genişliğinde yapıp kod ile bunu 200 px olarak göstermeniz gerekmekte. Böylece retina ekranlarda da net görüntüler elde etmiş olacaksınız.

Eğer uzun tarafı 200px, kısa tarafı 100px bir resim dosyası göstermeniz gerekiyorsa aslında sizin uzun tarafı 400px kısa tarafı ise 200px olan bir resim dosyanızın olması gerekiyor. Bu elinizdeki resim dosyasını HTML ile  aşağıdaki olduğu gibi yarı boyutunda gösterebilirsiniz.

<img src="resimdosyasi@2x.png" width="200" height="100" /> <!-- Aslında bu resim dosyası 400x200px büyüklüğünde -->

Görüldüğü gibi bu çok kolay ve basit bir durum. Ancak aynı zamanda resim dosyalarının boyutunu tanımlamak için CSS de kullanılabilir. Yani bir kez daha 400x200px büyüklüğünde bir resim dosyası var elinizde fakat siz 200x100px olarak göstermeniz gerektiği için aşağıdaki şekilde CSSinizi düzenleyebilirsiniz:

.image{
     background: url (resimdosyasi@2x.png);
     background-size: 200px 100px;
     width: 200px;
     height: 100px;
}

Ayrıca resim genişlik ve yüksekliklerini CSS ile %50 vererek de boyutlandırabilirsiniz. Bu boyutlandırma işlemini belirli classlara, spesifik resimlere verebileceğiniz gibi bütün resim dosyalarını etkileyecek şekilde bir seferde de verebilirsiniz ki bu bence daha kolay ve doğru olanı. Tek tek uğraşmaktansa basit yönetilebilir olması açısından bunu yapmak daha doğru.

 

/* spesifik resimleri yarı yarıya küçük göstermek için belirli classlara en ve boy tanımlayabilirsiniz */

.image{
     height: 50%;
     width: 50%;
}

 

/*  sitedeki tüm resimleri yarı yarıya küçültmek için */
img{
     height: 50%;
     width: 50%;
}

 

 

2. Javascript

Yüzde kullanarak yarı yarıya kullanmak işinize gelmeyebilir. Ekran çözünürlüklerine göre resimin bulunduğu alan değişeceği için yüzde kullanmak bazen işe yaramayabilir. Bu durumda jquery yardımıyla resim dosyalarınızın boyutlarını kendi yükseklik ve genişliklerinin yarısına sabitleyebilirsiniz.

 

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script language="JavaScript">
$(window).load(function() {
  var images = $('img');
    images.each(function(i) {
      $(this).width($(this).width() / 2);
      $(this).height($(this).height() / 2);
    });
});
</script>
<img src="resimdosyasi@2x.png" style="width:600px; height:600px;" /> <!--resim aslında 600x600px ama biz onun 300x300px görünmesini istiyoruz. -->

 

Yukarıdaki script ile resimlerin var olan boyutlarının matematiksel olarak ikiye bölünmesi sonucu elde edilen büyüklüğü yazdırmak için kullanırız. 600x600px büyüklüğündeki resim dosyaları yukarıdaki script sayesinde 300x300px olarak görünecek.

 

3. Cihaz sorguları

Resimleri uygun bir şekilde küçültmenin bir diğer yolu da siteyi görüntüleyen cihazların retina ekranlı olup olmadıklarını sorgulayıp uygun resim büyüklüklerini göstermektir. Bunun için iki farklı resim dosyası gerekmekte, biri normal büyüklükte diğeri ise 2 kat büyüklükte. Eğer cihaz retina ekransa 2 kat büyük olan resim dosyasının gösterileceği aşağıdaki kodu kullanabilirsiniz. Bu konu ile ilgili daha detaylı bilgi için aşağıdaki adresleri inceleyebilirsiniz:
– http://css-tricks.com/snippets/css/retina-display-media-query/
http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/

 

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

.image{
     background: url (resimdosyasi@2x.png);
}
}

 

Ölçeklenebilir Vektörel Dosyalar

Resim dosyalarının aksine SVG veya sadece vektörel resimler, ikonlar, şekiller retina ekranlar için birebir çalışma imkanı sunar ve görüntü kalitesi olarak mükemmel sonuçlar verir. Bunları istediğiniz kadar büyütün bozulma olmayacaktır ve netliklerini koruyacaklardır.

SVGler geleceğin medyaları olacak çünkü istenildiği gibi ölçeklendirilebilme kabiliyetleriyle kusurusuz görüntü elde edilebilmesi onu öne çıkarmakta.

 

Sonuç

Gördüğünüz gibi normal websitesi haricinde retina ekranlar da işin içine girince resim boyutlarını bu cihazlara da ayarlamaya çalışmak sizin için bir kabus olabilir. Ancak yüksek çöznürlüklü güzel görüntüler görmek isteyen kullanıcılar bu cihazları tercih ediyor ve sizin de retina ekranlar için yapacağınız bu ek çalışmalar bu tip cihazları kullanan kişiler için çok daha iyi bir deneyim ve memnuniyet sağlayacaktır. Bundan sonra artık bütün resim dosyaları SVG olmaya aday. Ayrıca ikon resimleri gibi bir çok web site objeleri resim dosyası kullanılmadan Font-Face ve benzeri teknolojilerin de yaygınlaşmasıyla bu gibi farklı yöntemlerle kullanım alanı daha da genişleyecek. 

Bir Cevap Yazın