Retina Ekranlar İçin Doğru Görsel Boyutu
Retina, Super Retina ve benzeri yüksek piksel yoğunluklu (2x, 3x) ekranlar, standart ekranlara göre aynı fiziksel alanda daha fazla piksel gösterir. Bu nedenle görsellerinizin CSS boyutunun 2 katı kadar piksel genişliğinde olması gerekir; aksi halde bulanık görünür.
Nasıl hesaplanır? Örneğin görseliniz sayfada 800px genişlikte görünüyorsa, standart ekranlar için 800px, Retina (2x) için 1600px genişlikte bir kaynak kullanmalısınız. 3x ekranlar için 2400px'e kadar çıkılabilir; ancak çoğu durumda 2x (max 2400px) yeterlidir çünkü çok geniş görseller nadiren tam ekran kaplar.
srcset kullanımı: Tek bir boyut yerine srcset ile birden fazla çözünürlük sunun. Tarayıcı ekran yoğunluğuna ve görüntü alanına göre uygun dosyayı seçer. Böylece düşük yoğunluklu ekranlarda gereksiz büyük dosya indirilmez; Retina ekranlarda ise keskin görüntü sağlanır.
Retina için max 2400px önerisi, geniş monitörlerde tam genişlikte görüntülenen görseller için geçerlidir. Mobil Retina ekranlarda genelde 1200–1600px yeterlidir. WebP formatı ile %80 kalite ve max 2400px ayarı kullanarak hem keskin görüntü hem de makul dosya boyutu elde edebilirsiniz.
Tek görsel kullanıyorsanız ve farklı boyutlar üretmek istemiyorsanız, 2400px max ile sıkıştırılmış WebP iyi bir uzlaşıdır. Tarayıcı gerektiğinde ölçekleyecektir; Retina ekranlarda netlik korunur. Sıkıştırma aracı ile max 2400px ayarını seçerek tek tıkla Retina uyumlu görseller oluşturabilirsiniz.
Retina için WebP max 2400px ile sıkıştırın. 2x ekranlarda keskin, boyut makul.
Retina Preset ile Sıkıştır →