Yeni nesil telefonlarda ve son olarak Macbook larda kullanılan retina ekranlarla beraber artık çözünürlük yerine derinlik artmaya başladı.. Derinliğin artmasıyla beraber standart olarak kulandığımız resimler normal bilgisayarlar da gayet güzel görünürken retina ekranlarda sırıtmaya ve kötü görünmeye başladı.

Mantık olarak retina ekranlar bizim 300 pixel  genişliğinde bir resmi aynı 300pixel de 400 pixel de gördüğümüz netlikte göstermesi amaçlandı. Yani resim boyu aynı kalırken netlik oldukça arttı ve fontlar gayet güzel ve net görünürken resimler sırıtmaya başladı.

Bu amaçla kullanabileceğimiz bir çok farklı metoddan sıkça kullandıklarımızı yazmak istedim.

1. Retina.JS

Bir javascript sınıfı aracılığıyla resimlerin ekran derinliğine göre @2x yada @x olarak görüntülenmesini sağlıyor.

Retina.js adresinden indirip kullanabilirsiniz.

Pixel ratio değeri 1.5 den büyük olan ekran derinlikleri için @2x.png halini kullanıyor.

2. Font formatında kullanma

Bir diğer yöntem ise resimleri font formatına getirip bu tarzda kullanmak.. Sıkça kullandığımız font-awesome metoduyla hemen hemen aynı yöntem.

Bunlar için kullanabileceğiniz adresler;

• Icon Vault – http://iconvau.lt/
• ve diğerleri için bu makaleye bakabilirsiniz.

3. SVG Formatını Kullanma

SVG Formatı png ve jpg formatına göre yüksek derinlikte bozulmayan bir formattır. JPG ve PNG resimlerimizi online olarak image to svg converter tarzı bir uygulama ile çevirebiliriz.

Yine jpg gibi aynı şekilde css kodlarımızda kullanmamız mümkün. Direk olarak .svg uzantısı şu an kullanılıyor.

 

css retina uyumu ,retina uyumlu internet sitesi tasarlama ,retina uyumlu tasarım ,retina uyumu