Web Sitesi Görsel Optimizasyonu Nasıl Yapılır? Hız ve SEO İçin Görsel Ayarları

Görsel optimizasyonu, bir web sitesinde en hızlı sonuç veren teknik işlerden biridir. 2012'den beri müşteri sitelerini incelerken en sık gördüğüm tablo şudur: tasarım güzel, içerik iyi, ama ana sayfada telefondan çekilmiş birkaç megabaytlık fotoğraflar duruyor. Bu yazıda format seçiminden dosya adına, srcset ayarından görsel sitemap'e kadar kendi uyguladığım adımları sırayla anlatıyorum.

Web sitesi görsel optimizasyonu nedir ve neden önemlidir?

Görsel optimizasyonu, sitedeki resimleri kaliteyi gözle görülür biçimde düşürmeden en küçük dosya boyutuna, doğru ölçüye ve doğru formata getirme işidir. Aynı zamanda alt metin, dosya adı ve sitemap gibi ayarlarla görselleri arama motorunun anlayacağı hale getirmeyi kapsar. Kısacası hem hız hem SEO için yaptığınız ortak bir düzenlemedir.

Bu işin önemi basit bir gerçekten gelir: çoğu sayfada en ağır parça metin değil, görseldir. Dolayısıyla sayfa ağırlığını azaltmak istediğinizde ilk bakacağınız yer genellikle resimlerdir. Ben bir siteyi denetlerken önce en büyük on dosyayı listeliyorum; çoğu zaman bu listenin büyük kısmı fotoğraf ve banner çıkıyor.

Öte yandan görseller yalnız hız meselesi değildir. Google Görseller üzerinden gelen trafik, özellikle ürün, tarif, mimari ve dekorasyon gibi alanlarda ciddi bir kanal olabilir. Ayrıca iyi yazılmış alt metin, ekran okuyucu kullanan ziyaretçilerin sayfayı anlamasını sağlar. Yani aynı işlem üç ayrı kazanım getirir.

Görseller site hızını nasıl etkiler?

Tarayıcı bir sayfayı açarken her görseli ayrı ayrı indirir. Dosya ne kadar büyükse indirme o kadar uzun sürer, özellikle mobil bağlantıda. Üstelik sayfanın en büyük görünür öğesi çoğu zaman bir hero görseli ya da ürün fotoğrafıdır. Bu nedenle o tek dosya, ziyaretçinin sayfayı "açıldı" diye algıladığı anı doğrudan belirler.

Hızın sıralamaya ve satışa etkisini ayrıca uzun uzun anlattığım için burada tekrar etmiyorum; genel çerçeve için site hızının SEO üzerindeki etkisini anlattığım yazıya bakabilirsiniz. Bu yazıda yalnız görsel tarafındaki ayarlara odaklanıyorum.

Pratikte gördüğüm en yaygın hatalar şunlardır:

• 4000 piksel genişliğinde bir fotoğrafı 400 piksellik kutuda göstermek.
• Fotoğrafları PNG olarak kaydetmek ve dosyayı gereksiz yere şişirmek.
• Aynı görseli mobil ve masaüstü için tek boyutta sunmak.
• Görsele genişlik ve yükseklik vermemek, sayfanın kaymasına yol açmak.
• Eklenti kurup ayarlarını hiç kontrol etmemek.

Bu listenin her maddesi, aşağıdaki başlıklarda tek tek karşılık buluyor.

Hangi görsel formatını seçmelisiniz?

Format seçimi, görsel optimizasyonunun temelidir. Google, arama sonuçlarında BMP, GIF, JPEG, PNG, WebP, SVG ve AVIF formatlarını desteklediğini belgelerinde açıkça yazıyor. Yani modern formatlara geçmek, görsellerin aramada görünmesini engellemez. Asıl soru, hangi görsel türü için hangi formatın mantıklı olduğudur.

Benim varsayılan tercihim fotoğraflarda WebP, logo ve ikonlarda SVG oluyor. Ancak yüksek trafikli ürün sayfalarında AVIF'i de deniyorum. Sonuçta karar, kendi görselleriniz üzerinde yapacağınız karşılaştırmaya dayanmalı.

WebP ve AVIF gerçekten ne kadar fark yaratır?

Bu soruya kaynaklı bir rakamla başlamak istiyorum. Google'ın WebP dokümantasyonuna göre kayıpsız WebP dosyaları PNG'ye kıyasla yüzde 26 daha küçüktür. Kayıplı WebP ise eşdeğer SSIM kalitesinde JPEG'den yüzde 25 ile 34 arasında daha küçük çıkar. Bu, aynı görüntüyü belirgin biçimde daha hafif sunabileceğiniz anlamına gelir.

AVIF için sabit bir oran vermiyorum, çünkü sonuç görselin içeriğine ve kodlayıcı ayarına göre çok değişiyor. Saha tecrübeme göre fotoğraflarda AVIF çoğu zaman WebP'den de küçük çıkıyor; ancak bu bir garanti değil. Bazı grafiklerde ve keskin metinli görsellerde fark küçülüyor, hatta tersine dönebiliyor.

Bu nedenle size önerim şu: sitenizdeki tipik beş görseli seçin. Her birini JPEG, WebP ve AVIF olarak aynı görsel kalitede kaydedin. Ardından dosya boyutlarını bir tabloya yazın ve görüntüleri yan yana ekranda karşılaştırın. Böylece genel iddialar yerine kendi içeriğinize ait gerçek bir sonuç elde edersiniz.

Öte yandan formatı değiştirmek tek başına yetmez. Yanlış ölçüdeki bir görseli WebP'ye çevirseniz de tarayıcıya gereğinden fazla piksel göndermeye devam edersiniz. Dolayısıyla format, boyutlandırma ve sıkıştırma birlikte ele alınması gereken üç ayardır.

Eski tarayıcılar için yedek formatı nasıl sunarsınız?

Modern formatlara geçerken en güvenli yol, HTML'deki picture öğesini kullanmaktır. Bu yapıda önce AVIF, sonra WebP kaynağını tanımlarsınız; en sona ise JPEG kullanan klasik img etiketini koyarsınız. Tarayıcı desteklediği ilk formatı seçer, desteklemiyorsa yedeğe düşer.

Örneğin bir ürün fotoğrafı için üç dosya üretirsiniz: urun.avif, urun.webp ve urun.jpg. Ardından picture içinde bu sırayla listelersiniz. Böylece güncel tarayıcılar en küçük dosyayı alır, eski cihazlar ise görseli yine sorunsuz görür.

Google da bu konuda net bir uyarı yapıyor: bazı tarayıcılar ve tarayıcı botları gelişmiş öznitelikleri anlamayabilir, bu yüzden img etiketinde her zaman bir yedek src bulunmalıdır. Yani picture kullanıyor olsanız bile en içteki img etiketini boş bırakmayın.

WordPress, Shopify veya benzeri bir altyapı kullanıyorsanız bu işi çoğu zaman sistem ya da bir CDN sizin yerinize yapar. Ancak kurulumdan sonra sayfanın kaynak kodunu açıp gerçekten hangi formatın gittiğini kontrol edin. Bazı eklentiler dönüştürme yapar ama çıktıyı yalnız belirli sayfalarda uygular.

Görselleri hangi boyutlarda yüklemelisiniz?

Boyutlandırmanın kuralı basittir: görseli, ekranda gösterileceği en büyük ölçüden çok daha büyük yüklemeyin. Örneğin blog içeriği alanınız masaüstünde 800 piksel genişlikteyse, 5000 piksellik bir fotoğrafı olduğu gibi yüklemek gereksiz bir yüktür. Yüksek çözünürlüklü ekranlar için bu ölçünün yaklaşık iki katını hazırlamak genellikle yeterlidir.

Ben her projede önce bir görsel ölçü listesi çıkarıyorum. Bu liste, sitedeki her görsel alanının kaç piksel olduğunu gösteriyor. Böylece içerik ekibi fotoğraf yüklerken tahmin yürütmüyor.

1. Tasarımdaki her görsel alanını belirleyin: hero, kart, ürün, blog içi, logo.
2. Her alanın masaüstü ve mobildeki gerçek genişliğini ölçün.
3. Yüksek yoğunluklu ekranlar için bu ölçünün iki katını üst sınır kabul edin.
4. En-boy oranını sabitleyin, örneğin kartlarda 4:3 veya 1:1.
5. Bu listeyi içerik ekibine yazılı olarak verin.

Hızlıca küçültme yapmanız gerekiyorsa resim küçültme aracını kullanabilirsiniz. Fakat büyük katalogda bu işi elle değil, sunucu tarafında ya da CDN üzerinde otomatik yapmanızı öneririm.

srcset ve sizes özellikleri nasıl kullanılmalı?

srcset, aynı görselin farklı genişlikteki sürümlerini tarayıcıya liste halinde vermenizi sağlar. sizes ise görselin sayfada hangi ekran genişliğinde ne kadar yer kaplayacağını anlatır. Tarayıcı bu iki bilgiyi birleştirip ekrana en uygun dosyayı indirir.

Örneğin bir blog görseli için 480, 800 ve 1600 piksellik üç sürüm hazırlarsınız. srcset içinde bunları genişlik değerleriyle yazarsınız. sizes kısmında ise "mobilde ekranın tamamı, masaüstünde 800 piksel" bilgisini verirsiniz. Böylece telefondaki ziyaretçi 1600 piksellik dosyayı hiç indirmez.

web.dev duyarlı görseller rehberi bu yapıyı ayrıntılı örneklerle anlatıyor. Benim sahada gördüğüm en sık hata ise sizes değerini hiç yazmamak. Bu durumda tarayıcı görselin ekranın tamamını kaplayacağını varsayar ve gereğinden büyük dosyayı seçebilir.

• srcset'teki genişlik değerlerinin gerçek dosya genişliğiyle aynı olduğunu kontrol edin.
• sizes değerini tasarımdaki gerçek yerleşime göre yazın.
• Her zaman bir yedek src bırakın.
• Sanat yönetimi gerekiyorsa, yani mobilde farklı kadraj istiyorsanız picture ve media kullanın.

Mobil tarafta genel düzeni kontrol etmek için mobil uyumluluk testi rehberine de göz atabilirsiniz.

Görsel sıkıştırma ayarı nasıl belirlenir?

Sıkıştırmada amaç, gözün fark etmediği ayrıntıyı atıp dosyayı küçültmektir. Kayıplı sıkıştırma fotoğraflarda iyi çalışır; kayıpsız sıkıştırma ise logo, ekran görüntüsü ve keskin çizgili grafiklerde daha güvenlidir. Hangi yöntemi seçerseniz seçin, kaliteyi kendi gözünüzle kontrol etmeden toplu işlem yapmayın.

Benim pratikte başlangıç noktam şudur: fotoğrafları orta-yüksek kalite ayarında kaydedip ekranda yüzde 100 büyütmede bakarım. Yüzlerde, ürün dokusunda veya metin içeren alanlarda bozulma görürsem kaliteyi bir kademe artırırım. Bu, saha tecrübesine dayalı bir başlangıç yöntemidir, her görsel için garanti değildir.

Ayrıca görsel dosyalarının içinde gereksiz veri de taşınır. Kamera modeli, konum bilgisi ve renk profilleri gibi meta veriler çoğu web kullanımında işe yaramaz. Bunları temizlemek hem dosyayı küçültür hem de fotoğraftaki konum bilgisinin istemeden yayınlanmasını önler. Özellikle cep telefonuyla çekilmiş mağaza ve ofis fotoğraflarında bu kontrolü atlamayın.

Son olarak sıkıştırmayı tek seferlik bir iş olarak görmeyin. Yeni yüklenen her görsel aynı süreçten geçmezse birkaç ay içinde site yine ağırlaşır. Bu yüzden yükleme anında otomatik çalışan bir kurala ihtiyacınız var.

Genişlik ve yükseklik vermek neden önemlidir?

img etiketine width ve height değerlerini yazdığınızda tarayıcı, görsel henüz inmeden onun için doğru boşluğu ayırır. Bu değerler yoksa tarayıcı önce metni yerleştirir, görsel gelince içeriği aşağı iter. Ziyaretçi bir bağlantıya tıklamak üzereyken sayfanın kayması bu yüzden yaşanır.

Bu kayma, Google'ın sayfa deneyimi ölçütlerinden biri olan düzen kaymasıyla doğrudan ilgilidir. Ancak ölçütlerin tamamını burada anlatmayacağım; performansı nasıl ölçtüğümü Google Lighthouse ile site performans testi yazısında ayrıntılı açıkladım.

Pratik kural şudur: CSS ile görseli esnek yapsanız bile HTML'de gerçek en-boy oranını veren genişlik ve yükseklik değerlerini koruyun. Modern tarayıcılar bu oranı kullanarak doğru alanı ayırır. Böylece duyarlı tasarımdan vazgeçmeden kaymayı önlersiniz.

Öte yandan arka plan görseli olarak CSS ile verilen banner'larda da aynı dikkat gerekir. Kapsayıcıya sabit bir en-boy oranı tanımlamazsanız benzer bir kayma yaşanabilir.

Sayfanın en önemli görseli nasıl önceliklendirilir?

Her görsel aynı önemde değildir. Sayfa açıldığında ilk ekranda görünen büyük görsel, ziyaretçinin ilk izlenimini belirler. Bu görsele tarayıcıda öncelik vermek için img etiketine fetchpriority="high" ekleyebilirsiniz. Böylece tarayıcı onu diğer dosyalardan önce indirmeye çalışır.

Buna karşılık ekranın altında kalan görsellerin sonradan yüklenmesi mantıklıdır. Bu tekniğin nasıl çalıştığı, hangi durumda zarar verdiği ayrı bir konu; bu yazıda ayrıntısına girmiyorum. Yalnız şu uyarıyı yapayım: ilk ekrandaki ana görseli asla geciktirilmiş yükleme listesine koymayın.

Sahada en sık gördüğüm hata, tema ayarında "tüm görselleri geciktir" seçeneğinin açık kalmasıdır. Bu durumda hero görseli de geç iner ve sayfa yavaş algılanır. Dolayısıyla temanızı veya eklentinizi kurduktan sonra ilk ekrandaki görselin davranışını mutlaka ayrıca kontrol edin.

Ayrıca ana görseli CSS arka planı yerine img etiketiyle vermeyi tercih ederim. Tarayıcı, HTML'deki img etiketini CSS dosyasındaki arka plandan daha erken keşfeder.

Alt metin nasıl yazılmalı?

Alt metin, görselin ne gösterdiğini kısa ve bağlamına uygun biçimde anlatan açıklamadır. Google, görsel SEO rehberinde alt metnin bilgilendirici olmasını ve anahtar kelimeyle doldurulmamasını öneriyor. Rehberdeki örnek de açıklayıcı: "Dalmaçyalı yavru top getiriyor" gibi bir ifade, anahtar kelime listesinden çok daha değerlidir.

Ben alt metni yazarken şu soruyu soruyorum: bu görseli göremeyen biri, sayfayı anlamak için ne bilmeli? Örneğin bir ürün sayfasında "siyah deri sırt çantası, ön cepli, yandan görünüm" gibi bir açıklama işe yarar. Buna karşılık "çanta çanta al ucuz çanta" gibi bir ifade hem erişilebilirliği bozar hem de spam izlenimi verir.

• Görselin içeriğini ve sayfadaki amacını anlatın.
• Kısa tutun; bir cümleyi pek aşmasın.
• "Resim", "fotoğraf" gibi gereksiz girişleri atlayın.
• Süs amaçlı görsellerde alt değerini boş bırakın.
• Anahtar kelimeyi yalnız doğal olarak uyuyorsa kullanın.

Alt metin yazarken okunabilirliği de kontrol etmek isterseniz okunabilirlik analizi aracı kısa metinlerde de yardımcı olur.

Dosya adı SEO için gerçekten önemli mi?

Dosya adı, Google'ın görselin konusunu anlamasına yardımcı olan küçük bir ipucudur. Google'ın kendi örneği şöyle: "my-new-black-kitten.jpg", "IMG00023.JPG" adından daha iyidir. Yani fark büyük bir sıralama sıçraması yaratmaz, ama doğru sinyali vermenin maliyeti de neredeyse sıfırdır.

Pratikte uyguladığım kurallar şunlar: küçük harf kullanıyorum, kelimeleri tire ile ayırıyorum ve Türkçe karakterleri sadeleştiriyorum. Örneğin "Kırmızı Koltuk Takımı SON.jpg" yerine "kirmizi-koltuk-takimi.webp" yazıyorum. Böylece adres hem okunabilir hem de farklı sunucularda sorun çıkarmaz.

Ayrıca Google, yerelleştirilmiş içerikte dosya adlarını da çevirmeyi öneriyor. Çok dilli bir siteniz varsa İngilizce sayfadaki görselin adını İngilizce, Almanca sayfadakini Almanca yazmak mantıklıdır. Bu konunun genel çerçevesi için çok dilli web sitesi SEO rehberine bakabilirsiniz.

Dosya adlarını düzenlerken slug oluşturucu işinizi hızlandırır; Türkçe karakterleri otomatik sadeleştirir.

Görsel sitemap nedir, kimler kullanmalı?

Görsel sitemap, sayfalarınızdaki görsellerin adreslerini Google'a ayrıca bildirdiğiniz bir sitemap türüdür. Google'ın görsel sitemap belgesine göre bu yöntem, Google'ın başka yolla bulamayabileceği görselleri keşfetmesine yardım eder. Her sayfa için birden çok görsel adresi tanımlayabilirsiniz.

Herkesin buna ihtiyacı yoktur. Görselleri standart img etiketiyle, HTML içinde sunan küçük bir kurumsal sitede Google görselleri zaten sayfayı tararken bulur. Buna karşılık görselleri JavaScript ile yükleyen galeriler, büyük ürün katalogları ve fotoğraf ağırlıklı siteler için görsel sitemap anlamlı bir destektir.

Google belgesinde dikkat çeken bir ayrıntı daha var: görseller bir CDN'de, yani farklı bir alan adında duruyorsa bu adresleri de sitemap'e ekleyebilirsiniz. Ancak Google, CDN alan adını da Search Console'da doğrulamanızı öneriyor.

Ayrıca eski rehberlerde gördüğünüz başlık, açıklama ve lisans gibi ek etiketleri Google artık kullanmıyor; sitemap'i yalnız görsel adresleriyle sade tutun. Standart bir sitemap'i sıfırdan hazırlamak için XML sitemap oluşturucuyu kullanabilirsiniz.

Görselin etrafındaki metin neden önemlidir?

Google bir görseli yalnız alt metinden değil, çevresindeki içerikten de anlar. Görselin yakınındaki başlık, açıklama ve paragraf, onun konusu hakkında güçlü ipuçları taşır. Bu nedenle bir görseli sayfanın alakasız bir köşesine koymak yerine ilgili metnin hemen yanına yerleştirin.

Örneğin bir mobilya sitesinde koltuk görseli, o koltuğun ölçülerini ve kumaşını anlatan metnin yanında durmalıdır. Aynı görseli sayfanın en altında, "diğer ürünler" şeridinde göstermek bağlamı zayıflatır. Ayrıca görsel altına eklenen kısa açıklamalar, ziyaretçinin de dikkatini çeker.

Öte yandan görsel için ayrı bir sayfa açmanız gerekiyorsa sayfanın başlığını ve açıklamasını da anlamlı yazın. Google, görsel arama sonuçlarında sayfa başlığını da kullanabiliyor. Sayfaya yapısal veri ekleyerek ürün ya da tarif gibi bağlamı güçlendirmek isterseniz schema markup rehberim iyi bir başlangıçtır.

Pratikte bir kontrol yöntemim var: sayfadaki görseli kapatıp yalnız metni okuyorum. Metin, görselin ne anlattığını tahmin etmeme izin veriyorsa bağlam güçlüdür. Tahmin edemiyorsam görselin yanına bir iki cümlelik açıklama ekliyorum. Bu küçük alışkanlık, hem ziyaretçiye hem arama motoruna aynı mesajı vermenizi sağlar.

Görsel optimizasyonu için hangi araçları kullanmalısınız?

Araç seçimi, sitenin büyüklüğüne ve ekibin teknik gücüne bağlıdır. Tek tük görsel yükleyen küçük bir işletme ile her gün yüzlerce ürün fotoğrafı ekleyen bir e-ticaret sitesi aynı yöntemi kullanamaz. Bu nedenle ben araçları üç seviyede düşünüyorum.

• Elle düzenleme: Masaüstü görsel düzenleyiciler ve tarayıcı tabanlı sıkıştırıcılar. Az görselli siteler için yeterlidir.
• CMS eklentisi: Yükleme anında boyutlandırma, format dönüştürme ve sıkıştırma yapar. Ayarlarını mutlaka kontrol edin.
• Görsel CDN veya sunucu tarafı işlem: Görseli istek anında cihaza göre üretir. Büyük kataloglarda en ölçeklenebilir yoldur.

Ölçüm tarafında ise Lighthouse ve PageSpeed Insights, "görselleri doğru boyutlandırın" ya da "modern formatta sunun" gibi uyarılarla nereden başlamanız gerektiğini gösterir. Bu uyarıları bir yapılacaklar listesi gibi okuyun ve her düzeltmeden sonra ölçümü tekrarlayın.

Görsel optimizasyonu işini bir web projesinin parçası olarak baştan planlamak isterseniz web tasarım hizmetimde bu ayarları teslim öncesi kontrol listesine koyuyorum.

E-ticaret sitelerinde ürün görsellerine nasıl yaklaşmalısınız?

E-ticarette görsel sayısı hızla binlere çıkar; bu yüzden elle yapılan her iş bir süre sonra aksar. Benim ilk işim bir görsel standardı yazmak oluyor: ürün fotoğrafı hangi en-boy oranında, hangi arka planla, kaç piksel genişlikte yüklenecek. Bu standart olmadan otomasyon da tutarsız sonuç verir.

Ürün görsellerinde en büyük tuzak, zoom özelliği için yüklenen çok büyük orijinal dosyaların liste sayfalarında da kullanılmasıdır. Liste sayfasında küçük bir kart için ayrı, küçük bir sürüm üretin. Büyük dosyayı yalnız kullanıcı yakınlaştırdığında indirin.

Ayrıca ürün varyasyonlarında her renk için ayrı, doğru adlandırılmış görsel kullanın. Böylece Google Görseller'de "lacivert keten gömlek" araması yapan biri doğru varyasyona ulaşabilir. Mağazanızın genel altyapısını birlikte değerlendirmek isterseniz e-ticaret danışmanlığı kapsamında bu standartları birlikte kuruyoruz.

Son olarak kategori sayfalarında aynı anda onlarca görsel göründüğünü unutmayın. Burada küçük sürüm kullanmak, sayfanın toplam ağırlığını en çok düşüren adımdır.

Görsel optimizasyonu yaparken hangi hatalardan kaçınmalısınız?

Yıllar içinde aynı hataların farklı sitelerde tekrarlandığını gördüm. Bunların çoğu kötü niyetten değil, "eklentiyi kurduk, iş bitti" rahatlığından doğuyor. Aşağıdaki liste, denetimlerde en sık not aldığım maddelerden oluşuyor.

1. Görsel adresini değiştirip eski adrese yönlendirme koymamak. Görsel arama trafiği bu yüzden kaybolabilir.
2. Aynı görseli farklı adlarla defalarca yüklemek ve kütüphaneyi şişirmek.
3. Metni görselin içine gömmek; bu metni ne Google ne de ekran okuyucu rahatça okuyabilir.
4. Robots.txt ile görsel klasörünü yanlışlıkla engellemek.
5. Aşırı sıkıştırma yüzünden ürün fotoğraflarını bulanıklaştırmak.
6. Logo gibi basit grafikleri büyük fotoğraf formatında tutmak.

Özellikle site yenileme projelerinde ilk madde çok sık yaşanıyor. Bu yüzden web sitesi yenilerken SEO nasıl korunur yazısındaki kontrol listesine görsel adreslerini de ekliyorum. Yönlendirmeleri doğrulamak için de yönlendirme denetleyiciyi kullanabilirsiniz.

Görsel optimizasyonunun sonucunu nasıl ölçersiniz?

Ölçüm yapmadan yaptığınız optimizasyon bir tahminden ibarettir. Ben her projede işe başlamadan önce birkaç temel sayfanın mevcut durumunu kaydediyorum: toplam sayfa ağırlığı, görsel sayısı, en büyük görselin boyutu ve laboratuvar ölçüm sonuçları. Ardından değişiklikleri yapıp aynı sayfaları aynı koşullarda tekrar ölçüyorum.

Laboratuvar ölçümü hızlı geri bildirim verir; ancak gerçek kullanıcı verisi ayrıca önemlidir. Search Console'daki deneyim raporları, iyileşmenin gerçek ziyaretçilere yansıyıp yansımadığını zamanla gösterir. Bu veri birkaç hafta gecikmeli oluştuğu için sabırlı olun.

Görsel arama tarafında ise Search Console'daki performans raporunda arama türünü "Görsel" olarak seçebilirsiniz. Böylece görsellerinizin hangi sorgularda göründüğünü ve tıklandığını ayrı ayrı izlersiniz. Dosya adı ve alt metin düzenlemelerinin etkisini burada görmek, doğal olarak biraz zaman alır.

Sonuçları basit bir tabloda tutmanızı öneririm: tarih, sayfa, yapılan değişiklik ve ölçüm sonucu. Bu kayıt, bir sonraki kararınızı veriye dayandırmanızı sağlar. Ayrıca aylar sonra "bu iyileşme nereden geldi?" sorusuna da net bir cevap verirsiniz; çünkü her değişikliğin tarihi ve etkisi önünüzde durur.

Görsel optimizasyonu için adım adım kontrol listesi nedir?

Buraya kadar anlattıklarımı uygulanabilir bir sıraya dökeyim. Yeni bir siteye başlarken ya da mevcut siteyi elden geçirirken bu sırayı izliyorum. Her adımı bitirdikten sonra bir sonrakine geçmek, hangi değişikliğin neyi iyileştirdiğini görmenizi kolaylaştırır.

1. Sitedeki en ağır görselleri listeleyin.
2. Her görsel alanı için hedef ölçüyü belirleyin.
3. Fotoğrafları WebP veya AVIF'e, logoları SVG'ye çevirin.
4. picture ile yedek formatı, srcset ve sizes ile duyarlı sürümleri tanımlayın.
5. Sıkıştırma ayarını gözle kontrol ederek sabitleyin ve meta verileri temizleyin.
6. Tüm img etiketlerine genişlik ve yükseklik ekleyin.
7. İlk ekrandaki ana görsele öncelik verin.
8. Alt metinleri ve dosya adlarını düzenleyin.
9. Gerekiyorsa görsel sitemap oluşturun ve Search Console'a gönderin.
10. Önce ve sonra ölçümlerini kaydedin.

Üstelik bu sırayı bir kez yazılı hale getirdiğinizde ajans, yazılımcı ve içerik ekibi aynı dili konuşur. Ben listeyi proje yönetim aracına şablon olarak ekliyorum; her yeni sayfa açıldığında görevler kendiliğinden geliyor. Böylece kimse "bu adımı unuttuk" demiyor ve kontrol, kişiye değil sürece bağlı kalıyor. Özellikle ekip değiştiğinde bu yazılı süreç büyük zaman kazandırır.

Bu liste teknik görünse de çoğu adım bir kez kurulduktan sonra kendiliğinden işler. Asıl zorluk, içerik ekibinin yeni yüklemelerde aynı disiplini sürdürmesidir.

Görsel optimizasyonunu kendiniz mi yapmalısınız, destek mi almalısınız?

Küçük bir kurumsal sitede bu yazıdaki adımların çoğunu kendiniz uygulayabilirsiniz. Birkaç düzine görseli yeniden boyutlandırmak, dosya adlarını ve alt metinleri düzenlemek birkaç saatlik iştir. Özellikle hazır bir altyapı kullanıyorsanız eklenti ayarlarıyla önemli bir kısmını çözersiniz.

Buna karşılık binlerce ürün görseli olan, CDN ve özel tema kullanan sitelerde iş teknik bir projeye dönüşür. Sunucu tarafında format dönüştürme, önbellek kuralları ve eski adreslerin yönlendirilmesi gibi konular yanlış yapılırsa trafik kaybı yaşanabilir. Bu durumda bir uzmanla çalışmak, deneme yanılma maliyetini düşürür.

Ben bu işi genellikle kapsamlı bir teknik denetimin parçası olarak ele alıyorum. Görsel ayarlarını, sitenin diğer teknik sorunlarıyla birlikte önceliklendirmek daha verimli oluyor. İhtiyacınız bu yöndeyse SEO danışmanlığı sayfasından kapsamı inceleyebilirsiniz. Kısacası, önce ölçün, sonra en ağır dosyadan başlayın.