WebP, web sitesi görselleri için JPG'den gerçekten daha küçük mü?
Aynı 538.6 KB fotoğrafı aynı kaydırıcıda JPG, WebP ve AVIF ile karşılaştırdık ve JPG kazandı. Bunun neden olduğunu ve adil karşılaştırmanın ne gösterdiğini burada bulabilirsiniz.
Her kılavuz, WebP'nin eşit kalitede JPG'den yaklaşık %30 daha küçük olduğunu söyler. Google'ın kendi çalışması bu rakamın kaynağıdır. Kendi kompresörümüz ile 3840x2160 boyutunda bir fotoğraf, texture.jpg 538.6 KB ile karşılaştırmayı yaptık ve aynı kaydırıcı pozisyonunda JPEG kazandı: 286.1 KB, WebP için 290.3 KB. Her ikisini de geçmesi beklenen AVIF ise 312.7 KB'da kaldı.
Hiçbir şey bozulmadı. Üç format bu kaydırıcıyı farklı okuyor ve bunlardan biri bunu kasıtlı olarak yapıyor. Hangisinin olduğunu bildiğinizde, sonuç beklediğiniz şekilde geri döner ve kullandığınız herhangi bir araca taşıyabileceğiniz bir alışkanlık kazanırsınız.
WebP, aynı kaydırıcıda JPG'den neden daha büyük çıktı?
Kompresörümüz, birçok aracın paylaştığı ve neredeyse hiçbiri tarafından bahsedilmeyen bir tuhaflığa sahiptir. Çıktı formatı JPEG olduğunda ve girdi zaten bir JPEG olduğunda, kaynak dosyadan kuantizasyon tablolarını okur, o dosyanın kaydedildiği kaliteden bir tahmin yapar ve ardından kaydırıcınızı bu tahmine göre çarpar. 80 kaydırıcısında 60 puan alan bir kaynak, 48 olarak kodlanır. WebP ve AVIF bu tür bir muamele görmez, bu nedenle 80, 80 anlamına gelir ve kodlayıcı ne yapması gerektiğini yapar. En üstteki bu işlem, WebP'de kelime anlamıyla 80'e karşı etkili 48 olan JPEG'di. Daha sert sıkıştırılmış bir dosya daha küçüktür.
Yeniden ölçeklendirme yerini kazanır. 60'ta yazılmış bir kayıplı JPEG'i 80'de yeniden kodlamak, detay eklemeden bayt ekler, bu nedenle kaydırıcıyı dosyada kalanların bir kesiri olarak değerlendiriyoruz. Daha derin sorun JPEG'in kendisine aittir: spesifikasyon, ham kuantizasyon tablolarını saklar ve asla bir kalite numarası saklamaz, bu nedenle Photoshop'ta 75, MozJPEG'de 75 ve bazı PHP betiklerinde 75, üç farklı dosyadır. İki kaydırıcıda sayıyı eşleştirmek ve bunu adil bir test olarak adlandırmak işe yaramaz.
Onları düzgün bir şekilde karşılaştırdığınızda boyutlar nasıl görünüyor?
| Kodla | Kaydırıcı | Çıktı |
|---|---|---|
| texture.jpg kaynağı | 538.6 KB | |
| JPEG (MozJPEG) | 80, 48'e yeniden ölçeklendi | 286.1 KB |
| WebP | 80, kelime anlamıyla alındı | 290.3 KB |
| AVIF | 80, kelime anlamıyla alındı | 312.7 KB |
| WebP | 63 | 200.6 KB |
| AVIF | 63 | 186.9 KB |
63'te, WebP bu 538.6 KB kaynağından 200.6 KB yazıyor. Aynı ayarda AVIF 186.9 KB'ye ulaşıyor ve 63, akıllı modumuzun AVIF için seçtiği bir sayı, bu nedenle formatı övmek için seçtiğimiz bir sayı değil. Önce çıktı boyutlarını eşleştirin, ardından her iki dosyayı tam boyutta yan yana açın ve hangisiyle yaşayabileceğinizi karar verin. Bu, sahip olunması gereken karşılaştırmadır.

O zaman sadece AVIF mi kullanmalıyım?
Bayt açısından, AVIF kazanıyor. Sabır açısından, kaybediyor. O 3840x2160 kareyi AVIF'e kodlamak tarayıcıda yaklaşık 10 ila 11 saniye sürdü, oysa JPEG ve WebP anında geri döndü. Tüm bunlar, kendi makinenizde çalışan WebAssembly'dir, bu nedenle bu, dizüstü bilgisayarınızın AV1 intra kodlaması yapmasıdır ve maliyet piksel sayısıyla ölçeklenir. Bilinmesi gereken ikinci bir tuzak var: eğer WASM kodlayıcı başarısız olursa, tarayıcının canvas kodlayıcısına geri döneriz ve canvas JPEG, PNG ve WebP yazabilir ama hiç AVIF yolu yoktur. Büyük bir parti için, Google, WebAssembly yapılarına karşı yerel avifenc aracını öneriyor ve bir sekmede on AVIF kodlamanın maliyeti de ölçülüyor.
Bir JPG'yi WebP'ye dönüştürdüğümde ne kaybederim?
Üç somut şey. Öncelikle meta veriler gider: sıkıştırma veya dönüştürme, görüntüyü ham piksellere çözer ve yeniden kodlar, bu nedenle EXIF, GPS koordinatları, ICC profili ve gömülü küçük resim çıktıdan tamamen kaybolur. Yönlendirme hayatta kalır, çünkü tarayıcı bunu çözümleme sırasında uygular. Yakalama tarihine ihtiyacınız varsa, orijinal dosyayı saklayın. Ve kayıplı bir JPG'nin kayıplı WebP olarak yeniden kodlanması, ilk kaybın üzerine yığılmış ikinci bir kayıptır, bu nedenle elinizdeki en iyi kaynaktan bir kez yapın.
Kromatik kayıp ikinci kayıptır. Kayıplı WebP, format içinde hiçbir yerde 4:4:4 seçeneği olmadan 4:2:0 alt örneklemeye kilitlenmiştir, bu nedenle sözdizimi vurgulu kodun veya doygun kırmızı üzerinde duran bir logonun ekran görüntüsü, aynı ağırlıktaki JPEG'den daha kötü görünebilir. Fotoğraflar umursamaz. Üçüncü kayıp ise renderlamadır: ilerleyici bir JPEG, erken bir tam çerçeve çizer ve baytlar geldikçe netleştirir, ancak WebP'nin ilerleyici modu yoktur, bu nedenle büyük bir dosya yeterince gelene kadar hiçbir şey göstermez. Zayıf bir bağlantıda bir kahraman görüntüsü üzerinde, bu sayfanın ne kadar hızlı hissettirdiğini değiştirir, dosya daha küçük olsa bile.
Eğer görüntü şeffaflığa sahipse WebP hala mı kazanıyor?
JPEG şeffaflık yapamaz. JPEG modunda hiçbir alfa kanalı yoktur, bu nedenle bir logo veya kesim için gerçek yarışma PNG ile WebP arasındadır ve bu iki formatın her biri için durum bu aynı dosyalarda ölçülmektedir. PNG sayılarımız, aşmanız gereken çıtayı belirler: alpha.png 900x606 boyutunda ve 942.4 KB, kayıpsız oxipng ile seviye 3'te 383.9 KB'ye düştü ve imagequant bunu bir palete indirdiğinde 98.3 KB'ye ulaştı, bu da şeffaflık intact ile %90 indirimdir. WebP, kayıplı bir dosya içinde bile alfa kaybını kayıpsız olarak saklar, bu nedenle kesim kenarları her iki şekilde de temiz kalır. Eğer kesimi ilk başta yapıyorsanız, arka plan kaldırıcılarımız her zaman alfa ile PNG yazar ve bu PNG daha sonra kompresöre doğrudan gidebilir.
Hangisini gerçekten sitede kullanmalıyım?
Fotoğraflar için WebP gönderin. Her mevcut tarayıcı bunu çözümler, Safari dahil, ve kaydırıcı sayıları karşılaştırmayı bıraktığınızda tasarruflar gerçektir. Dosyanın eski yazılımlarda açılması gerektiği yerlerde veya büyük bir kahramanın ilerleyici renderlamadan 30 KB'den daha fazla fayda sağladığı yerlerde JPG'yi saklayın. MDN'nin görüntü formatı kılavuzu tüm kütüphanenizi bir formata taahhüt etmeden önce kontrol etmeniz gereken referanstır.
Önce pikselleri kontrol edin. 3840px'lik bir fotoğraf, 960px'lik bir içerik sütununun asla göstereceğinden dört kat daha geniştir ve hiçbir kodek, yeniden boyutlandırmanın ücretsiz olarak sunduğunu geri vermez, bu nedenle yeniden boyutlandırıcı 25/50/75 ön ayarlarıyla bir tıkla genellikle format argümanını tamamen geçer. Kalite merdiveni de format kadar önemlidir. Aynı texture.jpg 60'ta 212.4 KB ve 30'da 131 KB'ye gitti ve akıllı mod 286.1 KB, %47 indirimle, sizden hiçbir şey sormadan karar verdi.
Bu testi kendi görüntümde nasıl çalıştırırım?
Açın kompresörü, fotoğrafınızı bırakın ve manuel moda geçin. JPG'yi seçin, boyutu not edin. Aynı kaydırıcıda WebP formatı açılır menüsünü değiştirin ve o boyutu not edin. Ardından WebP kaydırıcısını iki dosya birkaç KB içinde oturacak şekilde aşağı çekin ve yan yana tam boyutta açın, çünkü bu, size bir şey söyleyen tek karşılaştırmadır. Partiler 10 dosya ve 50 MB ile sınırlıdır. Kaydırıcıyı tamamen atlamak isterseniz, JPG'den WebP'ye ölçeklendirme olmadan sabit kalite 80 ile kodlar, WebP'den JPG'ye şeffaflık beyaza matlandığında geri döner ve PDF kılavuzu dosyaları büyüten tek dönüşümü kapsar.