Ritim İstanbul A5 Blok No:46, D:112, 34846 Maltepe/İstanbul

WebP nedir? Diğer görsel formatlarından farkı nedir?

İş görsellere geldiğinde hemen hemen hepimizin JPEG, PNG ve GIF gibi dosya formatları hakkında bilgisi var. Özellikle akıllı telefonların çektikleri görsellerin bu tür dosya formatlarıyla depolanması (iPhone, görsellerde HEIC dosya formatı kullanır) hemen hemen herkesin bu dosya formatlarını daha da yakından tanımasına yol açtı. Ancak iş web sitesi ile ilgili görsellere gelince biraz farklılaşabilir.

WebP nedir?

WebP, Google tarafından geliştirilen bir dosya formatıdır. JPEG, PNG veya GIF resim biçimlerine kıyasla daha küçük boyutta veya daha iyi görünen resimler oluşturmak için tasarlanmıştır. WebP formatı Eylül 2010’da duyurulmuştur ve destek kütüphanesi Nisan 2018’de 1.0 sürümüne ulaşmıştır.

- ADT Çözümleri -
Yönetilen Hizmetler Görseli
Advanced Dynamics Teknoloji'de işletmeler için dış kaynaktan hizmet modeliyle Yönetilen Hizmetler çözümleri sunuyoruz.
WebP dosya formatı logosu
WebP dosya formatı logosu

WebP Google tarafından şu şekilde tanımlanır: “WebP, web üzerindeki görüntüler için üstün kayıpsız ve kayıplı sıkıştırma sağlayan modern bir görüntü formatıdır. WebP’yi kullanarak web yöneticileri ve web geliştiricileri, web’i daha hızlı hale getiren daha küçük, daha zengin görüntüler oluşturabilir.” (Kaynak)

WebP, VP8 ile veri akışı uyumludur ve genişlik ve yükseklik için 14 bit kullanır. Bir WebP görüntüsünün maksimum piksel boyutları 16383 x 16383’tür.

Sorular

Photoshop ile WebP görsel üretmek mümkün mü?

Adobe Photoshop programının 23.2 sürümü ve sonrasının WebP dosya formatı için tam desteğe sahip olduğu belirtilmiştir. Ancak programı kullanırken hazırladığınız görseli WebP olarak kaydetmek (export) için harici bir eklenti yüklemeniz gerekiyor.

Bu eklentiyi indirmek için aşağıdaki bağlantıları kullanın:

Eklentiyi nasıl kuracağınız ile ilgili buraya tıklayarak talimatları takip edin.

JPEG ve PNG gibi dosya türlerinden farkı nedir?

WebP kayıpsız görüntülerin boyutu PNG’lere kıyasla %26, JPEG görüntülerden ise %25-34 daha küçüktür. WebP kayıplı görüntüler, eşdeğer SSIM kalite indeksindeki karşılaştırılabilir.

SEO bakımından WebP dosya formatı

Web sitelerinde kullanılan görseller zamanla web sitesi hızını etkiler ve yavaşlamaya sebep olur. Örneğin sayfa hızı testi yaptırdığınızda çoğu görselin sitenin yavaş yüklenmesine sebep olduğunu ve böylelikle daha düşük sayfa sıralaması elde ettiğinizi düşünebiliriz. SEO bakımından bu görsellerin tembel yüklenmesi (lazy load) sitenin hızlanmasına yol açar. Ayrıca SEO bakımından PNG ve JPEG görsellerin sıkıştırılarak WebP dosya formatına dönüştürülmesi sitenin performansının artmasını sağlar.

Bu konuda WordPress Performance Group tarafından geliştirilen Performance Lab eklentisine göz atabilirsiniz. Alternatif olarak Smush eklentisi var olan görsellerinizin WebP formatına dönüştürülmesine yardımcı olan bir otomasyon hizmeti sunar.

Moment.js nedir ve nasıl kullanılır?

JavaScript kütüphaneleri programlama sektöründe sıklıkla karşılaşılan sorunları çözmek ve otomatikleştirmek için geliştirilir. Popüler JavaScript kütüphanelerinden biri de Moment.js'tir. Peki Moment.js nedir ve programlama dünyasında...

JavaScript’te değişkenler ve aralarındaki farklar: var, let & const

JavaScript, web geliştirmenin temel taşlarından biri olarak, dinamik ve etkileşimli web siteleri oluşturmanın anahtarıdır. Bu güçlü programlama dilinin en temel yönlerinden biri, veri saklama...

Fiyat takip yazılımları nasıl çalışır?

E-ticaret dünyası her geçen gün daha rekabetçi bir hal alıyor. Bu ortamda, işletmelerin rakiplerini ve pazar trendlerini yakından takip etmeleri hayati önem taşıyor. İşte...

HTML div elementi ve kullanım senaryoları

Her gün milyonlarca web sayfasını ziyaret ediyor, okuyor veya üzerlerinde işlem yapıyoruz. Peki, son kullanıcılar için görsel olarak renderlanan bu sayfaların arkasındaki kodlarda kullanılan...

React ‘hook’ nedir ve ne için kullanılır?

React hook, React JavaScript kitaplığındaki bir özelliktir. Hook'lar, sınıf bileşenlerine ihtiyaç duymadan, fonksiyon bileşenlerinde durum (state) ve diğer React özelliklerini kullanmaya olanak tanır. İlk...

IPv4 ve IPv6 nedir? Aralarındaki farklar nelerdir?

Her gün internete bağlanıyoruz, ancak teknik olarak internete nasıl bağlandığımızla ilgili bir fikriniz var mı? İnternet, modern yaşamın ayrılmaz bir parçası haline geldi ve...

Daha fazla blog içerik

Moment.js nedir ve nasıl kullanılır?

JavaScript kütüphaneleri programlama sektöründe sıklıkla karşılaşılan sorunları çözmek ve otomatikleştirmek için geliştirilir. Popüler JavaScript kütüphanelerinden biri de Moment.js'tir. Peki Moment.js nedir ve programlama dünyasında...

JavaScript’te değişkenler ve aralarındaki farklar: var, let & const

JavaScript, web geliştirmenin temel taşlarından biri olarak, dinamik ve etkileşimli web siteleri oluşturmanın anahtarıdır. Bu güçlü programlama dilinin en temel yönlerinden biri, veri saklama...

Fiyat takip yazılımları nasıl çalışır?

E-ticaret dünyası her geçen gün daha rekabetçi bir hal alıyor. Bu ortamda, işletmelerin rakiplerini ve pazar trendlerini yakından takip etmeleri hayati önem taşıyor. İşte...

HTML div elementi ve kullanım senaryoları

Her gün milyonlarca web sayfasını ziyaret ediyor, okuyor veya üzerlerinde işlem yapıyoruz. Peki, son kullanıcılar için görsel olarak renderlanan bu sayfaların arkasındaki kodlarda kullanılan...