Sayfanızı Ağırlaştıran Asıl Suçlu: Görseller

Bir web sayfasının toplam ağırlığına baktığınızda, HTML ve CSS genellikle küçük bir pay tutar. Asıl yükü görseller oluşturur — çoğu sitede sayfa ağırlığının yarısından fazlası.

İyi haber şu: Görsel optimizasyonu, SEO çalışmaları arasında en yüksek getirili ve en kolay uygulanabilir olanıdır. Doğru yapıldığında sayfa ağırlığını üçte birine indirmek olağandışı değildir.

Dört katmanlı optimizasyon

Görsel optimizasyonu tek bir işlem değil, dört ayrı kararın toplamıdır:

1. Format: Hangi dosya türü?
2. Boyut: Kaç piksel?
3. Sıkıştırma: Hangi kalite seviyesi?
4. Yükleme: Ne zaman indirilsin?

Bunlardan yalnızca birini yapmak sonucu sınırlı bırakır.

1. Format seçimi

Modern yaklaşım, tarayıcıya seçim şansı vermektir:

<picture>
  <source srcset="urun.avif" type="image/avif">
  <source srcset="urun.webp" type="image/webp">
  <img src="urun.jpg" alt="Siyah deri erkek ceket" width="800" height="1000">
</picture>

Tarayıcı desteklediği ilk formatı indirir; desteklemiyorsa JPEG'e düşer.

2. Doğru boyutta sunmak

En sık yapılan israf budur: 3000 piksel genişliğinde bir fotoğraf yüklenir, ekranda 400 piksel olarak gösterilir. Tarayıcı tüm dosyayı indirir, sonra küçültür.

Çözüm, cihaza göre farklı sürümler sunmaktır:

<img src="urun-800.jpg"
     srcset="urun-400.jpg 400w,
             urun-800.jpg 800w,
             urun-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Siyah deri erkek ceket"
     width="800" height="1000">

Böylece mobil kullanıcı 400 piksellik dosyayı, masaüstü kullanıcı 1600 pikseliki indirir.

width ve height neden zorunlu?

Bu iki özniteliği yazmak, tarayıcının görsel gelmeden önce yer ayırmasını sağlar. Yazılmazsa görsel yüklendiğinde içerik aşağı kayar — bu, CLS (düzen kayması) sorununun bir numaralı sebebidir.

Alternatif olarak CSS'te aspect-ratio tanımlayabilirsiniz.

3. Sıkıştırma

• Kayıplı sıkıştırma fotoğraflar için uygundur. Kalite değeri 75-85 aralığı, gözle fark edilmeyen kayıpla ciddi boyut kazancı sağlar.
• Kayıpsız sıkıştırma logo ve çizimler için tercih edilir.
• Meta veri temizliği: Fotoğraf makinesi bilgileri (EXIF) dosya boyutunu gereksiz artırır; yayın öncesi temizlenmelidir.

Otomasyon önemlidir: Optimizasyon, yükleme akışının bir parçası olmalıdır. Elle yapılan işlemler er ya da geç aksar.

4. Yükleme stratejisi

Lazy loading — ama doğru yerde

<!-- Ekran altındaki görseller -->
<img src="urun.jpg" loading="lazy" alt="...">

<!-- Hero / LCP görseli -->
<img src="hero.jpg" fetchpriority="high" alt="...">

Kritik uyarı: Ekranın üstündeki görsele loading="lazy" uygulamak, LCP'yi doğrudan kötüleştirir. Bu, sahada en sık rastlanan performans hatasıdır.

Öncelik verme

LCP öğeniz bir görselse, fetchpriority="high" ile önceliklendirin ve gerekiyorsa preload edin. Tarayıcı onu diğer kaynaklardan önce indirir.

Görsel SEO: aramadan trafik almak

Görsel optimizasyonu yalnızca hız meselesi değildir; görsel arama ciddi bir trafik kaynağıdır — özellikle e-ticaret, emlak, turizm ve yemek sektörlerinde.

Alt metin

Alt metin öncelikle erişilebilirlik içindir: ekran okuyucular görseli bu metinle tarif eder. SEO faydası ise bağlam sağlamasıdır.

<!-- Kötü -->
alt=""
alt="resim1"
alt="ceket ceket deri ceket siyah ceket ucuz ceket"

<!-- İyi -->
alt="Siyah deri erkek biker ceket, önden görünüm"

Kural: Görseli görmeyen birine tarif eder gibi yazın. Dekoratif görsellerde alt="" bırakmak doğrudur.

Dosya adı

IMG_4837.jpg yerine siyah-deri-erkek-ceket.jpg. Türkçe karakter kullanmayın, kelimeleri tire ile ayırın.

Görsel site haritası

Görsel aramadan ciddi trafik alan siteler için görsel site haritası, keşfi hızlandırır.

Yapılandırılmış veri

Ürün, tarif ve etkinlik şemalarında görsel alanını doldurmak, arama sonucunda görselin gösterilme olasılığını artırır.

Denetim listesi

1. Görseller WebP/AVIF formatında sunuluyor mu?
2. srcset ile cihaza uygun boyut veriliyor mu?
3. Tüm görsellerde width ve height var mı?
4. Ekran altı görsellerde lazy loading var mı?
5. Hero görselinde lazy loading yok mu?
6. LCP görseli önceliklendirilmiş mi?
7. Alt metinler açıklayıcı mı?
8. Dosya adları anlamlı mı?
9. EXIF verileri temizleniyor mu?
10. Optimizasyon otomatik mi çalışıyor?

Görseller neden sayfayı bu kadar yavaşlatır?

Bir web sayfasının toplam boyutunun büyük çoğunluğu, çoğu zaman görsellerden oluşur. Metin çok az yer kaplar; asıl ağırlık, optimize edilmemiş fotoğraflar ve grafiklerden gelir. Doğrudan bir fotoğraf makinesinden veya telefondan alınıp hiç işlenmeden sayfaya konan bir görsel, birkaç megabayt boyutunda olabilir; oysa aynı görsel doğru optimize edildiğinde çok daha küçük bir boyuta iner ve gözle görülür bir kalite kaybı olmaz. Bir sayfada bu tür birkaç ağır görsel bir araya geldiğinde, sayfanın yüklenmesi dramatik biçimde yavaşlar.

Bu yavaşlığın etkisi, özellikle mobil kullanıcılarda ve sınırlı bağlantılarda belirgindir. Ağır görseller yüklenirken kullanıcı bekler, sayfa parça parça belirir ve deneyim bozulur. Görsel optimizasyonu, bu yüzden sayfa hızı iyileştirmesinin en yüksek getirili adımlarından biridir; çünkü en büyük ağırlık kaynağını hedef alır ve nispeten kolay uygulanır.

Modern görsel formatları

Görsel optimizasyonunun en etkili adımlarından biri, doğru formatı seçmektir. Geleneksel formatlar hâlâ yaygın olsa da, modern görsel formatları aynı kaliteyi çok daha küçük dosya boyutlarında sunar. Bu yeni nesil formatlar, gelişmiş sıkıştırma algoritmaları sayesinde görselleri belirgin biçimde küçültürken kaliteyi korur. Modern bir formata geçmek, tek başına sayfa ağırlığında ciddi bir azalma sağlayabilir.

Modern formatları kullanırken dikkat edilmesi gereken nokta, tüm tarayıcıların her formatı desteklemeyebileceğidir. Bu yüzden en iyi uygulama, modern formatı sunmakla birlikte, desteklemeyen tarayıcılar için geleneksel bir alternatif de sağlamaktır. Bu yaklaşım, modern tarayıcılarda hız avantajından yararlanırken hiçbir kullanıcının görselleri göremeden kalmamasını güvence altına alır.

Duyarlı görseller

Bir görseli tüm cihazlara aynı boyutta sunmak, yaygın ve maliyetli bir hatadır. Büyük bir masaüstü ekranı için hazırlanmış yüksek çözünürlüklü bir görsel, küçük bir telefon ekranında gereksiz yere büyük ve ağırdır; kullanıcı, ekranında görüntüleyemeyeceği kadar büyük bir dosyayı indirmek zorunda kalır. Duyarlı görseller, tarayıcının kullanıcının ekran boyutuna uygun görsel sürümünü seçmesini sağlayarak bu israfı ortadan kaldırır.

Bu teknik, her görselin farklı boyutlardaki sürümlerini hazırlamayı ve tarayıcıya hangi durumda hangisini kullanacağını bildirmeyi gerektirir. Sonuç, mobil kullanıcının küçük ve hafif bir sürümü, masaüstü kullanıcının ise tam çözünürlüklü sürümü alması olur. Duyarlı görseller, mobil öncelikli çağda sayfa hızını iyileştirmenin en etkili ama sık atlanan yöntemlerinden biridir.

Tembel yükleme

Bir sayfada, kullanıcının ilk anda gördüğü ekranın çok altında kalan görseller de bulunur. Tembel yükleme (lazy loading), bu görsellerin sayfa ilk açıldığında değil, kullanıcı onlara yaklaştıkça yüklenmesini sağlar. Böylece sayfanın ilk yüklenmesi, yalnızca görünür alandaki içerikle sınırlı kalır ve çok daha hızlı gerçekleşir; alttaki görseller ise kullanıcı kaydırdıkça devreye girer.

Tembel yükleme, özellikle çok sayıda görsel içeren uzun sayfalarda büyük fark yaratır. Ancak dikkatli uygulanmalıdır: kullanıcının ilk anda gördüğü, ekranın üst kısmındaki kritik görseller tembel yüklemeye tabi tutulmamalıdır, çünkü bunların anında görünmesi gerekir. Doğru uygulanan tembel yükleme, ilk yükleme hızını iyileştirirken kullanıcı deneyimini bozmadan çalışır.

Görsel boyutları ve düzen kayması

Görsellerle ilgili sık gözden kaçan bir sorun, düzen kaymasıdır. Bir görselin boyutları kodda belirtilmemişse, tarayıcı görsel yüklenene kadar onun ne kadar yer kaplayacağını bilemez; görsel yüklendiğinde sayfa aniden kayar ve altındaki içerik yerinden oynar. Bu ani kayma, kullanıcının okuduğu yeri kaybetmesine veya yanlış yere tıklamasına yol açar ve Google'ın deneyim ölçütlerinden biri olan görsel kararlılığı olumsuz etkiler.

Bu sorunun çözümü basittir: her görselin genişlik ve yükseklik bilgisi kodda açıkça belirtilmelidir. Böylece tarayıcı, görsel yüklenmeden önce onun için doğru boşluğu ayırır ve yükleme tamamlandığında hiçbir kayma olmaz. Bu küçük ayrıntı, hem kullanıcı deneyimini hem Core Web Vitals puanını doğrudan iyileştirir.

Alt metin: erişilebilirlik ve SEO

Görsellerin alt metni (alternatif metin), hem erişilebilirlik hem SEO açısından değerlidir. Alt metin, görseli göremeyen kullanıcılar — örneğin ekran okuyucu kullananlar — için görselin ne olduğunu açıklar; bu, erişilebilirliğin temel bir gereğidir. Aynı zamanda arama motorları da alt metni okuyarak görselin içeriğini anlar; bu, görsel aramada görünürlük kazanmanın ve sayfanın konusal alakasını güçlendirmenin bir yoludur.

İyi bir alt metin, görseli doğru ve açıklayıcı biçimde tanımlar; anahtar kelime doldurmaya çalışmak yerine, görselin gerçekte ne gösterdiğini net biçimde ifade eder. Her anlamlı görselin açıklayıcı bir alt metni olmalı; yalnızca dekoratif görseller için alt metin boş bırakılabilir. Alt metin, küçük bir ayrıntı gibi görünse de, erişilebilirlik ve görsel SEO'nun temel bir unsurudur.

Sık sorulan sorular

Görsellerimi ne kadar sıkıştırmalıyım? Gözle görülür kalite kaybı olmadan mümkün olan en küçük boyuta indirmek hedeflenir. Çoğu görsel, kalitesinden ödün vermeden belirgin biçimde küçültülebilir; doğru denge, her görsel için gözle test edilerek bulunur.

Tembel yükleme SEO'ya zarar verir mi? Doğru uygulandığında hayır. Modern arama motorları tembel yüklenen görselleri anlayabilir. Önemli olan, görsellerin gerektiğinde yüklenmesini sağlamak ve kritik üst görselleri tembel yüklemeye tabi tutmamaktır.

Her görsele alt metin şart mı? Anlamlı, içerik taşıyan her görsel için evet. Yalnızca tamamen dekoratif, bilgi taşımayan görsellerde alt metin boş bırakılabilir; bu, ekran okuyucuların onları atlamasını sağlar.

Görsel optimizasyonu sıralamamı artırır mı? Doğrudan ve dolaylı olarak katkı sağlar; sayfa hızını ve Core Web Vitals'ı iyileştirir, görsel aramada görünürlük kazandırır ve kullanıcı deneyimini geliştirir. Bunların tümü arama performansına olumlu yansır.

Görsel dağıtımı ve önbellekleme

Görsel optimizasyonu yalnızca dosyaları küçültmekle bitmez; bu görsellerin kullanıcılara nasıl ulaştırıldığı da önemlidir. Görselleri bir içerik dağıtım ağı üzerinden sunmak, onları kullanıcıya coğrafi olarak en yakın sunucudan ileterek yükleme süresini kısaltır. Özellikle çok sayıda görsel içeren sitelerde, bu dağıtım yükün ana sunucudan alınmasını ve görsellerin çok daha hızlı görünmesini sağlar. Görsel dağıtımı, optimizasyonun tamamlayıcı bir katmanıdır.

Önbellekleme de görsel performansının önemli bir parçasıdır. Nadiren değişen görseller uzun süre tarayıcı önbelleğinde tutulacak biçimde yapılandırıldığında, tekrar eden ziyaretlerde bu görseller yeniden indirilmez; kullanıcı sayfaya döndüğünde görseller anında görünür. Doğru önbellekleme kuralları, hem ilk yükleme deneyimini hem tekrar ziyaretlerdeki hızı iyileştirir.

Görsel site haritası ile indeksleme

Görsellerinizin arama motorları tarafından keşfedilmesini ve görsel aramada görünmesini istiyorsanız, bir görsel site haritası değerli bir araçtır. Standart site haritaları yalnızca sayfa adreslerini içerir; görsel site haritası ise sayfalarınızdaki görsellerin varlığını ve bağlamını arama motoruna doğrudan bildirir. Bu, özellikle görsel aramanın trafik getirdiği e-ticaret, portföy ve görsel ağırlıklı siteler için önemli bir görünürlük katmanı açar.

Görsellerin indekslenmesi, aynı zamanda onların erişilebilir ve doğru biçimde sunulmasına da bağlıdır. Robots.txt ile yanlışlıkla engellenmiş görsel klasörleri, görsellerin hiç indekslenmemesine yol açar. Görsel SEO'dan yararlanmak isteyen siteler, görsellerinin taranabilir olduğundan, açıklayıcı alt metinlere sahip olduğundan ve mümkünse bir görsel site haritasında yer aldığından emin olmalıdır.

Otomatik görsel optimizasyonu

Görsel optimizasyonunu her görsel için elle yapmak, büyük ve sık güncellenen sitelerde sürdürülebilir değildir. Neyse ki bu süreç büyük ölçüde otomatikleştirilebilir. Modern içerik yönetim sistemleri ve araçlar, yüklenen her görseli otomatik olarak sıkıştıran, farklı boyutlarda sürümler üreten ve modern formatlara dönüştüren çözümler sunar. Bu otomasyon, her yeni görselin insan müdahalesi olmadan optimize edilmiş biçimde sunulmasını sağlar.

Otomatik bir optimizasyon iş akışı kurmak, görsel performansını kalıcı hale getirir. İçerik üreticileri görselleri yüklerken optimizasyonu düşünmek zorunda kalmaz; sistem bunu arka planda halleder. Bu, hem tutarlılık sağlar hem de zamanla optimize edilmemiş görsellerin siteye sızmasını önler. Otomasyon, görsel optimizasyonunu tek seferlik bir çaba olmaktan çıkarıp sürekli bir standarda dönüştürür.

Görsel optimizasyonunun bütünsel değeri

Görsel optimizasyonu, sayfa performansına yaptığı katkının ötesinde, sitenin birçok boyutuna dokunur. Sayfa hızını ve Core Web Vitals ölçütlerini iyileştirir, çünkü en büyük ağırlık kaynağını hedef alır. Kullanıcı deneyimini geliştirir, çünkü sayfalar daha hızlı ve kararlı yüklenir. Erişilebilirliği artırır, çünkü alt metinler görme engelli kullanıcılara hizmet eder. Ve görsel aramada görünürlük kazandırarak ek bir trafik kaynağı açar.

Bu bütünsel değer, görsel optimizasyonunu sayfa hızı çalışmasının en yüksek getirili adımlarından biri yapar. Nispeten kolay uygulanan ama etkisi geniş olan bu çalışma, hem kullanıcılar hem arama motorları için sitenin genel kalitesini yükseltir. Görseller, doğru yönetildiğinde bir yük olmaktan çıkıp sitenin güçlü bir varlığına dönüşür.

Görsel optimizasyonuna nereden başlamalı?

Görsel optimizasyonuna girişmenin pratik bir sırası vardır. İlk adım, sitenizdeki en ağır görselleri tespit etmektir; bir hız test aracı, sayfanın hangi görsellerinin en çok yer kapladığını gösterir ve bu, önceliklendirme için başlangıç noktasıdır. İkinci adım, bu ağır görselleri doğru boyuta indirmek, modern bir formata dönüştürmek ve kaliteden ödün vermeden sıkıştırmaktır. Üçüncü adım, tembel yükleme ve duyarlı görseller gibi teknikleri uygulamaktır.

Son adım, bu süreci otomatikleştirerek her yeni görselin baştan optimize edilmiş biçimde yüklenmesini sağlamaktır. Bu adımları sırayla uygulamak, çabayı en çok fark yaratan yerlere yoğunlaştırır ve sayfa ağırlığında en büyük azalmayı en hızlı biçimde elde etmenizi sağlar. Görsel optimizasyonu, düzenli bir alışkanlığa dönüştüğünde, sitenin hızını kalıcı olarak korur.

Görsel ve metin dengesi

Görsel optimizasyonu çoğu zaman teknik bir mesele olarak ele alınır, ama görsellerin içerik içindeki rolü de önemlidir. Görseller, bir metni zenginleştirmek, karmaşık kavramları açıklamak ve okuyucunun ilgisini canlı tutmak için değerlidir; ancak her görsel gerçek bir amaca hizmet etmelidir. Yalnızca sayfayı doldurmak için eklenen, hiçbir bilgi taşımayan dekoratif görseller, hem sayfayı ağırlaştırır hem de kullanıcıya değer katmaz. İyi bir denge, her görselin bir işlevi olduğu, metni gerçekten desteklediği bir yaklaşımdır.

Bu denge kurulduğunda, görseller içeriğin gücünü artırır. Bir nasıl-yapılır rehberindeki adım adım ekran görüntüleri, bir ürün sayfasındaki net ürün fotoğrafları veya bir veriyi anlatan bir grafik, hem kullanıcıya değer katar hem de içeriğin anlaşılırlığını yükseltir. Görseller, optimize edildiğinde ve amaçlı kullanıldığında, sayfanın hem performansına hem değerine katkıda bulunan güçlü unsurlardır. Amaç, görselleri hem hafif hem anlamlı tutarak bu iki değeri bir araya getirmektir.

Özet

Görsel optimizasyonu, teknik SEO'nun en görünür sonuç veren alanıdır: sayfa ağırlığı düşer, LCP iyileşir, CLS azalır ve görsel aramadan ek trafik gelir.

Dört karara odaklanın — format, boyut, sıkıştırma, yükleme zamanı — ve bu işlemleri otomatikleştirin. Elle yapılan optimizasyon sürdürülebilir değildir.

Sayfa ağırlığınızı ve görsel performansınızı ölçmemizi isterseniz ücretsiz araçlarımızı kullanabilir veya ücretsiz analiz talep edebilirsiniz.