Web Sitesi İçin Görsel Optimizasyonu
· 8 dk okuma
Bir web sayfasının yükünün büyük kısmı çoğu zaman görsellerden gelir; doğru boyutlandırılmamış, sıkıştırılmamış görseller sayfayı yavaşlatır, ziyaretçiyi kaybettirir ve arama motorlarının hız değerlendirmesini olumsuz etkiler.
Bu rehberde görselleri doğru boyutta sunmayı, WebP ve AVIF gibi modern formatları, sıkıştırmayı, tembel yükleme (lazy loading) ve sayfa sıçramasını önleyen genişlik/yükseklik etiketlerini en yalın haliyle anlatıyoruz. Hiçbiri karmaşık bir altyapı gerektirmez; çoğu, mevcut görsellerinizi birkaç adımda yeniden hazırlamaktan ibarettir.
AraçWebP Sıkıştır →Görselleri web için küçük WebP dosyalarına sıkıştırın.Görseli, gösterileceği boyutta sunmak
En sık yapılan hata, 3000 piksel genişliğindeki bir fotoğrafı, sayfada 600 piksel genişliğinde gösterilecek bir alana CSS ile küçülterek yerleştirmektir. Tarayıcı yine de orijinal büyük dosyayı indirmek zorunda kalır, bu da gereksiz yere zaman kaybettirir. Görsel ekranda küçük görünse bile, arka planda indirilen veri miktarı hiç değişmez.
Doğru yaklaşım, görseli gösterileceği en büyük ölçüye yeniden boyutlandırıp öyle yüklemektir. Farklı ekran boyutları için birden fazla sürüm hazırlamak isteyenler, mobil ve masaüstü için ayrı ayrı boyutlandırılmış dosyalar üretebilir.
WebP ve AVIF ile format kazancı
Aynı görsel kalitede WebP, JPG'ye göre belirgin şekilde daha küçük dosya üretir; AVIF ise çoğu zaman WebP'den de küçük sonuç verir. Mevcut JPG ve PNG görsellerinizi JPG'den WebP'ye veya PNG'den WebP'ye çevirerek sayfa ağırlığını hızlıca azaltabilirsiniz; daha da küçük dosya istiyorsanız JPG'den AVIF'e dönüşümünü deneyebilirsiniz. Sitenizdeki tüm görselleri tek seferde değil, önce en çok ziyaret edilen sayfalardaki görsellerden başlayarak dönüştürmek, emeğinizin karşılığını daha hızlı almanızı sağlar.
Eski tarayıcı desteği önemliyse, modern formatı birincil kaynak olarak sunup JPG'yi yedek olarak tutan bir yapı kurulabilir; bu, çoğu modern web altyapısında hazır olarak desteklenir.
Sıkıştırma: görünmeyen ama hissedilen kazanç
Format seçiminden bağımsız olarak her görsel bir miktar daha sıkıştırılabilir. WebP sıkıştırma veya genel görsel sıkıştırma araçlarıyla kaliteyi gözle kontrol ederek dosya boyutunu düşürebilirsiniz. Küçük bir kalite kaybıyla elde edilen dosya boyutu tasarrufu, sitenizdeki onlarca hatta yüzlerce görselde toplandığında sayfa hızına belirgin bir katkı sağlar.
Sayfanın üst kısmında hemen görünen görsellerde kaliteyi biraz daha yüksek tutmak, sayfanın alt kısımlarındaki daha az kritik görsellerde ise daha agresif sıkıştırmak, hız ile görsel kalite arasında makul bir denge kurar.
Tembel yükleme (lazy loading) ne işe yarar?
Tembel yükleme, kullanıcı sayfayı aşağı kaydırana kadar henüz görünmeyen görsellerin indirilmesini erteleyen bir tekniktir. Bu sayede sayfa ilk açıldığında yalnızca gerçekten görünen görseller indirilir, sayfa daha hızlı kullanılabilir hale gelir. Uzun bir blog yazısında veya birçok ürün içeren bir kategori sayfasında bu fark, sayfanın ilk açılış hissini belirgin şekilde iyileştirir.
Ancak sayfa açılır açılmaz görünen, örneğin bir kahraman (hero) görseli için tembel yüklemeyi kapalı tutmak gerekir; aksi halde o görselin görünmesi de gereksiz yere gecikebilir.
Genişlik ve yükseklik etiketleri: sayfa sıçramasını önlemek
Bir görsel yüklenmeden önce tarayıcı onun ne kadar yer kaplayacağını bilmiyorsa, görsel yüklendiği anda etrafındaki metin ve öğeler aşağı doğru kayar; bu ani kaymaya sayfa sıçraması (layout shift) denir ve kullanıcı deneyimini bozar. Tam bir düğmeye tıklayacakken sayfanın kaymasıyla başka bir yere tıklamak, birçok kullanıcının yakından bildiği can sıkıcı bir deneyimdir.
Her görsel etiketine gerçek genişlik ve yükseklik değerlerini (piksel cinsinden) eklemek, tarayıcının görsel için önceden yer ayırmasını sağlar ve bu sıçramayı önler. Bu, görseli küçültmekten bağımsız, ama en az onun kadar önemli bir alışkanlıktır.
Responsive görseller: aynı fotoğrafın birden fazla boyutu
Masaüstünde tam genişlikte görünen bir kahraman görseli, mobil ekranda çok daha küçük bir alanda gösterilir; buna rağmen aynı büyük dosyayı her cihaza göndermek, mobil ziyaretçilere gereksiz veri yükü bindirir. Modern web altyapılarının çoğu, aynı görselin birkaç farklı boyutunu otomatik üretip cihazın ekran genişliğine göre uygun olanı sunabilir.
Bu altyapıya sahip değilseniz bile, en azından mobil ve masaüstü için iki ayrı boyutlandırılmış sürüm hazırlamak, tek bir dev dosyayı her yerde kullanmaktan çok daha hızlı bir deneyim sağlar. Resim boyutlandırma aracıyla aynı görselin farklı genişliklerde birkaç kopyasını hızlıca çıkarabilirsiniz.
Core Web Vitals ve LCP'yi sade bir dille anlamak
Arama motorları, bir sayfanın kullanıcı deneyimini ölçmek için birkaç teknik ölçüt kullanır; bunlardan LCP (Largest Contentful Paint), sayfadaki en büyük görünür öğenin, çoğunlukla bir görselin, ne kadar sürede tam olarak göründüğünü ölçer. Büyük, sıkıştırılmamış bir kahraman görseli LCP'yi doğrudan yavaşlatır; ziyaretçi sayfanın ana içeriğini görene kadar geçen süre uzar.
Bu görseli doğru boyutta, modern bir formatta ve makul bir sıkıştırma ile sunmak, ölçüte dair teknik detaylarla uğraşmadan bile LCP'yi iyileştirmenin en doğrudan yoludur.
- Görseli gösterileceği piksel boyutuna küçültün
- Mümkünse WebP veya AVIF kullanın, JPG'yi yedek tutun
- Kaliteyi gözle kontrol ederek sıkıştırın
- Görünür alanın dışındaki görsellerde tembel yüklemeyi açın
- Her görsele genişlik ve yükseklik değerlerini ekleyin
Sıkça sorulan sorular
Hangi format en hızlı sayfa sağlar?
Genellikle AVIF en küçük dosyayı verir, WebP onu izler; ikisi de JPG ve PNG'den belirgin şekilde daha küçüktür ve modern tarayıcıların büyük kısmında desteklenir. Kesin farkı görmek için kendi görsellerinizi her iki formatta üretip karşılaştırmanız en sağlıklısıdır.
Tüm görsellerde tembel yükleme kullanmalı mıyım?
Hayır, sayfa açılır açılmaz görünen görsellerde (örneğin kahraman görseli) tembel yükleme kapalı tutulmalı; yalnızca kaydırıldıkça görünen görsellerde kullanılmalıdır. Bunun tersi bir uygulama, sayfanın en önemli görselinin gecikmeli görünmesine yol açar.
Görsel boyutunu küçültmek SEO'yu doğrudan etkiler mi?
Dosya boyutu tek başına bir sıralama etkeni değildir, ama sayfa hızını ve kullanıcı deneyimini iyileştirerek dolaylı olarak olumlu katkı sağlar; yavaş açılan sayfalar ziyaretçiyi de arama motorunu da olumsuz etkiler ve zamanla fark yaratır.
Genişlik/yükseklik etiketi eklemek görselin ekrandaki boyutunu mu değiştirir?
Hayır, bu etiketler tarayıcıya yer ayırması için bilgi verir; gerçek görüntülenen boyut yine CSS ile kontrol edilir. Bu iki mekanizma birlikte çalışır, birbirinin yerine geçmez.