PNG'ler devasa olma konusunda kötü bir üne sahiptir ve bu hak edilmiştir — tek bir simge bir şekilde tam bir fotoğraftan daha ağır olabilir. İyi haber, o şişkinliğin çoğunun boşa gittiği ve onu, en başta PNG için ihtiyaç duyduğunuz keskin kenarları ve saydam arka planı korurken çıkarabileceğinizdir.
PNG'ler neden bu kadar büyük
PNG kayıpsız bir formattır. JPEG'in aksine, hiçbir şey atmaz — her pikseli tam olarak saklar. Bu, keskin logolar, simgeler ve arayüz ekran görüntüleri için kusursuzdur, ama dosyanın çok fazla veriyi dürüstçe tanımlaması gerektiği anlamına gelir.
Asıl katil renk derinliğidir. Standart bir PNG 16 milyona kadar renk (24-bit) artı tam bir saydamlık kanalı saklayabilir. Ama logonuz muhtemelen bir düzine renk kullanır. Simge setiniz, belki elli. Tüm o kullanılmayan renk kapasitesi, kullanıma hazır tutulmak için hâlâ baytlara mal olur. Yirmi renge ihtiyaç duyan bir resmi boyamak için 16 milyon renklik bir tuval için ödeme yapıyorsunuz.
İkinci bir tuzak var: insanlar fotoğrafları PNG olarak kaydeder. Bir fotoğraf gerçekten milyonlarca renk ve ince degradeler kullanır, dolayısıyla PNG onu iyi sıkıştıramaz — dosya, aynı fotoğrafın JPEG ya da WebP olarak beş ila on katı büyüklüğünde biter. "PNG sorununuz" aslında bir fotoğrafsa, çözüm onu sıkıştırmak değil dönüştürmektir.
Nicemleme: saydamlığı koruyan çözüm
Gerçek PNG'ler için — düz renk, keskin kenarlar, saydamlık — kazanan hamle renk nicemlemedir. Milyonlarca olası renk saklamak yerine, görsel dikkatle seçilmiş bir 256 renklik paletle azaltılır. Görseliniz zaten bunun yalnızca bir kısmından fazlasını kullanmadığından, sonuç aynı görünürken dosya %60–80 düşer.
İnsanların endişelendiği kısım: bu saydam arka planı mahveder mi? Hayır. Nicemleme renk paletini azaltır, ama saydamlık (alfa) kanalı korunur. Logonuz hâlâ herhangi bir arka plana temizce iner — beyaz kutu yok, gri saçak yok. Bu, iyi bilinen "tinify" tarzı PNG optimize edicilerinin kullandığı aynı tekniktir ve saydam PNG'leri neden bu kadar çarpıcı biçimde küçültebildiklerinin nedenidir.
IMG.DIY'nin Görsel Sıkıştırıcısı PNG'lere 256 renk nicemlemeyi otomatik olarak uygular. Bir kalite sayısı seçmezsiniz — kayıpsız bir format için kalite kaydırıcısı yoktur — yalnızca dosyayı bırakırsınız ve saydamlığı bozulmamış çok daha küçük bir PNG elde edersiniz.
Saydam PNG'ler için hızlı kontrol listesi
- Gerçekten bir grafik olduğunu, fotoğraf olmadığını doğrulayın. Logolar, simgeler, illüstrasyonlar ve arayüz çekimleri → PNG olarak sıkıştırın. Fotoğraflar → WebP'ye (o da saydamlık destekler) ya da JPEG'e (o desteklemez) dönüştürün.
- Aşırı büyük boyutları kırpın. 200px'te gösterilen bir 2000px simge, ihtiyacı olan piksellerin 100 katıdır. Önce genişliği sınırlayın — sıkıştırıcının isteğe bağlı bir genişlik sınırı vardır.
- Nicemleyin. 256 renk azaltmasının ağır işi yapmasına izin verin. Saydamlık hayatta kalır.
- Kenarları doğrulayın. %100'de açın ve alfa kenarlarını kalabalık bir arka plana karşı kontrol ederek temiz olduklarını doğrulayın.
Toplu işleyin, gizli tutun
Bütün bir simge setiniz ya da bir klasör dolu dışa aktarılmış grafiğiniz varsa, teker teker gitmeniz gerekmez. Sıkıştırıcı toplu işleri halleder ve bir ZIP geri verir ve asla orijinalden büyük bir dosya çıkarmaz — dolayısıyla zaten sıkı PNG'lerden oluşan bir klasör kazara büyümez.
Her şey Canvas ve WebAssembly ile tamamen tarayıcınızda çalışır. PNG'leriniz hiçbir yere yüklenmez ve ilk ziyaretinizden sonra araç önbelleğe alınır ve çevrimdışı çalışır. Bir müşterinin marka varlıklarını sinyalsiz bir trende sıkıştırın ve hiçbir şey dizüstünüzden ayrılmasın.
Çıkarım: PNG'ler büyüktür çünkü kullanmadığınız renk kapasitesini biriktirir. 256 renge nicemleyin, saydamlığı koruyun ve dosyanın görünür bir değişiklik olmadan küçülmesini izleyin.