Yavaş açılan sitelerde ilk baktığımız şey görseller. Sık sık aynı tabloyla karşılaşıyoruz: telefondan doğrudan yüklenmiş 4 MB'lık fotoğraflar, 400 piksel genişliğinde gösterilen 4000 piksellik görseller, adı IMG_2381.jpg olan dosyalar ve boş alt metinler.
Görseller iki yönlü bir konu. Bir yandan sayfa hızının en büyük yüklerinden biri. Öte yandan Google Görseller, ürün sonuçları ve yapay zekâ destekli aramalar için bir içerik kaynağı. İyi yönetilen bir görsel hem siteyi hızlandırır hem de yeni bir arama girişi açabilir.
Görseller hızı nasıl etkiler?
Tipik bir sayfada indirilen verinin en büyük payı çoğu zaman görsellere ait. Ana sayfanın en üstündeki büyük kapak fotoğrafı ise genellikle Google'ın Largest Contentful Paint (LCP) ölçümündeki öğedir, yani sayfanın “ne zaman yüklenmiş sayıldığını” o belirler. Kapak görseli 3 MB ise mobil bağlantıda sayfa büyük ihtimalle yavaş sayılır, gerisini ne kadar iyi yaptığınızın etkisi azalır.
Yavaş sitenin diğer sebeplerini ve hızlandırma adımlarını ayrı bir yazıda ele aldık. Burada yalnızca görsellere odaklanıyoruz, çünkü en hızlı kazanç genellikle buradan gelir.
WebP ve AVIF
JPEG ve PNG hâlâ çalışıyor ama artık en iyi seçenek değiller. WebP, benzer görüntü kalitesinde JPEG'e göre genellikle belirgin biçimde daha küçük dosyalar üretir ve güncel tarayıcılarda destekleniyor. AVIF daha da iyi sıkıştırabilir; tarayıcı desteği de artık geniş, ancak dosyayı üretmek daha uzun sürer ve bazı düzenleme araçlarında hâlâ sorun çıkarabiliyor.
Pratikte önerimiz şu: Fotoğraflar için WebP'yi varsayılan yapın. Kullandığınız altyapı otomatik AVIF üretebiliyorsa onu da açın, tarayıcı desteklediği formatı kendisi seçer. Logo ve ikonlar için ise mümkünse SVG kullanın; SVG vektörel olduğu için her ekranda keskin görünür ve çoğu zaman birkaç kilobayttır.
PNG'yi yalnızca şeffaf arka plan gereken ve SVG'ye dönüştürülemeyen görsellerde tutun. Fotoğrafı PNG olarak kaydetmek, sık rastladığımız büyük dosya sebeplerinden biri.
Boyutlandırma ve lazy-load
Görseli, göründüğü en büyük boyuttan fazla yüklemeyin. Masaüstünde 800 piksel genişliğinde gösterilen bir görsel için, yüksek çözünürlüklü ekranları da hesaba katarak 1600 piksel genişlik yeterli. 4000 piksellik bir fotoğrafı tarayıcının küçültmesine bırakmak, kullanıcıya hiç görmeyeceği pikselleri indirtmek demek.
Modern sitelerde aynı görselin birkaç farklı boyutu üretilir ve tarayıcı ekrana uygun olanı seçer (HTML'de srcset). Telefondaki kullanıcı 600 piksellik sürümü, geniş ekranlı masaüstü 1600 piksellik sürümü indirir. Kullandığınız altyapı bunu otomatik yapıyorsa harika; yapmıyorsa en azından görselleri yüklemeden önce makul bir boyuta indirin. Çoğu fotoğraf için web'de 200 KB'nin altı ulaşılabilir bir hedef.
Görsellere genişlik ve yükseklik değerlerini de verin. Bu yapılmazsa sayfa yüklenirken metin aşağı kayar ve kullanıcı yanlış yere dokunur. Google bunu Cumulative Layout Shift (CLS) olarak ölçer.
Lazy-load, yani ekranın altında kalan görselleri kullanıcı oraya kaydırana kadar yüklememek, artık tarayıcının kendi özelliği: görsele loading="lazy" eklemek yeterli. Ama bir istisnası var ve sık atlanıyor. Sayfanın en üstündeki kapak görseline lazy-load uygulamayın. Bu, LCP öğesinin geç yüklenmesine ve sayfanın daha yavaş ölçülmesine yol açar.
Dosya adı ve alt metin
Dosya adı küçük ama ücretsiz bir sinyal. IMG_2381.jpg yerine kadikoy-kuafor-sac-boyama.webp gibi, görseli anlatan, Türkçe karakter içermeyen ve kelimeleri tire ile ayıran bir ad verin. Türkçe karakterler bazı sunucularda bozuk adreslere yol açabiliyor, bu yüzden ş yerine s, ğ yerine g kullanmak daha güvenli.
Alt metin daha önemli. Google görselin ne gösterdiğini anlamak için çevresindeki metne ve alt metne bakar; ekran okuyucular da alt metni sesli okur. İyi alt metin görseli bir cümleyle ve doğal bir dille anlatır: “Kadıköy'deki salonumuzda balyaj uygulaması sonrası saç”. Anahtar kelimeleri art arda dizmek ise işe yaramaz ve erişilebilirliği bozar.
Tamamen dekoratif görsellerde alt metni boş bırakın. Ürün görsellerinde ürünün adını ve ayırt edici özelliğini yazın: “Meşe masif sehpa, 90x50 cm, doğal yağ cilalı”. Alt metnin erişilebilirlik tarafını erişilebilir web sitesi yazımızda daha ayrıntılı anlattık.
Stok fotoğraf mı gerçek fotoğraf mı?
Stok fotoğrafın yeri var: soyut bir kavramı anlatan blog kapağı ya da geçici bir yer tutucu olarak. Ama hizmetinizi, ekibinizi, mekânınızı ve işlerinizi gösteren her yerde gerçek fotoğraf kullanın.
Sebebi yalnızca güven değil. Aynı stok fotoğraf çok sayıda sitede kullanıldığı için sayfanıza özgü bir değer katması zor. Kendi çektiğiniz fotoğraf ise tektir. Bir mimarlık ofisinin tamamladığı projeleri gösteren görseller, Google Görseller'de o ofisin adını taşıyan bir giriş kapısı hâline gelebiliyor; mimarlık ofisi siteleri yazımızda bunu örnekledik.
Hangisini kullanırsanız kullanın, haklarına dikkat edin. Stok fotoğrafı lisans koşullarına uygun kullanın, internette bulduğunuz görselleri izinsiz yayınlamayın. Fotoğrafta tanınabilir kişiler varsa onların iznini de alın.
Gerçek fotoğraf için profesyonel çekim şart değil. Gün ışığında, temiz bir arka planla, güncel bir telefonla çekilmiş fotoğraflar birçok küçük işletme için yeterli. Tek kural: Yüklemeden önce boyutlandırın ve WebP'ye çevirin.
Sıkça Sorulan Sorular
Web sitesi görselleri kaç KB olmalı?
Kesin bir sınır yok, ama çoğu fotoğraf için 200 KB'nin altı ulaşılabilir bir hedef. Sayfanın en üstündeki büyük kapak görseli biraz daha büyük olabilir; WebP formatı ve doğru boyutlandırmayla genellikle bu aralıkta tutulabilir.
Alt metne anahtar kelime yazmak sıralamayı artırır mı?
Görseli doğal biçimde anlatan bir alt metin, içinde ilgili kelime geçiyorsa yardımcı olabilir. Anahtar kelimeleri art arda dizmek ise fayda sağlamaz, ekran okuyucu kullanıcıları için de metni anlamsız hâle getirir.
Blog yazıları genel bilgilendirme amaçlıdır; hukuki, mali veya teknik danışmanlık yerine geçmez.