SEO için doğru resim formatını nasıl seçeriz?

Uzun yıllardır web sitelerini optimize etmek ile uğraşıyorum. Bu süreçte onlarca eğitim ve birçok firmaya danışmanlık verdim. Herkes SEO ile ilgili olarak sihirli formüller arıyor. SEO’ya baktığımızda ise küçük detayların birleşmesiyle meydana gelen işlerin bütünü olduğunu görüyoruz. Yani aslında herkesin yapabileceği onlarca şey var. Minik bir yazı dizisi başlatmayı planlıyorum, bu ilki.

Google PageSpeed Insight vb. araçlarda sitemizi incelediğimiz zaman genel olarak resim formatları ile ilgili uyarılar çıkar. Resim formatını doğru seçtiğimizde bu uyarılardan kurtulabilir.

Son yıllarda Google için en önemli 2 şey hız ve mobil. Sitemizin hızlı açılabilmesi için de ilk yapmamız gereken doğru resim türlerini seçip kullanmak. Öncelikle kullanacağımız dosya türünü tarayıcıların desteklemesine dikkat etmek gerekiyor. Kısaca tarayıcıların desteklediği resim türlerini tanıyalım.

BMP, internet dünyası için hızın ikinci planda olduğu dönemlerde kullanılan bir resim formatı. Maalesef halen bazı internet siteleri kullanıyor. Şayet bir sitede BMP resim dosyası varsa ilk yapmamız gereken bu dosyayı değiştirmek olacaktır. Normal bir fotoğraf bile 20-30MB boyutlarında olacaktır. Herhangi bir sıkıştırma formatı kullanmaz.

TIFF, bu formatı sadece Safari destekliyor. BMP gibi sitede gördüğümüzde hızlı adımlarla uzaklaşmamız gereken bir format. Baskıya girecek resimlerde görüntü kaybı olmasın diye tercih ediliyor genelde. Dosya boyutlarına girmek bile istemiyorum, tarayıcıların desteklemiyor olması ayrı bir sorun.

GIF, bir dönem adını unuttuğumuz fakat sosyal medya araçlarının desteklemesiyle tekrar hayatımıza giren bir format. GIF dosya türü en fazla 256 renge kadar destekler, renk sayısının az olması sebebiyle dosya boyutu görece olarak küçük olabilir. Eğer hareketli resim ihtiyacımız varsa kullanabiliriz. Tüm tarayıcılar destekler.

JPG, büyük ihtimalle internette en çok kullanılan format. Sebebi basit aslında yoğun bir sıkıştırma seçeneği sunar. Görsellerin görüntü kalitesinde gözle görmenin zor olduğu bozukluklar meydana gelir fakat dosya boyutu gerçekten küçülür. Tüm tarayıcılar desteklediği içinde çok sık olarak tercih edilir.

PNG, JPG’den sonra tercih edilen ikinci bir format. Genellikle şeffaf resimler için tercih edilir. Görüntü sıkıştırması çok yüksek olmadığı için dosya boyutları daha yüksek olur. Şeffaf resim kullanmak kaçınılmaz olduğunda kullanılır. Bunun dışında sosyal medya ikonları gibi küçük görsellerde dosya boyutu JPG’e göre daha küçük olur. PNG görüntü kalitesi olarak JPG’e göre daha avantajlıdır. Tüm tarayıcılar destekler.

SVG, çok sık kullanılmayan ama kurtarıcı bir format. Sebebi vektörel olduğu için hangi boyutta resmin yayınlandığının bir önemi yoktur. Yani bir yuvarlak veya çizgi çizerseniz bu 100px içinde 10000px içinde aynı şeyi ifade eder. Eğer vektörel çizimleriniz varsa tercih edebilirsiniz. Tüm tarayıcıların son sürümleri destekler fakat tarayıcıların eski sürümlerinde problem yaratabilir.

SVG’de bir çizgi çizmek için aşağıdaki örnek kullanılabilir.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="80" x2="100" y2="20" stroke="black"></line>
</svg>

WebP, sihirli bir dosya türü diyebiliriz. Google’ın kesinlikle en çok sevdiği ve tavsiye ettiği dosya türü. Sıkıştırma olarak JPG’den başarılı, şeffaf olduğu için PNG yerine tercih edilebilir, hareketli olduğu için GIF yerine tercih edilebilir. Internet Explorer harici tarayıcılar destekler. Bazı tarayıcıların ise eski sürümleri desteklemez.

AVIF, çok bilinmeyen bir format. PNG ve Jpg’den iyi sıkıştırmaya sahip, renk desteği yüksek, hareketli resimleri ve şeffaflığı destekliyor. Fakat henüz Chrome, Opera, Firefox kısmi olarak destekliyor.

APNG, PNG’nin hareketli sürümü diyebiliriz. GIF’ten daha iyi performans sergiler ama WebP ve AVIF karşısında bir miktar çaresiz kalır. Maalesef bu dosya türüde tarayıcı desteklerini tam olarak arkasına alabilmiş durumda değil.

Hangi resim formatını seçmeliyim?

Peki kısa kısa anlattığım dosya türlerinden hangisini seçeceğiz? Hangisini seçsek bir problemi var. Öncelikle resme göre seçim yapmamız gerekiyor. Her resim için uygun diyebileceğimiz bir dosya türü maalesef yok. Onun için adım adım ele alalım.

Fotoğraflar için en uygun format WebP, alternatifi PNG.

İkonlar için en uygun format SVG, alternatifi WebP ve PNG.

Diyagramlar, çizimler ve grafikler için en uygun format SVG, alternatifi PNG.

Hareketli resimler için en uygun format AVIF, alternatifi WebP ve GIF.

Bu kısma kadar her şeyi anladık ama seçtiklerimizi tarayıcılar desteklemiyor, o konuyu ne yapacağız? İşte burada sihirli bir HTML etiketi imdadımıza yetişiyor. <picture> etiketi sayesinde SVG’yi ve PNG dosyasını birlikte ekleyebiliyoruz. Bu sayede tarayıcı destekliyorsa SVG gözüküyor, desteklemiyorsa PNG dosyası gözüküyor. <picture> ‘ın başka özellikleri de var ama sonraki yazının konusu. En basit haliyle aşağıdaki gibi kullanılıyor.

<picture>
<source srcset="logo.svg" type="image/svg">
<img src="logo.png" alt="logo">
</picture>

Doğru resim formatını seçmek ve alternatifini oluşturmak her zaman için kolay olmayabilir. Eğer tüm tarayıcılarda çalışsın istiyorsanız ve tek alternatif olsun istiyorsanız hareketli resimler için GIF, şeffaf resimler ve ikonlar için PNG, geri kalan tüm görseller için JPG tercih edebilirsiniz.

Bu konuyla alakalı olarak sitemizde daha önce yazılmış olan Web Sitelerinde Hangi Resim Formatı Tercih Edilir? ve Web Sitelerinde Hangi Resim Formatı Tercih Edilir? yazılarını ayrıca incelemenizde fayda var.

SEO için resim Serisi

Kaynakça :