Retina Display ve Website Optimizasyonu

Apple yeni teknolojisini piyasaya çıkarttı ve kullanımınıda oldukça arttırdı. Birçok insan artık retina display teknolojisine sahip cihazlar kullanıyor. Hatta bu cihazlar ile sizin web sayfanızıda ziyaret ediyorlar kimbilir belkide bu ekranlarda sitenizi açtıklarında karşılarında bulanık piksellenmiş bir görüntü ortaya çıkıyor. Bunu düzeltmek için yapmamız gereken ise Retina Display ve Website Optimizasyonu.

Peki neden böyle bir sorun oluyor?
Websayfası yapımındaki en önemli faktörlerden biri imajların yani site içinde kullanılan tüm görsellerin optimizasyonunun yapılmasıdır. Bu optimizasyon ne kadar iyi yapılırsa sitenin açılma hızı, performansı ve ziyaret edilebilirliğide aynı ölçüde artacaktır. Tabi bu Apple retina displayde durum daha farklı yüksek çözünürlük olduğu için bu çözünürlüğe uygun görseller kullanılması şart. Bu demek oluyor ki önceden yaptığımız bu düzenlemeler artık bize ek iş yapmamıza neden olacak eski teknoloji olacak. Böylece bir tarafta düşük çözünürlüğe uygun kullanım diğer tarafta ise yüksek çözünürlüğe uygun kullanım yapmamız gerekiyor.

Peki çözüm ne olabilir?
Her iki tarafıda düşünerek bir çalışma yapmak için en iyi çözüm cihazın yapısına göre içeriğin çağrılması. Yani normal ekranlarda iken normal kullanım, yüksek çözünürlük olduğunda ise yüksek çözünürlüklü görselleri serverdan alacak bir yapı kurulması. Bu sistemi en iyi yapacak kodlama şüphesizki javascript. Ne arayacağınızı bildiğinizde aradığınızı daha çabuk bulursunuz.

Retina.js
retina.js oldukça basit bir kullanıma sahip, hızlı ve açık kaynak kodlu bir script. Açık kaynak kodlu olduğu için ücretsiz kullanımımızda bir sakınca olmadığı gibi geliştirebilmemiz içinde olanak sunuyor. Peki ne yapıyor retina.js? retina.js yüksek çözünürlük gerektiğinde, serverda ona gösterilen klasör içindeki yüksek çözünürlüklü görselleri alıp sitedeki yerlerine koyuyor. Normal çözünürlükde ise hiçbir iş yapmıyor bekliyor. Yapmamız gereken tek şey sitemizde kullanılan görsellerin hem yüksek çözünürlüklü hallerini hemde normal çözünürlüklü hallerini serverımıza yüklemek.

Retina.js Kullanımı
1 – Retina.js dosyasını indirin

2 – .zip den çıkarıp websayfanızın ana dizininde yada nerede bulunmasını istiyorsanız oraya kopyalayın.

3 – <script type=”text/javascript” src=”/javascripts/retina.js”></script> ile sitenizin </body> tagından önce bir yere ekleyin.

4 – Hepsi bu… aşağıdaki adımları izleyin.

Retina.j dosyasını sitenize eklediğinizde yapmanız gereken kullanım şu şekilde:

image.jpg diye bir görselimiz olsun.
<img src=”/images/image.jpg” alt=”Metin Yılmaz Blog” />
Normal kullanımı bu şekildedir.

Scriptimizin istediği ise şu şekilde:
<img src=”/images/image@2x.jpg” alt=”Metin Yılmaz Blog” />

Retina display nedir?
Apple’ın yeni nesil ürünlerinin ekranlarında kullandığı teknoloji Retina Display’dir. Retina Display’in hesabı, insan gözü için aşağı yukarı 30cm’den bakan bir göz için 286.5 DPI’a denk gelmekte. iPhone 4′te ise 326 DPI bir çözünürlük oluşturulmuş olup bu tamamen ihtiyaçları fazlasıyla karşılıyor.. Dolayısıyla ekrandaki renkler ve diğer tüm objeler en mükemmel şekilde gözümüze geliyor. Bu teknolojinin nasıl bir artısının olduğunu kullanmadan anlamak oldukça zor. Bu tip tanımlamalarda oldukça teknik geleceğinden siz en iyi bir iPhone 4-4S-5 yada 2048 x 1536 çözünürlüğe sahip iPad 3 ile retina display teknolojisini tecrübe edin.

Samsung, LG gibi şirketlerin Apple’ın Retina Display teknolojisine karşı geliştirdiği ekran teknolojisinin ismi de Amoled’dir, Retina Display’de olduğu gibi Amoled’de de yüksek pikseller söz konusu. Her ne kadar retina display kadar olmasada belli bir kalitesi var.