WebP dosyalar üretir PNG'den yüzde 25 ila 35 daha küçük aynı görüntü için kullanılır ve PNG'nin meşhur şeffaf arka planını korur. Bu tek gerçek, Google'ın neden WebP'yi geliştirdiğini ve neden çoğu modern web sitesinin artık buna hizmet ettiğini açıklıyor. PNG'nin karşı argümanı erişimdir: WebP adını hiç duymamış yazılımlar da dahil olmak üzere şimdiye kadar yazılmış her programda açılır. Yani seçim hangi formatın teknik olarak üstün olduğu ile ilgili değil, çünkü WebP açıkça öyle. Bu, modern bir web sitesi için mi yoksa her yerde garantili uyumluluk için mi optimizasyon yaptığınızla ilgilidir. Bu kılavuz, sıkıştırma, şeffaflık, kalite modları, tarayıcı desteği, animasyon ve sayfa hızı açısından ikisini derinlemesine karşılaştırır ve ardından size seçim için net bir kural sunar.

WebP nedir ve Google neden bunu yaptı?

WebP, Google'ın 2010 yılında piyasaya sürdüğü, VP8 video codec bileşeninin sıkıştırma teknolojisi üzerine kurulu bir görüntü formatıdır. Amaç açıktı: web görsellerini küçülterek sayfaların daha hızlı yüklenmesini sağlamak. Google, görsellerin sayfa ağırlığına hakim olduğunu ve her görselin üçte birini tıraşlamanın web'i ölçülebilir şekilde hızlandıracağını bilecek verilere sahipti. WebP, en başından itibaren üç formatı aynı anda değiştirecek şekilde tasarlandı. PNG'nin şeffaflığı, JPG'nin fotoğraf sıkıştırması ve GIF'in animasyonu tek bir kapta. PNG'nin yapamadığı şeyleri yapabilmesinin nedeni de bu tutkudur.

PNG nedir ve neden kalıcıdır?

PNG, kayıpsız DEFLATE sıkıştırması kullanan ve tam alfa kanalı ekleyen, GIF'in patentsiz bir alternatifi olarak 1996 yılında geldi. Logolar, simgeler, ekran görüntüleri ve şeffaf arka plana ihtiyaç duyan tüm grafikler için standart haline geldi. Neredeyse otuz yıllık evrensel destek onun hendeğidir. Her tarayıcı, işletim sistemi, e-posta istemcisi, ofis paketi ve resim düzenleyici, kurulum gerektirmeden PNG'yi okur. Bir görüntünün kesinlikle bilinmeyen bir yerde açılması gerektiğinde PNG asla başarısız olmayan formattır.

Dosya boyutu: WebP açıkça kazanıyor

WebP, esasen her senaryoda PNG'den daha iyi sıkıştırılır. Şeffaflığa sahip tipik bir logo veya kullanıcı arayüzü grafiği için Yüzde 25 ila 35 azalma PNG'den WebP'ye kayıpsız geçiş. WebP'nin kayıplı moduna geçin ve alfa kanalını korurken tasarruf genellikle yüzde 60 ila 70 oranında önemli ölçüde artar. PNG'nin hiçbir şekilde kayıplı seçeneği yoktur, bu nedenle düşük uçta rekabet edemez. Düzinelerce resim öğesinin bulunduğu bir sitede bu fark, sayfa yükü başına yüzlerce kilobayta tekabül ediyor.

Boşluk daha akıllı sıkıştırmadan kaynaklanmaktadır. PNG'nin DEFLATE algoritması, ZIP'ten alınan genel amaçlı bir yöntemdir ve gerçek tekrarı bulmada iyidir. WebP, görüntüler için özel olarak oluşturulmuş tahmine dayalı kodlamayı kullanır, her bloğu komşularından tahmin eder ve yalnızca farkı depolar. Bu görüntü odaklı yaklaşım, DEFLATE'in göremediği tasarrufları sağlar; bu nedenle 2010'daki bir format, 1996'daki formatı bu kadar istikrarlı bir şekilde geride bırakıyor.

Şeffaflık: her ikisinde de var, WebP daha fazlasını yapıyor

JPG'den farklı olarak her iki format da tam alfa kanalı taşır, dolayısıyla logo her iki formatta da şeffaf kalır. Ancak WebP, PNG'nin eşleşemeyeceği bir şey ekliyor: kayıplı modda şeffaflık. PNG'nin şeffaflığı yalnızca kayıpsız sıkıştırmayla birlikte gelir, bu nedenle yarı şeffaf bir grafiğin tam kayıpsız ağırlıkta saklanması gerekir. WebP, aynı anda şeffaf bir arka plana ve agresif sıkıştırmaya sahip olmanızı sağlar; bu da tam olarak ağır bir PNG logosunun ihtiyaç duyduğu şeydir. Daha az ağırlığa sahipken şeffaf kalması gereken kullanıcı arayüzü varlıkları ve ürün kesitleri için bu kombinasyon WebP'nin en güçlü argümanıdır.

Kalite: kayıpsız ve kayıplı modlar

WebP her iki modu da sunar; bu da onu PNG'den farklı olarak esnek kılar:

Kayıpsız WebP Daha küçük bir dosya oluştururken, piksel piksel PNG'yi tam olarak eşleştirir. Kalitede bir değiş-tokuş yoktur, yalnızca boyut kazancı vardır.
Kayıplı WebP JPG'nin yaptığı gibi ayrıntıları atar, dosyaları daha da küçültür ve JPG'den farklı olarak hâlâ şeffaflığı koruyabilir.

PNG yalnızca kayıpsız sunar, bu yüzden büyük kalır. Mükemmel bir kopyaya ihtiyacınız varsa, kayıpsız WebP onu size daha küçük boyutta verir. Görünmez kaybı kabul edebiliyorsanız, kayıplı WebP size boyutun bir kısmını verir. Her iki durumda da PNG'yi yenen bir WebP ayarı vardır.

Tarayıcı ve yazılım desteği

Bu PNG'nin tek gerçek avantajıdır ve giderek daralmaktadır. Her modern tarayıcı WebP'yi desteklerChrome, Firefox, Safari ve Edge dahil olmak üzere açık web'de uyumluluk sorunu esasen çözülmüştür. Boşluklar başka yerlerde yatıyor: bazı eski masaüstü yazılımları, belirli e-posta istemcileri, eski Office sürümleri ve eski platformlar hala WebP'yi reddediyor. Yükleme formları diğer bir tuzaktır, çünkü birçoğu yalnızca JPG ve PNG'yi kabul eder ve bir WebP dosyasını doğrudan reddeder.

Yani dürüst özet şu ki, WebP web siteniz için güvenli ve bilinmeyen sistemlere verdiğiniz dosyalar açısından risklidir. PNG, kontrolünüzde olmayan her şey için evrensel bir geri dönüş olmaya devam ediyor.

Animasyon: WebP de GIF'in yerini alıyor

PNG'de eksik olan bir yetenek animasyondur. Standart PNG tek bir kare içerir ve APNG uzantısı mevcut olsa da destek her zaman tutarsız olmuştur. WebP destekler animasyon yerel olarak tam alfa ile, GIF'in 256 yerine milyonlarca renk göstererek eşdeğer GIF'ten çok daha küçük dosyalar üretir. Kısa döngülü bir grafik için formatlar arasında seçim yapıyorsanız, WebP hem PNG'yi hem de GIF'i kararlı bir şekilde yener.

WebP neden web sitelerini hızlandırır?

Sayfa ağırlığı doğrudan beslenir En Büyük İçerikli Boya, Google'ın Önemli Web Verilerinden biri ve onaylanmış bir sıralama sinyali. Resimler genellikle bir sayfadaki en ağır şeydir; dolayısıyla her birini üçte bir oranında kesmenin yükleme süresi, LCP puanı ve hemen çıkma oranı üzerinde ölçülebilir bir etkisi vardır. Daha hızlı sayfalar aynı zamanda daha iyi dönüşüm sağlar; bu nedenle performans çalışması iki kat kazanç sağlar.

Çoğu sitenin kullandığı pratik model ilericidir: WebP'yi onu destekleyen tarayıcılara sunun ve geri kalanı için PNG veya JPG'ye geri dönün. Modern HTML bunu resim öğesiyle otomatik olarak gerçekleştirir ve çoğu içerik yönetim sistemi ve görüntü hizmeti bunu sizin için yapar. Daha eski müşteriler için hiçbir şeyi bozmadan hızlı kazanmayı elde edersiniz.

Her format ne zaman kullanılmalı?

Kullanım WebP Web sitesi görselleri için, özellikle de daha küçük dosyaların daha hızlı sayfalar anlamına geldiği şeffaf logolar ve simgeler için.
Kullanım WebP şeffaflığa ve küçük boyuta ihtiyacınız olduğunda, her ikisini de sunan tek ortak format olduğundan.
Kullanım PNG görüntünün eski yazılım ve e-posta istemcileri dahil herhangi bir programda açılması gerektiğinde.
Kullanım PNG Kabul edilen formatları açıkça listeleyen ve WebP'yi içermeyen formları ve sistemleri yüklemek için.
Kullanım PNG Arşiv yöneticiniz olarak, evrensel destek sonsuza kadar saklayacağınız bir dosya için boyuttan daha önemli olduğundan.

PNG'i WebP'ye dönüştürme

Dönüştürme işlemi kurulum gerektirmez. Bizim açın dönüştürücü, PNG'nizi ekleyin ve WebP'yi dışa aktaran şeffaflığı koruyan seçeneği seçin. İşleme, HTML5 Canvas API aracılığıyla yerel olarak yürütülür, dolayısıyla hiçbir şey yüklenmez ve birden fazla dosyayı aynı anda toplu olarak oluşturabilirsiniz. Dosya anlamlı derecede hafiflerken şeffaf arka plan bozulmadan kalır. Tam anlatım şuradadır PNG'den WebP'ye dönüştürme kılavuzu.

AVIF'e ne dersiniz?

Bağlam açısından bilmeye değer: AVIF, WebP'den bile daha iyi sıkıştıran, genellikle yüzde 20 daha küçük olan daha yeni bir formattır ve aynı zamanda şeffaflığı ve animasyonu da destekler. Tarayıcı desteği artık iyi ancak WebP'nin biraz gerisinde, yazılım desteği ise daha da geride. Günümüzde çoğu site için WebP, en iyi tasarruf ve destek dengesine sahip pragmatik bir seçimdir; benimsenme arttıkça AVIF de izlenmeye değerdir. PNG her ikisinin de altında geri dönüş olmaya devam ediyor.

Karar

WebP teknik açıdan kapsamlı bir şekilde kazanır: daha küçük dosyalar, hem kayıpsız hem de kayıplı modlarda şeffaflık, animasyon ve tam modern tarayıcı desteği. PNG hala önemli olan bir konuda kazanıyor; o da kesinlikle her yerde sorgusuz sualsiz açılıyor. Web siteniz için WebP'yi, bilinmeyene gönderdiğiniz her şey için PNG'yi kullanın ve her ikisini de istediğinizde WebP'yi PNG geri dönüşüyle birlikte sunun. Daha geniş formatlı resim için, PNG ve JPG kılavuzu fotoğrafların sığacağı yerleri kapsar.

Gerçek dünya boyutunda örnekler

Soyut yüzdeler gerçek rakamlardan daha az yardımcı oluyor; işte tipik varlıklardaki farkın nasıl göründüğü:

bir 500 x 500 piksel logo şeffaflıkla: PNG-24 olarak yaklaşık 45 KB, kayıpsız WebP olarak yaklaşık 30 KB ve alfa kanalı bozulmadan kayıplı WebP olarak 12 KB'nin altında.
bir tam genişlikte kahraman grafiği yumuşak gölgelerle: PNG olarak genellikle 400 KB veya daha fazla, kayıpsız WebP olarak yaklaşık 260 KB ve kayıplı WebP olarak 100 KB'nin oldukça altında.
bir kullanıcı arayüzü simge seti yirmi küçük grafikten oluşan: tüm set, herhangi bir kayıplı ayarlama yapılmadan önce yaklaşık 200 KB'den 130 KB'a kayıpsız bir şekilde düşebilir.

Kahraman örneğini bir düzine sayfaya yaydığınızda tasarruf, yavaş bir bağlantıda saniyeler süren yükleme süresine dönüşür; bu da tam olarak Core Web Vitals'ın ölçtüğü türden bir farktır.

Mevcut bir PNG kitaplığını dönüştürme

Çoğu site temiz bir şekilde başlamaz; halihazırda dağıtılmış yüzlerce PNG'leri var. Kurulumunuza bağlı olarak üç yaklaşım işe yarar. Siteniz modern bir çerçeve veya CMS üzerinde çalışıyorsa, görüntü hattı muhtemelen WebP'yi otomatik olarak dönüştürür ve sunar; dolayısıyla dosyalar yerine bir ayarı değiştirirsiniz. Bir CDN veya görsel hizmeti kullanıyorsanız çoğu teklif otomatik format anlaşması, aynı kaynak dosyadan WebP'yi kabul eden tarayıcılara ve PNG'yi kabul etmeyenlere teslim eder. Dosyaları elle yönetiyorsanız, varlıkları toplu olarak dönüştürmek ve referansları güncellemek işe yarar, ancak bu çok fazla emek gerektirir.

Hangi rotayı kullanırsanız kullanın orijinal PNG'leri saklayın. Onlar sizin efendilerinizdir ve daha sonra WebP'yi reddeden bir sistem için onlara ihtiyacınız olabilir.

Kaçınılması gereken yaygın WebP hataları

WebP'ye geçiş yapan insanları birkaç tuzak yakalıyor:

Arşiv kalıplarınızı dönüştürme: WebP desteği masaüstü yazılımlarda daha dar olduğundan, kopyaları teslim için dönüştürün ve PNG orijinallerini saklayın.
Metin grafiklerinde kayıplı WebP kullanma: kayıplı sıkıştırma, tıpkı JPG'de olduğu gibi keskin harflerin lekelenmesine neden olur. Ekran görüntüleri ve metin ağırlıklı görseller için kayıpsız WebP kullanın.
Geri dönüşün atlanması: WebP'yi PNG veya JPG alternatifi olmadan sunmak, eski istemciler ve bazı e-posta bağlamları için görüntüyü bozar.
Formları yüklemek için WebP'yi gönderme: birçoğu yalnızca JPG ve PNG'yi kabul eder ve dosyayı doğrudan reddeder.

Bunların hiçbiri WebP'den kaçınmak için neden değildir. Bunlar, PNG'yi ustalar ve kontrolünüzdeki her şey için saklarken, ait olduğu yerde, yani modern tarayıcılara teslim edilmesinin nedenleridir.

Tarayıcılar aslında formatı nasıl seçiyor?

İki formatta hizmet vermek karmaşık gibi görünse de mekanizma basit ve otomatiktir. Her tarayıcı, her resim isteğiyle birlikte anladığı biçimleri listeleyen bir Kabul Et başlığı gönderir. Bir sunucu veya CDN bu başlığı okur ve aynı URL'den WebP'yi desteğin reklamını yapan bir tarayıcıya veya PNG'yi yapmayan bir tarayıcıya döndürür. HTML'de aynı şeyi resim öğesiyle açık bir şekilde yapabilirsiniz; önce bir WebP kaynağını, sonra da bir PNG yedek listesini listeleyebilirsiniz; tarayıcı okuyabildiği ilkini seçer ve gerisini yok sayar. Her iki durumda da hiçbir ziyaretçi kırık bir görüntü görmezve modern tarayıcılar sessizce daha küçük dosyayı alırken, eski tarayıcılar uyumlu olanı alır.

Sık sorulan sorular

WebP PNG'den daha mı iyi?

Teknik olarak evet. WebP dosyaları yüzde 25 ila 35 daha küçüktür, şeffaflığı koruyun ve PNG'de bulunmayan kayıplı ve animasyon modları ekleyin. PNG yalnızca evrensel uyumlulukta kazanır.

WebP, PNG gibi şeffaflığı destekliyor mu?

Evet ve daha fazlası. WebP hem kayıpsız hem de kayıplı modlarda bir alfa kanalını tutarPNG yalnızca kayıpsız sıkıştırmayla şeffaflık sunar.

WebP PNG'den ne kadar daha küçüktür?

Tipik olarak Kayıpsız olarak yüzde 25 ila 35 daha küçükve kayıplı modda yüzde 60 ila 70 daha küçükken şeffaflığı korur.

Tüm tarayıcılar WebP'yi destekliyor mu?

Her modern tarayıcı WebP'yi desteklerChrome, Firefox, Safari ve Edge dahil. Bazı eski masaüstü yazılımları ve yükleme formları hâlâ bunu reddediyor.

Hangi formatlar şeffaflığı ve animasyonu destekler?

WebP her ikisini de yapar. PNG'de şeffaflık vardır ancak güvenilir bir animasyon yoktur ve GIF animasyonludur ancak kaba şeffaflıkla 256 renkle sınırlıdır.

Bir web sitesi için WebP mi yoksa PNG mi daha iyi?

Hız için WebP. Daha küçük dosyalar En Büyük İçerikli Boya'yı iyileştirir, bir Önemli Web Verileri sıralama sinyali. Daha eski istemciler için bir PNG yedeği sunun.

WebP mi yoksa AVIF mi kullanmalıyım?

Şimdilik WebP. AVIF yaklaşık yüzde 20 daha iyi sıkıştırır ancak desteği daha dardıryani WebP, günümüzün tasarruf ve uyumluluk arasındaki pragmatik dengesidir.

WebP dosyasını bir forma yükleyebilir miyim?

Çoğu zaman hayır. Çoğu yükleme formu yalnızca JPG ve PNG'yi kabul eder, dolayısıyla bir sistem kabul edilen formatları listeleyip WebP'yi çıkardığında bunlardan birine dönüştürün.

Mevcut PNG dosyalarımı WebP'ye dönüştürmeli miyim?

Kopyaları teslim için dönüştürün, ana kopyalarınızı değil. Orijinal PNG'leri saklayınWebP desteği masaüstü yazılımlarda ve yükleme formlarında daha dar olduğundan.

Kayıplı WebP metin içeren ekran görüntüleri için iyi midir?

Hayır. Kayıplı sıkıştırma keskin harfleri lekeliyortam olarak JPG'nin yaptığı gibi. Metin ağırlıklı grafikler ve ekran görüntüleri için kayıpsız WebP kullanın.

WebP'de hâlâ bir PNG yedeğine ihtiyacım var mı?

Maksimum güvenlik için evet. Modern tarayıcıların tümü WebP okur, ancak eski masaüstü yazılımları, bazı e-posta istemcileri ve birçok yükleme formu hâlâ bunu yapmıyor.

Bir tarayıcı WebP'nin mi yoksa PNG'nin mi yükleneceğini nasıl bilir?

aracılığıyla Her istekte gönderdiği başlığı kabul etdesteklenen biçimleri listeleyen. Sunucular ve CDN'ler bunu okur ve WebP veya PNG yedeğini otomatik olarak döndürür.