Fotoğraflar bir web sitesinin en etkileyici ama çoğu zaman en ağır parçasıdır. Telefonla çekilmiş birkaç megabaytlık bir ürün fotoğrafı, sayfanın açılmasını saniyelerce geciktirebilir. Öte yandan doğru hazırlanmış görseller, Google Görseller'den ziyaretçi getirir ve sayfanızın konusunu arama motorlarına daha iyi anlatır. Görsel SEO bu iki hedefi birlikte gözetmektir: hızlı yüklenen ve bulunabilen görseller.
Doğru boyut ve sıkıştırma
Görseli, sayfada gösterileceği en büyük boyuttan çok daha büyük yüklemeyin. 1200 piksel genişliğinde gösterilecek bir fotoğraf için 6000 piksellik bir dosya, ziyaretçiye gereksiz yere birkaç megabayt indirtir. Fotoğrafları yayına almadan önce yeniden boyutlandırın ve sıkıştırın; çoğu fotoğraf, gözle fark edilir bir kalite kaybı olmadan dosya boyutunun büyük kısmından kurtulabilir.
Modern formatlar: WebP ve AVIF
WebP ve AVIF formatları, aynı görsel kaliteyi JPEG ve PNG'ye göre genellikle daha küçük dosyalarla sunar ve güncel tarayıcıların neredeyse tamamı tarafından desteklenir. Logolar ve simgeler için ise vektörel SVG formatı her ekranda keskin görünür ve çok küçük dosya boyutuna sahiptir.
Dosya adı ve alternatif metin
- Dosya adı: "IMG_4528.jpg" yerine "eskisehir-lazer-kesim-makinesi.jpg" gibi görselin içeriğini anlatan, Türkçe karakter ve boşluk içermeyen bir ad kullanın.
- Alternatif metin: Görseli göremeyen kullanıcılar için ekran okuyucuların seslendirdiği ve Google'ın görselin içeriğini anlamak için kullandığı açıklamadır. Görselde ne olduğunu kısa ve doğal bir cümleyle anlatın; anahtar kelime listesi yazmayın.
- Süs görselleri: Yalnızca dekoratif amaçlı görsellerde alternatif metni boş bırakmak doğru bir tercihtir.
Alternatif metin aynı zamanda bir erişilebilirlik gereğidir; bu konuyu erişilebilir web tasarımı yazımızda ayrıntılı olarak ele aldık.
Geç yükleme ve boyut bilgisi
Sayfanın ilk ekranında görünmeyen görsellerin, kullanıcı o bölüme yaklaştığında yüklenmesini sağlayan geç yükleme özelliği, sayfanın ilk açılışını hızlandırır. Ancak sayfanın en üstündeki ana görselde geç yükleme kullanmayın; bu görsel olabildiğince erken yüklenmelidir. Her görsel için genişlik ve yükseklik bilgisini belirtmek ise sayfa yüklenirken içeriğin aşağı kaymasını önler. Bu iki ayar, Önemli Web Verileri'ndeki LCP ve CLS değerlerini doğrudan etkiler; bu ölçümlerin üçüncüsü olan INP'yi bu yazımızda anlattık.
Farklı ekranlar için farklı boyutlar
Telefonda 400 piksel genişliğinde görünen bir görsel için masaüstü boyutundaki dosyayı indirmek gereksizdir. HTML'deki srcset özelliğiyle aynı görselin farklı boyutlardaki sürümlerini tanımlayabilir, tarayıcının ekrana en uygun olanı seçmesini sağlayabilirsiniz.
Görseller ve sayfa bağlamı
Google bir görselin konusunu yalnızca dosyasından değil, çevresindeki metinden de anlar. Ürün fotoğraflarını ilgili ürün açıklamasının yanında, proje fotoğraflarını projeyi anlatan metinle birlikte kullanın. Stok fotoğraflar yerine kendi ürünlerinizin, tesisinizin ve ekibinizin özgün fotoğrafları hem ziyaretçide hem de arama motorlarında daha güçlü bir etki bırakır.
Hızlı kontrol listesi
- Görseller gösterilecekleri boyuta göre küçültüldü mü?
- Fotoğraflar sıkıştırıldı ve mümkünse WebP ya da AVIF formatına dönüştürüldü mü?
- Dosya adları ve alternatif metinler görselin içeriğini anlatıyor mu?
- İlk ekran dışındaki görsellerde geç yükleme açık mı?
- Her görselin genişlik ve yükseklik bilgisi tanımlı mı?
Sitenizin görsel performansını ve genel hızını incelemek için SEO ve web analizi hizmetimize göz atabilir, bizimle iletişime geçebilirsiniz.
