PNG ağırlığı olmadan saydam görseller
Yıllarca PNG, saydamlık içeren her web görseli için tek güvenli seçenekti: dekupe ürün fotoğrafları, renkli başlıkların üzerindeki logolar, yumuşak gölgeli illüstrasyonlar. JPG saydamlığı hiç saklayamaz, bu yüzden tasarımcılar PNG'nin büyük dosyalarını bedel olarak kabul etti. 1500×1500 piksellik dekupe bir ürün fotoğrafı PNG olarak çoğu zaman 1,5–3 MB tutar.
WebP bu ödünleşimi ortadan kaldırır. Hem kayıpsız hem kayıplı modunda tam 8 bitlik alfa kanalını destekler; böylece görselin fotoğraf kısmı bir JPG gibi sıkıştırılırken saydamlık pürüzsüz kalır. Aynı dekupe ürün fotoğrafı genellikle 150–400 KB'a iner ve tüm güncel tarayıcılar WebP gösterdiği için çoğu sitede PNG'nin yerini doğrudan alabilir.
En çok hangi PNG'ler kazanır
Kazanç yalnızca dosya boyutuna değil, PNG'nin içinde ne olduğuna bağlıdır.
- Saydamlık içeren fotoğrafik içerik en çok kazananıdır: dekupe ürünler, arka planı kaldırılmış portreler, dokulu illüstrasyonlar. Yüzde 70–90 tasarruf yaygındır.
- Geçişler, fotoğraflar veya gölgeler içeren ekran görüntüleri ve arayüz maketleri genellikle yarı yarıya veya daha fazla küçülür.
- Birkaç düz renkten oluşan basit simgeler ve logolar az kazanır. PNG bunları zaten çok iyi sıkıştırır ve bazı küçük simgeler biraz daha büyük bile çıkabilir. Bunlar için PNG'de kalmak veya PNG sıkıştır aracından geçirmek çoğu zaman daha iyi seçimdir.
- Palet azaltmayla önceden optimize edilmiş PNG'ler, bir tasarım aracından yeni dışa aktarılmış olanlardan daha az tasarruf sağlar.
Dosya listesi her görselin orijinal ve yeni boyutunu gösterir; böylece dönüştürmeye değmeyenleri kolayca fark edersiniz.
Dönüştürme nasıl yapılır
Tarayıcı her PNG'yi çözer, orijinal piksel boyutunda bir canvas'a çizer ve destekliyorsa bir arka plan worker'ında yerleşik WebP kodlayıcısıyla kodlar. Görsel cihazınızdan asla çıkmaz.
%10 ile %100 arasında olan ve varsayılanı %90 olan kalite kaydırıcısı, renk verisinin kayıplı sıkıştırmasını kontrol eder. Saydamlık maskesi renklerden ayrı sıkıştırılır ve yaygın tarayıcı kodlayıcılarında kaydırıcıdan aynı şekilde etkilenmez; bu yüzden dekupe kenarları %75'te bile temiz kalır.
Bazı iş akışları için teknik bir ayrıntı önemlidir: canvas önceden çarpılmış (premultiplied) alfa ile çalışır, bu nedenle tamamen saydam piksellerin renk değerleri atılır. Bu bir tarayıcıda veya belgede görünmez. Yalnızca PNG'leri, saydam alanların altındaki gizli renk verisine dayanan oyun dokuları veya maskeler olarak kullanıyorsanız önemlidir; bunları PNG olarak tutun.
Grafikler için kalite değerleri
%90 varsayılanı fotoğraflara göre daha yüksek ayarlanmıştır, çünkü arayüz öğeleri, metin ve keskin hatlar gibi tipik PNG içeriği sıkıştırma bozulmalarını bir fotoğraftan daha erken gösterir.
- %90 logolar, arayüz ekran görüntüleri ve metin içeren illüstrasyonlar için. Neredeyse her durumda kaynakla görsel olarak aynıdır.
- %80 dosya boyutunun önemli olduğu fotoğrafik dekupeler ve ana görseller için. Farklar yalnızca yakınlaştırınca görünür.
- %95–100 piksel sanatı, ince çizgili grafikler ve küçük metin içeren ekran görüntüleri için. WebP'nin kayıplı modu rengi yarım çözünürlükte saklar; bu, tek piksellik renkli çizgileri bulanıklaştırabilir. Aralığın üst ucunda bu etki en azdır.
Görseli daha sonra değiştirmeyi planlıyorsanız orijinal PNG'yi saklayın. WebP, yayımlanan son kopya içindir; kayıplı bir WebP'yi WebP'yi PNG'ye dönüştür ile geri çevirmek, kaybolan hiçbir ayrıntıyı geri getirmeden büyük bir dosya verir.
Sonucu bir sitede kullanmak
Görsel dosyasını değiştirin ve referanstaki uzantıyı güncelleyin; güncel tarayıcılar için başka bir işaretleme değişikliği gerekmez. Birkaç pratik not:
- Dönüştürmeden önce görseli gösterim boyutuna getirin. 240 piksel genişlikte gösterilen bir logo 2400 piksel olmaktan hiçbir şey kazanmaz.
- WebP formatının kenar başına 16383 piksellik kesin bir sınırı vardır; bunu aşan çok uzun ekran görüntüleri veya sprite sayfalarının bölünmesi gerekir.
- Her biri 50 MB'a kadar dosyalar kabul edilir; bir grup tek bir kalite ayarıyla dönüştürülür ve ZIP olarak indirilebilir.
- PNG içindeki metin blokları ve diğer meta veriler WebP'ye kopyalanmaz.