WebP kayıpsızın PNG'ye göre size gerçekte ne kazandırdığı

Kısa versiyon

WebP kayıpsız, aynı pikseller için çoğu zaman PNG'den daha küçüktür. İnsanların onu kullanmasının pratik nedeni budur.

Ama burada "çoğu zaman" ifadesi önemlidir. WebP kayıpsız, her PNG için sihirli bir alternatif değildir. En büyük tasarrufu genellikle şeffaflık içeren görsellerde, ekran görüntülerinde, UI yakalamalarında ve grafik/fotoğraf karışımı içeriklerde sağlar. Çok küçük varlıklarda, yoğun biçimde optimize edilmiş paletli PNG'lerde ve basit ikonlarda az kazandırabilir ya da nadiren daha kötü sonuç verebilir.

Gerçek bir web sitesini optimize ediyorsanız doğru soru "WebP, PNG'den daha mı iyi?" değildir. Soru şudur: "PNG'lerimin hangileri, uyumluluk veya iş akışı sorunu yaratmadan WebP kayıpsız olarak anlamlı ölçüde küçülüyor?"

Bu daha dar bir sorudur ve yanıtlaması çok daha kolaydır.

Burada "kayıpsız" ne anlama gelir

Kayıpsız, kodu çözülen piksellerin kaynak piksellerle tam olarak eşleşmesi demektir. Bir PNG, WebP kayıpsıza dönüştürülüp yeniden çözüldüğünde, görsel pikselleri aynı olmalıdır.

Bu, dosyanın aynı olduğu anlamına gelmez. Meta veriler, renk profili işleme biçimi, yardımcı PNG parçaları, gama bilgileri, zaman damgaları ve araca özgü parçalar; dönüşüm hattınıza bağlı olarak değiştirilebilir, kaldırılabilir veya farklı şekilde temsil edilebilir.

Arşiv görselleri, baskı iş akışları, bilimsel görüntüler, hukuki kanıtlar ya da dosya kapsayıcısının piksel dışı önemli bilgiler taşıdığı herhangi bir durumla uğraşıyorsanız bu ayrım önemlidir. Sıradan web dağıtımı için çoğu ekip öncelikle görsel piksellere, şeffaflığa, boyutlara ve renk tutarlılığına önem verir.

Kullanıcı tarafından sağlanan görseller yayımlıyorsanız meta veriler aynı zamanda bir gizlilik konusudur. Bu daha geniş konuyu fotoğrafları çevrimiçi paylaşmadan önce EXIF meta verilerini kaldırma yazımızda ele aldık; ancak aynı ilke burada da geçerlidir: görsel optimizasyonu neyi koruduğu ve neyi kaldırdığı konusunda açık olmalıdır.

PNG neden iyi sıkıştırır ve nerede sınırına gelir

PNG çok iyi bir formattır. Web'de varsayılan hâline gelmesinin haklı nedenleri vardır:

• Kayıpsızdır.
• Alfa şeffaflığını destekler.
• Geniş ölçüde desteklenir.
• Öngörülebilirdir ve çalışması kolaydır.
• Düz grafikler, ekran görüntüleri, logolar ve UI varlıkları için mükemmeldir.

PNG sıkıştırması, görsel satırlarını filtreleyip ardından DEFLATE sıkıştırması uygulayarak çalışır. Bu kombinasyon özellikle yakındaki pikseller birbirine benzediğinde etkilidir.

Sorun PNG'nin kötü olması değildir. Sorun PNG'nin eski olmasıdır. Sıkıştırma modelinin kullanabileceği hileler, yeni formatlara göre daha azdır. Bir PNG'yi iyi bir kodlayıcıyla optimize etmiş olsanız bile, formatın kendisi bazı desenleri WebP kayıpsız kadar verimli temsil edemediği için hâlâ gereksiz bayt bırakıyor olabilirsiniz.

WebP kayıpsızın devreye girdiği yer burasıdır.

WebP kayıpsız neyi farklı yapar

WebP kayıpsız, filtrelenmiş satırların üzerine eklenmiş genel amaçlı bir sıkıştırma katmanı yerine, özellikle görseller için tasarlanmış bir sıkıştırma sistemi kullanır. Arka planda tekrar eden veya tahmin edilebilir piksel desenlerini kompakt biçimde temsil etmek için öngörülü kodlama, renk dönüşümleri, paletler, geriye dönük referanslar ve entropi kodlama gibi teknikler kullanabilir.

Uygulama ayrıntılarını ezberlemeniz gerekmez. Yararlı zihinsel model şudur:

PNG satırları iyi sıkıştırır. WebP kayıpsız, görsel yapısını tarif etmek için daha fazla yola sahiptir.

Bu ek esneklik, WebP kayıpsızın aynı kaynak görselden sık sık daha küçük dosyalar üretebilmesinin nedenidir.

Google, kendi çalışmalarında WebP kayıpsız görselleri tarihsel olarak PNG'ye kıyasla ortalama yaklaşık %26 daha küçük olarak tanımlamıştır. Bunu bir vaat değil, yön gösteren bir ölçüt olarak düşünün. Sizin görselleriniz bir ortalama değildir. Tasarım sisteminiz, ekran görüntüleriniz, ürün fotoğraflarınız, illüstrasyonlarınız, dışa aktarılan varlıklarınız ve CMS yüklemeleriniz kendi davranışını gösterecektir.

WebP kayıpsız genellikle en çok nerede tasarruf sağlar

Şeffaf görseller

PNG, alfa şeffaflığı nedeniyle yaygın olarak kullanılır. WebP kayıpsız da alfayı destekler ve çoğu zaman bunu verimli biçimde sıkıştırır.

Bu şunlar için yararlıdır:

• Ürün dekupe görselleri
• Çıkartmalar ve rozetler
• Arayüz bindirmeleri
• Şeffaf arka planlı diyagramlar
• Gereğinden büyük dışa aktarılmış logolar

Alfa kanalı büyük tahmin edilebilir bölgeler, yumuşak kenarlar veya tekrar eden şekiller içerdiğinde tasarruf fark edilir olabilir. Şeffaf ürün görselleriyle dolu bir kataloğunuz varsa WebP kayıpsızı erken test etmeye değer.

Ekran görüntüleri ve UI yakalamaları

Ekran görüntüleri genellikle büyük düz alanlar, tekrar eden arayüz bileşenleri, metin, ikonlar, gölgeler ve bazı fotoğrafik bölgeler içerir. Bu karışım, özellikle büyük boyutlarda PNG için zorlayıcı olabilir.

WebP kayıpsız bu görselleri çoğu zaman iyi işler. Optimize edilmiş PNG olarak 900 KB olan tam sayfa bir UI ekran görüntüsü, kayıpsız WebP olarak 500–700 KB olabilir. Bazen tasarruf daha büyüktür. Bazen daha küçüktür. Ancak kategori umut vericidir.

Bu ekran görüntüleri dokümantasyonda, pazarlama sayfalarında, kullanıcı alıştırma akışlarında veya vaka çalışmalarında yer alıyorsa toplam etki gerçek olabilir.

Karma illüstrasyon ve görsel içerik

Modern web grafiklerinin çoğu ne tamamen illüstrasyon ne de tamamen fotoğraftır. Ürün UI'ı, geçişler, küçük ikonlar, metin etiketleri ve gömülü fotoğraflar içeren bir hero görseli düşünün.

PNG bunu kusursuz koruyabilir ama büyük bir dosya üretebilir. Kayıplı WebP veya AVIF fazla zorlandığında metin ve kenarlar çevresinde artefaktlar oluşturabilir. Keskin kenarlar önemli olduğunda WebP kayıpsız makul bir orta yol olabilir.

AVIF ve kayıplı WebP dahil görsel formatları arasında daha geniş bir karar ağacı için 2026'da görsel formatları: AVIF ne zaman WebP'yi geçer, ne zaman geçmez yazısına bakın.

PNG nerede hâlâ daha iyi olabilir

Çok küçük ikonlar ve basit varlıklar

Çok küçük dosyalarda format ek yükü önemlidir. 650 baytlık bir PNG ikon, dönüşüm için bariz bir aday değildir. WebP 80 bayt tasarruf sağlayabilir ya da daha büyük hâle gelebilir.

Bu ölçekte operasyonel karmaşıklık, faydanın önüne geçebilir. Dosya zaten çok küçükse, oluşturmayı engellemiyorsa ve uzun süre önbelleğe alınıyorsa muhtemelen düzeltmeniz gereken daha iyi şeyler vardır.

Özenle optimize edilmiş paletli PNG'ler

Bazı PNG'ler, sınırlı palet kullandıkları için beklenenden çok daha küçüktür. İyi bir indeksli renk PNG'sini basit grafiklerde geçmek zor olabilir.

Bu özellikle şunlar için geçerlidir:

• Küçük logolar
• Piksel sanatı
• Düz ikonlar
• Basit diyagramlar
• Az renkli grafikler

WebP'yi özensiz PNG dışa aktarımlarıyla karşılaştırırken dikkatli olun. PNG, gereksiz meta veriler ve kötü sıkıştırma ayarlarıyla doğrudan bir tasarım aracından geldiyse WebP çok daha iyi görünebilir. Bu, WebP'nin iyi optimize edilmiş bir PNG'yi aynı farkla geçtiği anlamına gelmez.

Adil bir test, WebP kayıpsızı optimize edilmiş PNG ile karşılaştırır; yüklenmiş olan rastgele dosyayla değil.

Aslında kayıplı olması gereken görseller

Sessiz hata şudur: ekipler, görsel en başta PNG olmamalıyken PNG'yi WebP kayıpsıza dönüştürür.

Fotoğraflar olağan örnektir. PNG olarak kaydedilmiş tam renkli bir fotoğraf çok büyük olabilir. Bunu WebP kayıpsıza dönüştürmek dosyayı küçültebilir, ancak genellikle yine de yüksek kaliteli kayıplı WebP veya AVIF'ten çok daha büyük olur.

Kullanıcı farkı algılayamıyorsa kayıpsızlık çoğu zaman yanlış hedeftir. Ürün fotoğrafçılığı, editoryal görseller, arka planlar ve portreler genellikle makul kalite ayarlarına sahip kayıplı bir formata aittir.

Kayıpsız, kesin piksellerin önemli olduğu durumlar için ayrılmalıdır: UI ekran görüntüleri, diyagramlar, metin ağırlıklı grafikler, şeffaflık, üretilmiş grafikler ve kayıplı sıkıştırma altında gözle görülür şekilde bozulan varlıklar.

Baytların dışında ne kazandırır

En bariz tasarruf aktarım boyutudur. Daha küçük görsel dosyaları genellikle daha az bant genişliği, daha hızlı indirmeler ve yavaş bağlantılarda daha iyi davranış anlamına gelir.

Ancak ikincil faydalar da vardır:

• Kotalı planlardaki ziyaretçilerin daha az veri kullanması
• Görsel önbelleğinin daha hızlı dolması
• Azalan CDN bant genişliği
• Ölçek büyüdükçe daha düşük depolama ve yedekleme hacmi
• Performans bütçeleri üzerinde daha az baskı

Bu tasarruflar eşit dağılmaz. 2 MB'lık tek bir PNG'nin 900 KB'lık WebP'ye dönüştürülmesi, her biri 100 bayt küçültülen elli ikondan daha önemlidir.

Bu yüzden görsel optimizasyonu format ideolojisine göre değil, sayfa etkisine göre önceliklendirilmelidir. Lighthouse görsel dağıtımını işaretliyorsa bunu bir hüküm değil, ipucu olarak okuyun. Panik yapmadan Lighthouse raporu okuma rehberimiz, anlamlı performans sorunlarını gürültülü tanılardan nasıl ayıracağınızı açıklar.

Kod çözme maliyeti dengesi

Daha küçük dosyalar tek performans değişkeni değildir. Tarayıcıların görselleri boyamadan önce kodunu da çözmesi gerekir.

PNG kod çözme olgundur ve genellikle hızlıdır. WebP kod çözme de geniş ölçüde desteklenir ve verimlidir, ancak bazı durumlarda daha fazla CPU maliyeti yaratabilir. Modern cihazlarda bu nadiren engelleyicidir; ancak düşük seviye telefonlarda, görsel ağırlıklı sayfalarda veya ekranın ilk görünen bölümündeki büyük varlıklarda ölçmeye değer.

Pratik kural: WebP kayıpsız büyük bir PNG'yi %30–50 küçültüyorsa ağ tasarrufu genellikle baskın gelir. Küçük bir PNG'yi %3 küçültüyorsa bu denge muhtemelen önemsemeye değmez.

Performans çalışması bu tür eşik kararlarıyla doludur. Her baytı aynı yoğunlukla optimize etmeyin.

Basit bir test yöntemi

Tek bir görsel değil, temsil edici bir grup kullanın.

Gerçek sitenizden örnekler içeren bir klasör oluşturun:

• Logolar ve ikonlar
• Ekran görüntüleri
• Ürün dekupe görselleri
• Diyagramlar
• CMS'ye yüklenmiş PNG'ler
• Sosyal önizleme görselleri
• Büyük hero grafikleri

Sonra üç şeyi karşılaştırın:

1. Yüklendiği hâliyle özgün PNG
2. Optimize edilmiş PNG
3. WebP kayıpsız sürüm

Komut satırı iş akışlarında ekipler genellikle oxipng, pngcrush, zopflipng veya cwebp -lossless gibi araçlar kullanır. Tam aracın önemi, benzeri benzerle karşılaştırma disiplininden daha azdır.

Şunları izleyin:

• Dosya boyutu
• Kod çözüldükten sonra piksel eşitliği
• Hedef tarayıcılarda görsel oluşturma
• Şeffaflığın doğruluğu
• Renk görünümü
• Derleme süresi
• CMS veya tasarım iş akışı sürtünmesi

Basit bir elektronik tablo yeterlidir. Özgün dosya boyutunu, optimize edilmiş PNG boyutunu, WebP kayıpsız boyutunu, tasarruf yüzdesini ve görselin yer aldığı sayfayı ekleyin.

Sonra toplam tasarruf edilen bayta göre sıralayın. Bu sıralama genellikle ne yapmanız gerektiğini gösterecektir.

Dağıtım: eski istemcileri gelişigüzel bozmayın

WebP desteği artık modern tarayıcılarda geniştir. Çoğu halka açık web sitesi için kullanımı güvenlidir. Yine de gömülü webview'ler, e-posta istemcileri, eski kurumsal tarayıcılar, yerel uygulamalar veya alışılmadık tarayıcı botları işin içindeyse PNG'yi doğrudan değiştirmeden önce test edin.

Tutucu kalıp, PNG'yi yedek olarak tutmak ve desteklendiği yerde WebP sunmaktır:

<picture>
  <source srcset="diagram.webp" type="image/webp">
  <img src="diagram.png" alt="Diagram showing the checkout flow">
</picture>

Bu yaklaşım sıkıcıdır ve sıkıcı olmak iyidir. WebP desteği olan kullanıcılar daha küçük dosyayı alır. Diğer herkes PNG'yi alır.

Derleme sisteminiz varlıklara parmak izi ekliyorsa ve CDN'iniz bunları düzgün önbelleğe alıyorsa bunu sürdürmek zor değildir. CMS'niz alternatif formatları zahmetli hâle getiriyorsa tüm medya kitaplığını tek sprintte dönüştürmeye çalışmak yerine en büyük ve en çok tekrarlanan görsellerle başlayın.

Gizlilik ve yerel işleme

Görsel dönüştürme çoğu zaman derleme hatlarında veya sunucu taraflı medya servislerinde gerçekleşir. Bu, birçok ekip için uygundur. Ancak hassas ekran görüntüleri, müşteri yüklemeleri veya iç belgelerle çalışıyorsanız dosyaların nerede işlendiğinin farkında olun.

Tarayıcı taraflı görsel araçları, birçok basit dönüşüm, önizleme ve meta veri kontrolü için yeterince iyi hâle geldi. Sınırları vardır, ancak yerel işleme özel görsellerin gereksiz yere yüklenmesini azaltabilir. Bu dengeleri görselleri tarayıcıda işlemenin neden gizlilik kazancı olduğu yazısında ele aldık.

İç varlıklar için ana nokta politika netliğidir. Görsellerin cihazdan çıkıp çıkmadığını, dönüştürülmüş sürümlerin nerede saklandığını ve meta verilerin korunup korunmadığını bilin.

Pratik bir kural

Aşağıdaki üçü de doğru olduğunda WebP kayıpsız kullanın:

• Kaynak şu anda PNG.
• Kesin pikseller veya temiz şeffaflık önemli.
• WebP kayıpsız, optimize edilmiş PNG ile karşılaştırıldıktan sonra anlamlı miktarda tasarruf sağlıyor.

PNG'yi şu durumlarda koruyun:

• Dosya çok küçük.
• PNG zaten palet açısından optimize edilmiş ve rekabetçi.
• Uyumluluk kısıtları alışılmadık.
• Operasyonel karmaşıklık, tasarruf edilen baytlara değmiyor.

Şu durumlarda kayıplı WebP veya AVIF kullanın:

• Görsel fotoğrafik.
• Kesin pikseller önemli değil.
• Bir kalite ayarı, görünür zarar vermeden boyutu dramatik biçimde azaltabiliyor.

En iyi görsel stratejisi nadiren her yerde tek formattır. Tutarlı uygulanan küçük bir kurallar kümesidir.

<!-- tool-cta:start -->

💡 Bunu deneyin: Aynı PNG'yi Image Converter üzerinden geçirerek kayıpsız bir WebP sürümü oluşturun ve dosya boyutlarını doğrudan karşılaştırın.

<!-- tool-cta:end -->

Peki WebP kayıpsız gerçekte ne kazandırır?

PNG'nin sıkıştırma hileleri tükendiğinde bayt tasarrufu sağlar. Bazen bu mütevazı bir %10 anlamına gelir. Bazen büyük şeffaf bir görseli neredeyse yarıya indirmek anlamına gelir. Gerçek bir sitede tasarruflar genellikle varlıkların azınlığında yoğunlaşır.

Önemli kısım budur. WebP kayıpsız, PNG'ye göre ahlaki bir yükseltme değildir. Belirli bir iş için pratik bir seçenektir: şeffaflığa ve geniş modern tarayıcı desteğine sahip daha küçük kayıpsız web görselleri.

Rakamlar haklı çıkarıyorsa kullanın. Haklı çıkarmıyorsa PNG'yi olduğu gibi bırakın.