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.
|
1 2 3 4 5 6 7 8 9 10 |
#logo { background-image: url('/images/my_image.png'); } @media all and (-webkit-min-device-pixel-ratio: 1.5) { #logo { background-image: url('/images/my_image@2x.png'); background-size: 200px 100px; } } |
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.