WebP Nedir?
Kısa tanım
WebP, Google'ın geliştirdiği ve 2010'da duyurduğu bir web görsel formatıdır. Kayıplı ve kayıpsız sıkıştırmayı, saydamlığı (alfa kanalı) ve animasyonu tek formatta destekler. Benzer görsel kalitede çoğunlukla JPEG ve PNG dosyalarından daha küçük dosyalar üretir; bu da sayfaların daha az veriyle ve daha hızlı yüklenmesine yardımcı olur. Bugün tüm modern tarayıcılar WebP'yi destekler.
Diğer adları: WebP formatı, .webp, image/webp
Teknik özellikleri
WebP'nin kayıplı modu, VP8 video kodeğinin tek kare sıkıştırma tekniğine dayanır; kayıpsız modu ise bunun için ayrıca geliştirilmiş bir algoritma kullanır. Böylece tek bir format; JPEG'in fotoğraf sıkıştırmasını, PNG'nin saydamlığını ve GIF'in animasyonunu karşılayabilir.
Google'ın kendi ölçümlerine göre kayıpsız WebP dosyaları PNG'lere kıyasla yaklaşık %26 daha küçüktür; kayıplı WebP dosyaları ise eşdeğer SSIM kalite endeksinde benzer JPEG'lerden %25–34 daha küçüktür. Bu rakamlar bir test setine aittir; gerçek kazanç görselin içeriğine ve kodlama ayarlarına göre değişir, bu yüzden kendi görsellerinizle denemek gerekir. Bilinmesi gereken bir sınır da şudur: WebP görsellerin her kenarı en fazla 16.383 piksel olabilir. Web'de bu nadiren sorun olur, ama çok büyük panoramalar veya baskı dosyaları için uygun değildir.
Tarayıcı desteği
Chrome, Edge, Firefox ve Opera WebP'yi uzun süredir destekliyor; Safari'nin de 2020'de 14. sürümle desteği eklemesinden bu yana WebP modern tarayıcılarda evrenseldir. Bugün yedek format sunmak çoğunlukla çok eski cihazlar, bazı e-posta istemcileri veya görselin site dışında işlendiği özel durumlar içindir.
WebP mi, AVIF mi?
AVIF, AV1 video kodeğine dayanan daha yeni bir formattır ve birçok fotoğrafta aynı kalitede WebP'den de küçük dosyalar üretebilir. Karşılığında kodlaması belirgin biçimde daha yavaştır ve düşük kalite ayarlarında ince ayrıntıları yumuşatma eğilimi gösterir. AVIF de artık tüm büyük tarayıcılarda destekleniyor, ancak bu destek WebP'ye göre daha yenidir.
| Özellik | JPEG | PNG | WebP | AVIF |
|---|---|---|---|---|
| Kayıplı sıkıştırma | Evet | Hayır | Evet | Evet |
| Kayıpsız sıkıştırma | Pratikte hayır | Evet | Evet | Evet |
| Saydamlık | Hayır | Evet | Evet | Evet |
| Animasyon | Hayır | APNG ile | Evet | Evet |
Pratikte pek çok site her ikisini birlikte sunar: tarayıcı destekliyorsa AVIF, değilse WebP, en sonda JPEG veya PNG.
picture öğesiyle yedekli kullanım
Birden fazla format sunmanın standart yolu picture öğesidir. Tarayıcı source satırlarını sırayla okur ve type değerini desteklediği ilk kaynağı seçer; hiçbirini desteklemiyorsa img içindeki dosyayı kullanır:
<picture>
<source srcset="/img/ofis.avif" type="image/avif">
<source srcset="/img/ofis.webp" type="image/webp">
<img src="/img/ofis.jpg" alt="Ofisin ortak çalışma alanı"
width="1200" height="800" loading="lazy">
</picture>alt, width, height ve loading gibi özellikler her zaman img üzerine yazılır; picture yalnızca kaynak seçimini yönetir. Alternatif yöntem sunucu tarafında içerik anlaşmasıdır: tarayıcı Accept başlığında image/avif veya image/webp bildirdiğinde aynı URL'den farklı format döndürülür. Birçok CDN ve görsel optimizasyon servisi bunu otomatik yapar. Bu durumda yanıtta Vary: Accept başlığının bulunması, ara önbelleklerin bir tarayıcıya üretilmiş formatı başka bir tarayıcıya sunmasını önler.
Pratik öneriler
- Format değiştirmek doğru boyutlandırmanın yerini tutmaz. 400 piksel genişliğinde gösterilen bir alana 3000 piksellik bir WebP göndermek hâlâ israftır;
srcsetvesizesile ekran genişliğine uygun dosya sunmak responsive tasarımın görsel tarafıdır. - Logo, ikon ve çizimler için önce SVG'yi değerlendirin; vektörel grafikleri raster formata çevirmek çoğu zaman gereksizdir.
- Ana görseldeki dosya boyutu düşüşü LCP süresine doğrudan yansıyabilir; değişiklikten sonra ölçerek doğrulayın.
- Google Görseller, WebP ve AVIF dahil yaygın görsel formatlarını dizine ekler; format değişikliği görsellerin aranabilirliğini kaybettirmez.
Format ayrıntıları ve kodlama araçları için Google'ın WebP sayfası birincil kaynaktır.