Bir web sitesindeki görseller, kullanıcıya güven veren en görünür unsurlardan biri olsa da doğru optimize edilmediğinde sitenin en büyük performans sorununa dönüşüyor. Projelerde en sık karşılaştığımız durum, tasarımı güçlü ama sıkıştırılmamış yüksek çözünürlüklü fotoğraflarla dolu bir sitenin mobilde saniyelerce yüklenmesi. Bu yazıda web sitesindeki görsellerin hem kullanıcı deneyimini hem de arama motoru görünürlüğünü nasıl etkilediğini ve doğru optimizasyonun nasıl yapılması gerektiğini anlatıyoruz.
Görsel Ağırlığı Sayfa Hızını Nasıl Etkiliyor?
Bir sayfanın toplam veri boyutunun büyük kısmı çoğu zaman görsellerden oluşuyor. Optimize edilmemiş bir fotoğraf birkaç megabayta ulaşabiliyor ve bu tek görsel, sayfanın mobil ağlarda yüklenme süresini ciddi ölçüde uzatıyor. Teknik incelemelerde ilk kontrol ettiğimiz nokta, sayfadaki en büyük görselin (genellikle kahraman/hero görseli) dosya boyutu; bu görsel Core Web Vitals’ın en kritik metriklerinden biri olan LCP’yi (Largest Contentful Paint) doğrudan etkiliyor. Bu ilişkiyi web sitesi hızı ve Core Web Vitals yazımızda daha geniş kapsamda ele almıştık.
Doğru Dosya Formatı Seçimi
Her görsel formatı aynı amaca hizmet etmiyor. Format seçimi, hem dosya boyutunu hem de görsel kalitesini doğrudan etkiliyor:
| Format | Ne Zaman Kullanılmalı |
|---|---|
| WebP | Genel kullanım için; JPEG’e göre %25-35 daha küçük dosya boyutu |
| JPEG | Fotoğraf ağırlıklı içerikler, WebP desteklenmediğinde yedek format |
| PNG | Şeffaf arka planlı logo ve ikonlar |
| SVG | Logo, ikon gibi vektörel grafikler; her çözünürlükte net kalır |
Saha tecrübemize göre, sitesini kendi yönetmeye çalışan işletmelerin en sık yaptığı hata, telefonla çekilen orijinal boyuttaki fotoğrafı hiç sıkıştırmadan doğrudan siteye yüklemesi. Bu tek adım bile sayfa hızını yarı yarıya düşürebiliyor.
Alt Metin: Sadece Erişilebilirlik Değil, SEO Sinyali
Alt metin (alt text), görme engelli kullanıcılar için ekran okuyucuların görseli tanımlamasını sağlarken aynı zamanda Google’a görselin içeriği hakkında bilgi veriyor. Ancak burada sık yapılan bir hata var: anahtar kelime doldurma amacıyla yazılan, gerçek içerikle ilgisi olmayan alt metinler. Doğru yaklaşım, görseli gerçekten tarif eden, doğal bir cümle kurmak. Örneğin “eskişehir web tasarım eskişehir web tasarım firması” yerine “Eskişehir’de kurumsal bir ofiste web tasarım toplantısı” gibi açıklayıcı bir ifade hem kullanıcıya hem arama motoruna daha fazla değer sağlıyor. Bu yaklaşım, Entity SEO yazımızda anlattığımız “Google’ın içeriği anlaması” prensibiyle örtüşüyor.
Dosya Adlandırma ve Görsel SEO’nun Gözden Kaçan Detayı
Yüklenen görselin dosya adı da bir SEO sinyali taşıyor. “IMG_2847.jpg” gibi otomatik oluşturulan bir dosya adı Google’a hiçbir bilgi vermezken, “eskisehir-web-tasarim-ofis.jpg” gibi açıklayıcı bir dosya adı görselin bağlamını netleştiriyor. Bu küçük detay tek başına büyük bir etki yaratmasa da, sitedeki tüm görsellerde tutarlı şekilde uygulandığında toplam SEO performansına katkı sağlıyor.
Mobil Görsel Deneyimi Neden Farklı Ele Alınmalı?
Masaüstünde iyi görünen bir görsel düzeni, mobilde farklı sorunlar yaratabiliyor. Responsive görsel etiketleri (srcset) kullanılmadığında, mobil kullanıcıya da masaüstü boyutundaki büyük dosya gönderiliyor ve bu durum mobil kullanıcı deneyimini ciddi şekilde etkiliyor. Bu konuyu mobil uyumlu web tasarım yazımızda daha kapsamlı ele almıştık. Doğru yapılandırılmış bir sistem, cihaza göre uygun boyuttaki görseli otomatik olarak sunuyor.
Görsel Optimizasyonu Bir Kerelik İşlem Değil
Web sitesine düzenli olarak yeni içerik ve görsel eklendikçe, optimizasyon sürecinin de sürekli olması gerekiyor. Bu yaklaşım, Eskişehir web tasarım projelerinde yayın öncesinde uyguladığımız standart bir kontrol adımı; her görsel yayına alınmadan önce format, boyut ve alt metin açısından denetleniyor. Bu disiplin, sitenin zamanla “ağırlaşmasını” ve performans kaybetmesini önlüyor.
Sık Sorulan Sorular
Görselleri sıkıştırmak kalite kaybına yol açar mı?
Doğru sıkıştırma oranında (genellikle %70-80 kalite) gözle fark edilebilir bir kayıp olmadan dosya boyutu ciddi şekilde küçültülebiliyor.
WordPress otomatik olarak görselleri optimize ediyor mu?
Temel bir yeniden boyutlandırma yapıyor ancak format dönüşümü ve gelişmiş sıkıştırma için ek bir optimizasyon aracı veya eklenti gerekiyor.
Kaç görsel bir sayfayı yavaşlatmaya başlar?
Sayı tek başına belirleyici değil; asıl önemli olan toplam dosya boyutu. Doğru optimize edilmiş 10 görsel, optimize edilmemiş 2 görselden daha hafif olabiliyor.
Görsel optimizasyonu, gözle görülür bir tasarım detayı olmasa da sitenin hızını ve arama motoru görünürlüğünü doğrudan etkileyen teknik bir temel. Farklı ajansların bu konudaki yaklaşımlarını karşılaştırmak isteyenler bu içeriğe de göz atabilir.