Image tag - Görsel için seo ve WebP

Bir web sitesinin arama motoru optimizasyonu yapılırken atlanmaması gereken konulardan bir tanesi de görsel optimizasyonlardır. Görsel optimizasyonu son derece kolaydır ve doğru ayarlandıktan sonra bir daha yeniden optimize edilmesine gerek yoktur. Görsel optimizasyonu yapılırken üç farklı dikkat edilmesi gereken nokta vardır. Bunlardan bir tanesi görselin alt etiketi, bir tanesi görselin adı, diğeri ise görselin sıkıştırılmasıdır.

Görsellerde alt etiketi ve ismi nasıl kullanılır?

Görseller oluşturulan web sitesine eklenirken, kullanılacak alan için doğru isme sahip olmalıdır. Örneğin;

Görsel web sitesine eklenmeden önce adının mutlaka benzersiz olmasına en azından benzer isimdeki görseller arasında fark edilmesi için özel bir isim belirlediğinize dikkat edin. Arama motorları görsel taramalar sırasında, web sitenizde yer alan görselleri indexlerken adlarını da indexler. Bu nedenle görselin adı "RESİM_213123" veya "resim" gibi sıradan birer kelime halinde kullanılırsa, görsel arama sonuçlarında ön sıralarda görünmesi için hiçbir neden yoktur. Bir görselin alt etiketinin eklenebilmesi için alt etiketinin kullanılması gerekir. Alt etiketinin doğru kullanımı şu şekildedir; <img src="http://localhost/burakor/burakorcomlogo.png" alt="burakor.com logo"> Kullanıma dikkat ederseniz; resmin adı direkt olarak burakorcomlogo.png, alt etiketide burakor.com logo şeklindedir. Google aramalarında burakor.com logo şeklinde arama yapıldığında bahsi geçen görselin gösterilmesi sağlanır. Wordpress, Django, Drupal gibi hazır sistemler kullanırken görsel optimizasyon daha kolaydır. Wordpress üzerinden bir örnekle anlatalım;

Örnekte yer alan resimde görebileceğiniz üzere Alternatif metin, görselin adıyla aynı ve bizim yazımızın içeriğiyle de aynı. İçerikle aynı olmasının sebebi, ziyaretçiler yazımız ile ilgili bir arama sorgusu döndürdüğünde görsel aramalarda yazımızın bağlantısı çıkmasını sağlamak. Her hangi bir kullanıcı, image, görsel, seo kelimeleriyle ilgili bir görsel arama yaptığında otomatik olarak bu yazımıza görsel arama sonuçları üzerinden erişebilir. Aslında bir nevi etiket gibi kullanılabilir. Alternatif metnin bir diğer avantajıda; görselin bir sebepten dolayı gösterilemediği durumlarda görselin yerine girilen metnin gösterilmesidir.

Görsel optimizasyon nasıl yapılır?

Görsel optimizasyon yapılırken kayıpsız şekilde küçültme işlemi uygulanır. Küçültme işlemini kendiniz yapıyorsanız format ve kalite seçeneklerinden küçültme uygulayabileceğiniz gibi çalışmayı dışarı aktarırken de sıkıştırma uygulayabilirsiniz. Görseli online olarak ta sıkıştırabilirsiniz. Online görsel sıkıştırma işlemi için kullanabileceğiniz kaynaklardan bir tanesine buradan erişebilirsiniz.

Örnekteki sadece küçük bir görsel için uygulanan sıkıştırmayı gösteriyor. Özellikle büyük boyutlu sliderlarda kullanılan görsellerin 1-2 mb boyutlarda olduğunu düşündüğünüzde, ciddi bir küçültme olacağını düşünebilirsiniz.

Görsel sıkıştırmanın web sitesi hızına faydası

Görsel sıkıştırmanın açılış hızlarına ve hız skorlarına ciddi etkisi vardır.

Görsellerin sıkıştırılmadan kullanılmasının ne denli gecikmeye sebep olduğunu yukarıdaki örnek ile açıklayalım. Görsel boyutları kilobyte cinsinden olsa bile, toplamda 20 saniyeden fazla bir gecikmeye sebep olduğunu görebilirsiniz. Tabi burada sadece sıkıştırma değil, görsellerin hepsinin birden yüklenmeye çalışmasınında etkisi çok büyük (Lazy Load'a değineceğim). Görseller web sunucunuz dan çıkıp ziyaretçi tarayıcısında gösterilmesi için indirilmesi gerekir. Bu işlem sırasında, web sunucunuzun yükleme hızı ve ziyaretçinin indirme hızı doğru orantılıdır. Sunucunuzun yükleme hızı ne kadar yüksek ve gecikme süreleri ne kadar kısaysa o kadar hızlı veri gönderimi yapılır. Dolayısıyla yüksek boyutlu görseller, javascript'ler ve stil dosyaları o kadar uzun sürede yüklenir. Bu nedenle görseller, javascriptler ve stil dosyaları mutlaka sıkıştırılmalıdır.

Lazy Load nedir?

Lazy load en basit haliyle, tarayıcının görüntülenmeyen kısımdaki görsel ve objelerin yüklenmemesi veya geç yüklenmesini sağlamaktır. Lazy load işlemi direkt olarak görsellere uygulanabileceği gibi objelere de uygulanabilir. Not: lazyloading tüm tarayıcılarda çalışmamaktadır. En basit haliyle <img src="http://localhost/burakor/burakorcomlogo.png" loading="lazy"> loading etiketiyle kullanılabilir. Css veya fonksiyonlar ile de kullanılabilir. Hazır sistemlerde işiniz daha kolaydır. Lazy Load eklentileri ile kolayca lazy load kullanabilirsiniz.

WebP nedir?

WebP; Google'ın kayıplı ve kayıpsız olarak sıkıştırma kullanan yeni görsel formatıdır. Tıpkı jpg, png, gif gibi. WebP formatının diğer görseller formatlara karşın en büyük avantajı kayıpsız sıkıştırmalarda bile yüksek oranda veriyi küçültebilmesidir. Sıkıştırma işlemlerinde kayıpsız ve kayıplı olarak iki farklı tip vardır. Burada kayıp, görselin pixel cinsinden bozulmasıdır. Kayıplı sıkıştırmalarda görseller büyütüldüğünde fark edilebilir bir kayıptır. WebP şuan için tüm tarayıcılarda desteklenmiyor ancak genel olarak bakıldığında Dünya çapında kullanılan tüm tarayıcıların %80'i tarafından destekleniyor. Not: Internet Explorer WebP desteklemiyor.

Safari WebP destekliyor mu?

Safari iOS 14 itibariyle WebP formatını destekliyor.

Güncel WebP destek durumunu buradan kontrol edebilirsiniz.