Görsel formatları

PNG mi WebP mi: görseliniz için hangi format uygun?

Ekran görüntüleri, şeffaf grafikler ve fotoğraflar için PNG ile WebP'yi karşılaştırın. Ayrıntıları, sıkıştırmayı ve uyumluluğu kontrol ederek seçim yapın.

Hazırlayan: Pixilo · Güncelleme:

Formatlar arasındaki fark nedir?

PNG, piksel değerlerini değiştirmeyen kayıpsız sıkıştırma kullanır. WebP kayıplı ve kayıpsız sıkıştırmayı destekler ve şeffaf alanları koruyabilir. Şeffaf bir WebP de kayıplı sıkıştırmada renk ayrıntılarını kaybedebilir; bu nedenle dışa aktarma ayarlarını kontrol edin. Google’ın WebP belgeleri biçimin özelliklerini açıklar.

Üç noktayı kontrol edin: dosya kullanılacağı yerde açılıyor mu, iyi görünüyor mu ve küçülme format değişikliğine değecek kadar anlamlı mı? Kullanışlı bir kopya seçmek için yalnızca birine evet demek yeterli değildir.

Kayıpsız ifadesi sıkıştırma aşamasını anlatır. Kaydetmeden önce boyutlandırma, renk paletini azaltma veya düzenleme, PNG olarak saklanan görüntüyü yine de değiştirebilir. Benzer şekilde kayıplı bir WebP’yi PNG’ye çevirmek mevcut pikselleri korur; önceki kayıpları geri getirmez. Kayıplı ve kayıpsız sıkıştırma kılavuzu bu ayrımı açıklar.

Ekran görüntülerini dikkatle karşılaştırın

Biçimi değiştirmeden önce PNG’yi optimize edin. Opak metin ve çizgi örneğimizin aslı 109,2 kB’dir. Pixilo’nun ana sayfa sıkıştırıcısı, çözümlenen pikselleri ve 960 × 640 boyutlarını koruyarak bunu 20,6 kB PNG’ye indirir. Bu çıktıyı 24 Ekim 2026’da yeniden doğruladık. Pixilo’nun PNG’den WebP’ye dönüştürücüsü, 18,3 kB WebP’yi aynı özgün dosyadan kalite 80 ile 1 Ekim 2026’da üretti.

WebP, özgün PNG’ye göre yaklaşık %83 tasarruf sağlar; optimize edilmiş PNG’ye göre ise yalnızca 2,4 kB, yani %11,5 kazandırır. Kaydırmalı karşılaştırma artık bu optimize PNG ile WebP’yi gösterir. Harflerin tam korunması gereken bir ekran görüntüsünde, küçük ek indirme karşılığında kayıpsız PNG’yi tutmak daha iyi olabilir. Bunlar tek grafiğin sonuçlarıdır; dosyalarınız için bir tahmin değildir.

Büyütülmüş ayrıntıyla başlayın ve ayırıcıyı aynı harflerin ve renkli kenarların üzerinde hareket ettirin. Yumuşamış çizgileri, hafif saçakları ve tek piksellik çizgilerdeki değişimleri arayın. Ayrıntı görünümü, farkları incelemeyi kolaylaştırmak için pikselleri iki kat büyütür. Normal okuma boyutunu değerlendirmek için tam görüntüye dönün; bir dosyayı yalnızca büyütülmüş görünüme bakarak kabul veya reddetmeyin.

Bu, tek bir kayıplı WebP çıktısıdır; kayıpsız WebP testi değildir. Kalite 80 bir kodlayıcı ayarıdır, “özgün ayrıntıların %80’i” anlamına gelmez. Etiket, fiyat veya diyagram çizgisi belirsizleşirse PNG’yi koruyun ya da açıkça kayıpsız bir iş akışı kullanın. Yüksek tasarruf yüzdesi tek başına sonucun uygun olduğunu kanıtlamaz.

Metin, ince çizgiler ve renkli çubuklar içeren test grafiği — Pixilo WebP
Metin, ince çizgiler ve renkli çubuklar içeren test grafiği — Optimize edilmiş PNG

PNG kayıpsız optimize edildi. WebP, Pixilo ile kalite 80 kullanılarak aktarıldı; ikisi de 960 × 640 px. Karşılaştırmak için ayırıcıyı sürükleyin veya ok tuşlarını kullanın.

WebP kalitesini seçin ve ne zaman duracağınızı belirleyin

  1. Bir PNG karşılaştırma sürümü oluşturun. Boyutları değiştirmeden bir kopyayı sıkıştırın; pikseller aynı kalıyorsa daha küçük PNG’yi koruyun.
  2. Varsayılan WebP kalitesini deneyin. Özgün dosyadan aynı boyutlarda dışa aktarın. Korumanız gereken en küçük metni veya çizgiyi normal boyutta kontrol edin, ardından ayrıntı görünümünde inceleyin.
  3. Yalnızca gerektiğinde ayarlayın. Ayrıntı bozuluyorsa kaliteyi küçük adımlarla, örneğin 80’den 85’e veya 90’a yükseltin. Varsayılan rahatça yeterliyse daha düşük bir değer deneyebilirsiniz. Her zaman özgün dosyadan yeniden dışa aktarın; bu değerler örnektir, evrensel öneri değildir.
  4. Son adayları karşılaştırın. WebP’nin yararlı tasarrufu ve görsel kalitesi ihtiyacı karşıladığında durun. Kabul edilebilir WebP, optimize PNG kadar büyürse PNG’yi koruyun. Kalite 100 yine de kayıpsız WebP modunu seçmez.

Şeffaflığı iki arka planda kontrol edin

Şeffaflık ve renk doğruluğu ayrı özelliklerdir. WebP boş alanları korurken kayıplı kodlama kenarlardaki görünür piksellerin rengini değiştirebilir. Yukarıdaki opak örnek bunu test etmez. Kendi şeffaf PNG ve WebP görselinizi hem açık hem koyu arka planda; yumuşak gölgeler ve kısmen şeffaf kenarlar dâhil karşılaştırın.

Beyaz üzerinde temiz görünen bir kesim, antrasit üzerinde açık renkli bir sınır gösterebilir. Dönüşümü suçlamadan önce bu sınırın PNG’de zaten bulunup bulunmadığını kontrol edin. İki dosyayı da gerçek kullanım arka planında değerlendirin; yalnızca dama deseni kenar sorununu gizleyebilir.

Açık arka plan

P harfli şeffaf dairesel test simgesi — PNG — Açık arka planPNG
P harfli şeffaf dairesel test simgesi — WebP — Açık arka planWebP

Koyu arka plan

P harfli şeffaf dairesel test simgesi — PNG — Koyu arka planPNG
P harfli şeffaf dairesel test simgesi — WebP — Koyu arka planWebP
Aynı şeffaf PNG ve Pixilo WebP (kalite 80, 960 × 640 px) iki sabit arka planda. Eğri kenarı inceleyin. PNG · 25,0 kB · WebP · 8,0 kB

Şeffaflık gerekiyorsa JPEG seçmeyin. Düz renkli bir arka plan istiyorsanız arka plan aracıyla rengi bilinçli olarak belirleyin ve görseli son sayfa düzeninde inceleyin.

PNG bir fotoğrafsa ne yapmalı?

PNG fotoğraflar karşılaştırmaya iyi bir adaydır: kayıpsız saklama, küçük bir web görselinin gerektirdiğinden fazla bilgi koruyabilir. WebP çıktısı alın ve boyut kazancının görünür farkı karşılayıp karşılamadığını değerlendirin. Basit grafikler, önceki optimizasyonlar ve ayarlar sonucu etkiler; her PNG küçülmez.

Boyutları da kontrol edin. Pixilo’nun PNG’den WebP’ye dönüştürücüsü, varsayılan olarak açık olan en uzun kenarda 4000 piksel sınırı sunar. Karşılaştırmadan önce boyutlandırma seçeneğini ve indirilen dosyanın boyutlarını inceleyin. Yalnızca biçimi test etmek için aynı piksel boyutlarını kullanın; daha küçük bir tuval WebP kodlamasından bağımsız olarak büyük tasarruf sağlayabilir.

Kontrolleri geçen kopyayı seçin

  1. Orijinal PNG'yi saklayın.
  2. Karşılaştırmak için bu orijinalden bir WebP sürümü oluşturun.
  3. Yazıları, kenarları, gölgeleri ve son kırpmayı kontrol edin.
  4. Dosya boyutlarını ve görsel ölçülerini karşılaştırın.
  5. Dosyayı alıcının uygulamasında veya yayımlanan sayfada açın.

Web sitesi için daha küçük dosyayı yalnızca görünümü yeterliyse seçin. Düzenleme amacıyla teslim edilecek dosyalarda alıcının format gereksinimleri daha önemlidir. Farklı kullanım amaçları farklı seçimler gerektirebilir.

Testi işinizi temsil eden bir özgün dosyayla tekrarlayın. Kaynak ve çıktı boyutunu, piksel boyutlarını, kalite ayarını ve incelediğiniz ayrıntıyı kaydedin. Burada ondalık birimler kullanılır: 1 kB, 1000 bayttır. WebP yayın için daha iyi olsa bile kaynağı koruyun ve CMS yüklemeyi yeniden kodluyorsa yayımlanan sayfayı kontrol edin.

WebP’yi PNG’ye dönüştürebilir miyim?

Evet. WebP görselindeki şeffaf alanları koruyan bir PNG kopyası oluşturmak için WebP’den PNG’ye dönüştürme aracını kullanın. Bu işlem, önceki kayıplı sıkıştırmada kaldırılan ayrıntıları geri getirmez.

Önce bir PNG ile deneyin

Korunması gereken ayrıntıları içeren, kullanımınızı temsil eden bir görsel seçin.

PNG'yi WebP'ye dönüştürWebP ile JPG'yi karşılaştırın →