Bir sayfanın ağırlığının büyük bölümünü neredeyse her zaman görseller oluşturur ve çözüm tek cümleyle şudur: görseli ekranda kaplayacağı genişlikte kaydedin, modern bir formatta verin, boyutlarını HTML tarafında bildirin. Fotoğraf makinesinden ya da tedarikçiden gelen dosyayı doğrudan yüklemek, telefon ekranında üç yüz piksel yer kaplayacak bir görseli binlerce piksel genişliğinde indirtmek demektir. Aşağıda hangi ölçü, hangi format, ne kadar sıkıştırma ve hangi HTML özelliği sorusunu tek tek ayırıyoruz.
Görsel neden en büyük yük?
Metin ve stil dosyaları kilobayt düzeyindedir; işlenmemiş bir ürün fotoğrafı tek başına onların toplamından ağır olabilir. Üstelik görselin maliyeti yalnızca indirme süresi değildir: tarayıcı dosyayı çözmek için işlemci harcar, yer ölçüsü bildirilmemişse görsel geldiğinde metni aşağı iter ve ziyaretçi okuduğu satırı kaybeder. Mobil bağlantıda bu ikisi birleşince sayfa "açılıyor ama kullanılamıyor" hâline gelir.
Bu yüzden görsel işi üç ayrı karardır: ne kadar büyük, hangi biçimde, ne zaman yüklensin. Üçünü karıştırmak en sık görülen hatadır; sadece formatı değiştirip ölçüyü olduğu gibi bırakmak beklenen kazancı vermez.
Hangi ölçü, hangi format?
Ölçü kararını tasarımdaki yerleşim verir. Görselin yerleştiği kutunun en geniş hâlini ölçün, yüksek yoğunluklu ekranlar için bunun iki katını üst sınır kabul edin ve daha büyüğünü kaydetmeyin.
| Kullanım yeri | Pratik genişlik | Uygun format | Not |
|---|---|---|---|
| Tam genişlik kapak görseli | Masaüstü kutu genişliği kadar, en çok iki katı | WebP, yedeği JPEG | Sayfanın en büyük öğesi olur, ilk yüklenmesi gereken budur |
| Ürün ya da hizmet kartı | Kart genişliğinin iki katı | WebP | Tüm kartlar aynı oranda kesilmeli |
| Yazı içi görsel | Metin kolonu genişliğinin iki katı | WebP | Ekran görüntüsünde okunabilirlik önce gelir |
| Logo, simge, çizim | Ölçekten bağımsız | SVG | Her boyutta keskin kalır, dosyası küçüktür |
| Şeffaf arka planlı görsel | Kutu genişliği kadar | WebP, yedeği PNG | PNG fotoğrafta gereksiz yere ağırdır |
Aynı görseli farklı ekranlara farklı ölçülerde vermek isterseniz srcset ve sizes özellikleri işe yarar; içerik yönetim panelleri çoğu zaman bunu kendiliğinden üretir. Panel üretiyorsa elle ikinci bir kopya hazırlamanıza gerek yoktur.
Sıkıştırma: nereye kadar?
Fotoğrafta kalite ayarını en üstte tutmanın görünür bir faydası yoktur. Pratik yöntem şudur: kaliteyi kademeli düşürün, görseli gerçek boyutunda açıp düz renkli alanlara ve yazı kenarlarına bakın; lekelenme başladığı yerin bir kademe üstünde durun. Ekran görüntüleri ve içinde yazı olan görseller sıkıştırmayı daha az affeder, onları bir kademe kaliteli tutun.
- Kaynak dosyayı ayrı saklayın; sıkıştırılmış kopyayı tekrar sıkıştırmak kaliteyi kalıcı bozar.
- Panelin ürettiği küçük kopyalar varsa onları kullanın, elle yeniden üretmeyin.
- Animasyonlu GIF yerine kısa video kullanın; GIF aynı hareket için çok daha ağırdır.
- Tedarikçi görselini olduğu gibi yüklememek için yükleme adımına bir ölçü kontrolü koyun.
Yükleme sırası ve düzen kayması
Her görseli aynı anda indirmeye çalışmak ilk ekranı geciktirir. Kural basittir: ilk ekranda görünen görsel gecikmeli yükleme kullanmaz, aşağıda kalan her görsel kullanır. İlk ekrandaki kapak görseline gecikmeli yükleme vermek, sayfanın en önemli ölçütünü kendi elinizle geciktirmektir.
Düzen kaymasının çözümü de tek satırdır: her görsele width ve height değerlerini yazın. Tarayıcı yeri baştan ayırır, görsel geldiğinde metin zıplamaz. Mobilde taşan görseller için ölçüyü kutuya göre sınırlamak gerekir; sayfanın yana kaymasını nasıl ölçeceğinizi mobil taşma yazısında, hız ölçütlerinin ne anlama geldiğini Core Web Vitals yazısında anlattık.
Panelde görsel yükleme düzeni
Kurallar ancak yükleme yapan kişinin işine girdiğinde kalıcı olur. Ekip her hafta onlarca görsel yüklüyorsa kararı tek tek vermesini beklemek yerine, panelde sabit bir düzen kurmak gerekir.
- Kullanım yerine göre şablon ölçüleri belirleyin: kapak, kart ve yazı içi görsel için üç sabit genişlik yeter.
- Kesim oranını sabitleyin. Kartlarda farklı oranlar karışınca liste dağınık görünür ve düzen kayar.
- Yükleme sınırı koyun. Panelde en büyük dosya boyutunu sınırlamak, işlenmemiş fotoğrafın siteye girmesini kendiliğinden engeller.
- Küçük kopya üretimini panele bırakın; elle hazırlanan kopyalar zamanla birbirinden şaşar.
- Kullanılmayan görselleri temizleyin. Silinen içerikten arta kalan dosyalar yedeği ve depolamayı şişirir.
- Yayın öncesi tek kontrol yapın: görseli sağ tıklayıp gerçek piksel ölçüsüne bakmak çoğu hatayı yakalar.
Alt metin ve dosya adı
Alt metin, görseli göremeyen ziyaretçinin ve arama motorunun o görseli anladığı tek yerdir. İyi alt metin görselin işlevini anlatır, anahtar kelime listesi değildir. Süslemelik bir çizginin alt metni boş bırakılır; bilgi taşıyan bir tablo ekran görüntüsünün alt metni ise tablonun ne söylediğini özetler.
- Dosya adı anlamlı olsun: rastgele kamera numarası yerine içeriği söyleyen kısa bir ad.
- Alt metinde "resim" ya da "fotoğraf" demeye gerek yoktur; ekran okuyucu bunu zaten bildirir.
- İçinde yazı olan görselin yazısı sayfada metin olarak da bulunsun.
- Aynı görsel farklı sayfalarda farklı işlev görüyorsa alt metni o sayfaya göre yazılır.
Özet
Görsel hazırlığı yayın öncesi beş adımlık bir alışkanlığa sığar: kutu genişliğini ölç, en çok iki katında kaydet, WebP olarak ver, kaliteyi gözle test ederek düşür, width, height ve alt metni yaz. İlk ekrandaki görseli gecikmesiz, gerisini gecikmeli yükle. Bu düzen kurulduğunda sayfa ağırlığı genellikle tek dokunuşta belirgin şekilde düşer. DigiWSS, site kurulumu ve teknik denetim çalışmalarında görsel envanterini de bu ölçütlerle çıkarır.