Ekipten zanaat, formatlar ve iyi bir sonucun arkasındaki küçük kararlar hakkında notlar.
WebP, PNG'den nasıl daha küçük boyutlara ulaşır
WebP iki ayrı sıkıştırma kipi kullanır. Kayıpsız kip, uzamsal ve renk tahminini PNG'nin DEFLATE'inden daha gelişmiş bir entropi kodlama aşamasıyla birleştirir ve Google'ın yayımladığı ölçüte göre tipik görsellerde kabaca yüzde 26 daha iyi sıkıştırma sağlar. Kayıplı kip, gözün gerçekte gördüğünü korurken algısal olarak önemsiz bilgiyi atmak üzere tasarlanmış, video sıkıştırmasına benzer blok tabanlı bir dönüşüm uygular. Alfa kanallı görseller için WebP, alfa verisi için ayrı bir kayıpsız alt sıkıştırma kullanırken RGB verisine kayıplı sıkıştırma uygular, bu da saydamlık taşıyan kayıplı WebP'nin eşdeğer görsel kalitede bir PNG'den kabaca üç kat küçük olabilmesinin nedenidir. PNG'nin DEFLATE'i yalnızca kayıpsızdır ve kayıplı kipin yararlandığı algısal takastan yararlanamaz. Biçim farkı bu boşluğu açıklar.
Alfa kanalı ayrıntılı olarak
Hem PNG hem WebP 8 bitlik alfa saydamlığını destekler, yani her piksel 0 değerinden (tümüyle saydam) 255 değerine (tümüyle opak) bir opaklık değeri tutabilir. Platform görsel motoru bir PNG'yi WebP'ye yeniden yazarken, her pikselin RGBA değerlerini okur ve alfa değerlerini doğrudan WebP sıkıştırma adımına geçirir, orada RGB verisinin nasıl yazıldığından bağımsız olarak kayıpsız sıkıştırmayla korunurlar. Sonuç olarak PNG'deki alfa 0'daki her saydam piksel, 1 ile 254 arasındaki her yarı saydam piksel ve 255'teki her opak piksel WebP'de tam olarak aynı duruma eşlenir. Saydam arka planda yumuşak gölgeleri ya da kenar yumuşatmalı metni olan bir logo için kenar yumuşaklığı olduğu gibi korunur. Bu, kapsayıcı belirtiminde alfa alanı olmayan ve kodlamadan önce görseli bir arka plan rengine yerleştirmek zorunda kalan JPG ile zıttır.
Çekirdek Web Verileri ve görsel biçim seçimi
Largest Contentful Paint, sayfadaki en büyük görünür ögenin görüntü alanında belirmesinin ne kadar sürdüğünü ölçer. Çoğu içerik sayfasında bu öge kahraman görseldir ve Google, Çekirdek Web Verileri değerlendirmesinde LCP'yi bir sıralama sinyali olarak kullanır. PNG görselleri dosya boyutu yüzünden tutarlı bir LCP başarısızlığı kaynağıdır, çünkü 4K çözünürlükte fotoğrafik bir PNG birkaç megabayt ağırlığında olabilirken neredeyse kayıpsız kalitedeki eşdeğer WebP genelde bunun küçük bir kesridir. PageSpeed Insights bunu özellikle yeni nesil biçimlerde görsel sunma denetim ögesinde işaretler ve değiştirilecek hedef biçim olarak PNG'yi listeler. Kritik işleme yollarında beliren PNG'leri WebP'ye dönüştürmek, ölçülen sayfa başarımını iyileştirmek için en yüksek getirili tekil değişikliklerden biridir. Tarayıcı desteği zaman çizelgesi bunu güvenli kılar, Chrome WebP'yi 2011'de, Firefox 2019'da, Safari 2020'de ve Edge Chromium yeniden inşasından beri ekledi.
Kayıplı çıktı ve neredeyse kayıpsız ayar
WebP yazımı 0'dan 100'e bir kalite parametresi sunar, daha yüksek değerler daha büyük dosyalar pahasına daha çok ayrıntı korur. Bu araç, fotoğraflar, arayüz grafikleri ve simgelerden oluşan tipik web varlık kategorileri için görsel sadakati dosya boyutuna karşı dengelemek üzere ayarlanmış sabit, neredeyse kayıpsız bir ayarda yazar. Bu ayarda çıktı, normal ekran görüntüleme mesafelerinde kaynak PNG'den algısal olarak ayırt edilemez. Teknik olarak gerçek bir kayıpsız yazıma göre bir miktar bit düzeyinde kesinlik kaybedilir, bu da çözülmüş WebP pikselleri ile özgün PNG pikselleri arasında bayt düzeyinde bir karşılaştırmanın küçük sayısal farklar göstereceği anlamına gelir. Bu farklar fotoğrafik içerik için insan algısı eşiğinin altındadır. Kayıpsız sadakatin katı bir gereklilik olduğu tıbbi görüntüleme, uydu fotoğrafçılığı ya da arşiv dijital korumada doğru yaklaşım, PNG'yi saklamak ve WebP'yi yalnızca teslim dışa aktarımı olarak kullanmaktır, çalışma kopyası olarak değil.
Üst veri davranışı
PNG'den WebP'ye dönüştürme için kullanılan boru hattı, çıktıdan EXIF, IPTC ve XMP üst verisini temizler. Bu, üç büyük tarayıcı motorunun tümünde gözlenen davranışla örtüşür. ICC renk profilleri tutarsız işlenir, Chrome ve Safari sRGB ICC profil etiketini WebP çıktısında korurken Firefox ICC profili dahil tüm üst veriyi temizler. Net sonuç, dönüştürülmüş WebP'nin tarayıcılar genelinde sRGB güvenli olmasıdır, ancak kaynak PNG'de bulunan Display-P3, Adobe RGB ya da ProPhoto RGB gibi geniş gamlı etiketlemeler Firefox'ta korunmaz. Renge duyarlı profesyonel iş akışları için bu tutarsızlık önemlidir, bu yüzden son çıktının renk profili sadakatine ihtiyacı varsa ICC verisini açıkça yazan bir araçla dönüştürün ya da profil etiketini özel bir görsel üst veri düzenleyiciyle son işlem adımı olarak uygulayın.
Ne zaman PNG kalmalı, ne zaman WebP yeterli
Pratik karar ağacı kısadır. Görselin son hedefi bir web sayfası ya da web uygulamasıysa ve işleme ortamı 2020 ve sonrasından herhangi bir tarayıcıysa, WebP doğru dışa aktarma biçimidir. Görselin Figma, Sketch ya da Affinity Designer gibi bir tasarım uygulamasında açılması gerekiyorsa, destek değiştiği için kullandığınız belirli sürümde WebP desteğini doğrulayın. Görsel bir baskı iş akışında kullanılacaksa, çoğu baskı RIP'i WebP'yi işlemediği için PNG ya da TIFF yeğlenir. Görsel e-postayla gönderilecekse, e-posta istemcileri modern biçimlerle son derece tutarsız olduğu için PNG daha güvenlidir. Görsel birden çok kez düzenlenip yeniden kaydedilen bir çalışma dosyası olacaksa, PNG'yi asıl olarak tutun. Neredeyse kayıpsız kalitedeki WebP mükemmel bir teslim biçimidir ve PNG daha iyi bir arşiv ve düzenleme biçimidir. İdeal iş akışı PNG'yi özgün olarak tutar ve web teslimi için WebP'ye aktarır.
