# PNG'den WebP'ye Dönüştürücü: Web İçin Şeffaflık ve Modern Sıkıştırma
PNG, onlarca yıldır şeffaflığa sahip web görüntüleri için referans format olmuştur — logolar, simgeler, kullanıcı arayüzü öğeleri, dekupe edilmiş arka planlara sahip ürün görüntüleri. Sorunu dosya boyutudur: kaliteyi garanti eden kayıpsız sıkıştırma aynı zamanda belirgin şekilde büyük dosyalar oluşturur. Google'ın WebP'si bu çelişkiyi çözer: alfa kanalını (şeffaflığı) destekler ve PNG'den çok daha iyi sıkıştırır; bu da web sitenizde PNG'den WebP'ye geçişi hiçbir şeyden ödün vermeyen mükemmel bir optimizasyon haline getirir.# PNG mi WebP mi? Her format ne zaman kullanılır
Uyumluluk kritik olduğunda PNG doğru format olmaya devam eder: Photoshop veya Figma gibi tasarım araçları, baskı iş akışları, eski masaüstü uygulamaları veya WebP desteğinin garanti edilmediği herhangi bir bağlam. Ayrıca, kayıpsız sıkıştırması her pikseli koruduğu için düzenleme süreçlerinde çalışma katmanlarını kaydetmek için ideal formattır. Maliyeti: WebP eşdeğerinden 3-8 kat daha fazla ağırlığa sahip olabilen dosyalar.WebP, tüm modern web içerikleri için PNG'nin doğal halefidir. Chrome, Firefox, Safari ve Edge web tarayıcılarının tamamı bunu yerel olarak destekler. Kayıpsız bir WebP görüntüsü, eşdeğer PNG'den %26 daha küçüktür; kayıplı modda neredeyse ayırt edilemez görsel kalitede %40'a kadar daha küçük olabilir. Ve web tasarımı için kritik olan: WebP, alfa şeffaflığını görsel bir taviz vermeden tıpkı PNG gibi korur.# Karşılaştırma: Yerel ve Bulut Dönüştürme
Bulut Dönüştürücüler
Dosyalarınızı uzak bir sunucuya yükleyen araçlar.
- Yükleme ve indirmede ağ gecikmesi
- Logolarınız ve görüntüleriniz üçüncü taraf sunucularda saklanır
- Dosya boyutu sınırları ve günlük dönüştürme kotaları
- Rahatsız edici reklamlar ve üçüncü taraf izleyiciler
Yerel Mimarimiz
Vanilla JS teknolojisini kullanarak doğrudan donanımınızda işleme.
- Anında hız — sıfır ağ gecikmesi
- Tam gizlilik — harici olarak gönderilen 0 bayt
- MB sınırı veya dosya sayısı kısıtlaması yok
- Temiz arayüz, reklam veya izleme yok
# Teknik olarak nasıl çalışır
PNG yerel olarak yüklenir ve bellekteki bir HTML5 Canvas'a çözülür. Canvas API'si orijinal PNG'deki alfa kanalını korur — tüm şeffaf ve yarı şeffaf pikseller RGBA piksel arabelleğinde sağlam tutulur. Ardından tuval, şeffaflık verilerini değiştirmeden daha kompakt bir dosya oluşturmak için tarayıcının (Google'ın libwebp tabanlı) WebP codec bileşenini uygulayantoDataURL('image/webp') çağrısı yapılarak dışa aktarılır.WebP iki sıkıştırma modu kullanır: her pikselin orijinaline tam olarak sadık kalması gereken görüntüler için kayıpsız mod ve küçük farklılıkların algılanamaz olduğu fotoğraflar ve öğeler için kayıplı mod. Kayıpsız mod, PNG'den %26 daha küçük dosyalar üretir; kayıplı mod, mükemmel görsel kaliteyi korurken PNG'ye kıyasla %40'a varan azalmalar elde edebilir.İpucu: WebP web üzerinde hem PNG'yi hem de JPG'yi yener
Kayıpsız moddaki WebP, PNG'den daha küçüktür. Kayıplı moddaki WebP, JPG'den daha küçüktür. Bu, WebP'yi web bağlamında her ikisinin de yerini alan tek format yapar. Şeffaf PNG'lerinizi yüklemeden önce WebP'ye dönüştürün: Google PageSpeed Insights bunu algılar ve "Modern formatlardaki görseller sunun" denetimlerinde olumlu puan verir.# Kullanım durumları ve uyumluluk
- Web siteleri ve uygulamalar için şeffaf arka plana sahip logolar ve simgeler.
- E-ticaret mağazalarında dekupe arka planlı ürün görselleri.
- Alfa şeffaflığına sahip CSS sprite'ları ve kullanıcı arayüzü öğeleri.
- Açılış sayfaları için rasterleştirilmiş çizimler ve vektör grafikleri.
- Bloglarda ve haber portallarında şeffaf arka plana sahip makale küçük resimleri.