Thread by @HasanYasar

Animated PNG ile ilgili paylaşınca hem farklı öneriler geldi, hem bilmeyenler varmış. Bugün biraz resim formatlarından bahsedeyim. #SEO için bunların doğru kullanımı önemli, aynı zamanda kullanıcılarımıza içeriği en iyi sunabilmek içinde bunları doğru kullanmamız gerekiyor.

JPG en sık kullanılan resim formatı, sıkıştırma özelliği sayesinde daha küçük alan kaplayarak hızlı yüklenmeyi sağlıyor. Burada dikkat etmemiz gereken optimizeyi fazla yaptığımız zaman görüntüde ciddi kayıplara neden olabiliyor, bu satışlarımızı ve prestijimizi düşürebilir.

PNG, şeffaf olması sebebiyle birçok yerde arkasına farklı arkaplanlar kullanabilmek için kullanılıyor. Hareketli PNG ile tekrar sık kullanılmaya başlanacağını düşünüyorum.

GIF aslında ölmeye yüz tutmuş bir formattı. Fakat hareketli GIF ve sosyal medya ile tekrar gündemimize oturdu. En büyük dezavantajı 256 renk destekliyor oluşu. Hareketli olması ve transparan olması ise bir avantaj sağlıyor. Renk sayısı az olmasına rağmen boyutu genelde yüksek.

SVG, vektörel bir format. Yani tamamen matematiksel bir format. Karenin üzerine yuvarlak çiz gibi komutlarla çalışıyor. Ekran boyutları değiştiği için büyük avantaj sağlıyor. Cep telefonu ve TV ekranı aynı görsel kullanılabiliyor. Avantajları hareketli, şeffaf, az boyutlu.

WebP, Google'ın geliştirdiği ve desteklediği bir format. Sıkıştırma konusunda oldukça başarılı, şeffaf olması, hareket desteği ek avantajları. SVG ve WebP'nin dezavantajı ise internette tüm tarayıcıların desteklemiyor oluşu.

Peki web sitemizde hangisini kullanacağız?
- Normal resimler için;
WebP en iyi alternatif fakat tüm tarayıcılar desteklemediği için JPG sürümünü kaydedip alternatif olarak göstermek en mantıklısı.

- Hareketli resimler için;
En iyi alternatif SVG gözüküyor fakat hazırlamak kolay olmayabilir. Sonraki alternatif ise hareketli WebP, PNG ve GIF şeklinde olabilir. Yine bunlar alternatifli olarak yayınlanırsa desteklemeyen tarayıcılarda sorun olmamış olur.

- Şeffaf resimler için;
WebP en iyi alternatif fakat tüm tarayıcılar desteklemediği için PNG sürümünü kaydedip alternatif olarak göstermek en mantıklısı. Peki alternatif nasıl gösterilir?

<picture>
<source srcset="Webp-Resmimiz.webp" type="image/webp">
<source srcset="JPG-Resmimiz.jpg" type="image/jpeg">
<img src="JPG-Resmimiz.jpg" alt="Alt içerisine gelecek içerik">
</picture>

<picture> kullandığımız zaman bu şekilde alternatifleri kullanabiliyoruz. Aynı şekilde picture kullandığımız zaman çözünürlüğe uygun boyutları gösterebiliyoruz.

Umarım faydalı olmuştur.