Duyarlı Görseller: Her Cihaza Doğru Boyutu Göndermek
Sayfanız telefonda yavaş açılıyor. Tarayıcı araçlarına baktığınızda neden ortaya çıkıyor: 3000 piksel genişliğinde bir görsel, 400 piksel genişliğindeki ekrana indiriliyor. Görsel küçültülerek gösteriliyor ama indirilen bayt sayısı aynı.
Bu yazı, cihaza uygun görsel sunmayı ele alıyor.
Görünmeyen İsraf
| Ekran | Gerekli genişlik |
|---|---|
| Telefon | Yaklaşık 400-800 piksel |
| Tablet | Yaklaşık 800-1200 piksel |
| Masaüstü | 1200 piksel ve üzeri |
Bu tablonun pratik sonucu nettir: tek bir büyük görseli tüm cihazlara göndermek, telefon kullanıcısına gereğinden birkaç kat fazla veri indirtmek demektir — ve mobil bağlantıda bu fark doğrudan bekleme süresine dönüşür.
Görsel küçültülerek gösterilir ama trafik tasarrufu olmaz.
Bu israf sayfa hızı ölçümlerinde en büyük kalemdir.
Çözüm, birden fazla boyut üretmektir.
Tarayıcıya Seçim Bırakmak
- Görselin farklı boyutları hazırlanır.
- Hepsi etikete listelenir.
- Tarayıcı uygun olanı seçer.
Üçüncü adım işin güzel yanıdır: tarayıcı ekran genişliğini, piksel yoğunluğunu ve bazı durumlarda bağlantı hızını bilerek en uygun görseli kendi seçer — sizin cihaz tespiti yapmanıza gerek kalmaz.
Bu seçim sunucu tarafında yapılmaz.
Bu nedenle önbelleklemeyi de bozmaz.
Her boyut ayrı bir adres olarak sunulur.
Kaç Boyut Üretmeli
- Üç dört boyut çoğu site için yeterlidir.
- Çok fazla boyut disk tüketir.
- Aralar çok sık olmamalı.
İkinci madde paylaşımlı barındırmada önemlidir: her görsel için altı yedi farklı boyut üretmek disk kullanımını katlar ve dosya sayısı sınırınıza yaklaştırır — üç dört boyut, kazancın neredeyse tamamını sağlar.
Dosya sayısı sınırı sıkça unutulur.
Binlerce görselli bir sitede bu sınır gerçek bir engeldir.
Boyutlar yaygın ekran genişliklerine göre seçilmelidir.
Format Seçimi
| Format | Kullanım |
|---|---|
| Modern sıkıştırma formatları | Belirgin daha küçük |
| Klasik fotoğraf formatı | Yedek olarak |
| Saydamlık gereken görseller | Uygun format seçilmeli |
| Logo ve simgeler | Vektör tercih edilmeli |
Dördüncü satır en kolay kazançtır: logo ve simgeleri vektör olarak sunmak hem dosya boyutunu çok küçültür hem her ekran yoğunluğunda net görünmesini sağlar — ayrı boyutlar üretmeye de gerek kalmaz.
Birinci satır ise fotoğraflarda belirgin tasarruf sağlar.
Aynı kalitede belirgin biçimde küçük dosyalar üretir.
Desteklemeyen tarayıcılar için yedek sunulmalıdır.
Geç Yükleme
- Ekran dışındaki görseller beklenir.
- Kullanıcı yaklaştıkça yüklenir.
- İlk yükleme hızlanır.
Üçüncü madde en büyük etkiyi ilk açılışta gösterir: sayfanın altındaki görseller ilk açılışta hiç indirilmezse, kullanıcının gördüğü ilk ekran çok daha hızlı gelir — ve çoğu ziyaretçi zaten sayfanın altına hiç inmez.
Bu özellik artık tarayıcıda yerleşiktir.
Ek kütüphane gerekmez.
Ancak ilk ekrandaki görsellere uygulanmamalıdır.
İlk Ekran Görselleri
- Geç yükleme uygulanmaz.
- Öncelikli yükleme işaretlenir.
- Boyut belirtilir.
Birinci madde sık yapılan bir hatayı düzeltir: sayfanın en üstündeki ana görsele geç yükleme uygulamak, o görselin daha geç istenmesine yol açar ve sayfa hızı ölçümlerinde en kritik metriği kötüleştirir.
Bu, iyi niyetli bir optimizasyonun ters etkisidir.
Üçüncü madde ise farklı bir sorunu çözer.
Boyut belirtilmeyen görseller yüklenirken sayfayı kaydırır.
Bu kayma, kullanıcı deneyimini bozar ve ölçümlerde ceza alır.
Boyutları Üretmek
| Zaman | Değerlendirme |
|---|---|
| Yükleme anında | Tercih edilen |
| İlk istekte | İlk ziyaretçi bekler |
| Her istekte | Kesinlikle yapılmamalı |
Üçüncü satır ciddi bir kaynak israfıdır: her istekte görseli yeniden boyutlandırmak işlemciyi gereksiz yere tüketir ve paylaşımlı barındırmada hesabınızın kaynak sınırına takılmasına yol açar.
Üretilen boyutlar diske kaydedilmelidir.
Birinci satır en verimli yöntemdir.
Yükleme sırasında bir kez üretilir ve sonsuza kadar kullanılır.
Kazancı Ölçmek
- Toplam sayfa ağırlığına bakın.
- Mobil görünümde ölçün.
- Önce ve sonra karşılaştırın.
İkinci madde doğru ölçüm koşulunu belirler: masaüstü tarayıcıda yapılan ölçüm en büyük görseli indireceği için kazancı göstermez — ölçüm mobil genişlikte yapılmalıdır.
Tarayıcı araçları ekran boyutu benzetimi sunar.
Bu benzetimle gerçek fark görülür.
Kazanç çoğu sitede yüzde ellinin üzerindedir.
Görsel işleme ve disk kullanımını yönetebilmek için yeterli kaynak gerekir; hosting kiralama hizmeti ile disk ve işlem limitlerinizi ihtiyacınıza göre seçebilirsiniz.
Sonuç
Mobil yavaşlığın en büyük nedeni genellikle görsellerdir: tek bir büyük görseli tüm cihazlara göndermek, telefon kullanıcısına gereğinden birkaç kat fazla veri indirtmek demektir. Üç dört boyut üretin, seçimi tarayıcıya bırakın, ekran dışındakileri geç yükleyin ama en üstteki ana görsele geç yükleme uygulamayın — bu, en kritik hız metriğini kötüleştirir.
Sıkça Sorulan Sorular (SSS)
Görseli CSS ile küçültmek yetmez mi?
Yetmez. Görsel küçültülerek gösterilir ama indirilen bayt sayısı aynı kalır; telefon kullanıcısı gereğinden birkaç kat fazla veri indirir ve mobil bağlantıda bu doğrudan bekleme süresine dönüşür. Farklı boyutlar üretmek gerekir.
Kaç farklı boyut üretmeliyim?
Üç dört boyut çoğu site için yeterlidir ve kazancın neredeyse tamamını sağlar. Her görsel için altı yedi boyut üretmek disk kullanımını katlar ve paylaşımlı barındırmada dosya sayısı sınırınıza yaklaştırır.
Tüm görsellere geç yükleme uygulayabilir miyim?
Uygulamayın. Sayfanın en üstündeki ana görsele geç yükleme uygulamak o görselin daha geç istenmesine yol açar ve sayfa hızı ölçümlerinde en kritik metriği kötüleştirir. Geç yükleme yalnızca ekran dışındaki görseller içindir.
Boyutları ne zaman üretmeliyim?
Yükleme anında bir kez üretip diske kaydedin. Her istekte yeniden boyutlandırmak işlemciyi gereksiz tüketir ve paylaşımlı barındırmada hesabınızın kaynak sınırına takılmasına yol açar.
