Thread by @HasanYasar

#SEO ile ilgili sürekli soru geliyor ne yapalım diye. Maalesef bu işin sihirli formülleri yok. Bilmeniz gereken ve uygulamanız gereken bazı şeyler var. Bunları yaparsanız başarılı olursunuz. Hızlı bir başlangıç yapalım, bir tweet serisi geliyor. ☕️ hazırsa başlayalım, ❤️'i unutma

En önemli yerden başlıyoruz. Resim formatları. 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. Öncelikle formatları 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. Fotoğraf en 20-30MB olur.

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ı çok büyük, 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. 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 destekler.

PNG, tercih edilen 2. 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. Sosyal medya ikonları gibi küçük görsellerde tercih edilir.

SVG, vektörel olduğu için hangi boyutta resmin yayınlandığının bir önemi yoktur. Yuvarlak çizerseniz bu 100px içinde 10000px içinde aynı şeyi ifade eder. Vektörel çizimleriniz varsa tercih edebilirsiniz. Bazı tarayıcılarda sıkıntı yaşayabilirsiniz.

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 hareketli olduğu için GIF yerine tercih edilebilir. IE ve bazı eski tarayıcılar 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.

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.

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

Eğer tüm tarayıcılarda çalışsın 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. Yazının tamamını okumak isterseniz : aramamotoru.com/seo-icin-dogru…

Beğendiyseniz ❤️ ♻️

Kaçıranlar için bir önceki tweet serisi :

https://twitter.com/HasanYasar/status/1450379109394223104