Ekran görüntüleriniz neden 2 MB ve onları %60–90 nasıl küçültürsünüz
Dov Azencot
@DovAzencotBir keresinde tek bir tasarım incelemesi e-posta zincirindeki ekran görüntülerini saydım. On bir tane, PNG, her biri ortalama 2 MB'ın az altında. Yirmi küsur megabaytlık çoğu beyaz pano, hepsi başka bir sekmede aynı uygulama açık altı kişi arasında ileri geri uçuyordu. Kimse düşünmedi, çünkü «çalışıyordu». Tuzak işte bu. Ekran görüntüleri sessizce kocamandır ve sebep, bilgisayarınızın onları nasıl aldığına gömülüdür.
Bir ekran görüntüsü neden 2 MB'lık bir dosya
Ekran görüntüsü kısayoluna bastığınızda, işletim sisteminiz bir PNG kaydeder. Bu makul bir varsayılandır — PNG kayıpsızdır, yani yakalama piksel piksel kusursuzdur ve keskin metinle dolu bir ekran görüntüsü için bu gerçekten doğru içgüdüdür. Sorun, PNG'nin boyutla ne yaptığıdır.
PNG her pikseli tam olarak saklar. Modern bir ekran yoğundur — Retina ya da 4K bir ekranda tam pencere yakalaması 2.000'den fazla piksel genişliğinde olabilir ve PNG o milyonlarca pikselin her birini tam sadakatle kaydeder. Karenin %60'ının aynı beyaza yakın ton olması umurunda değildir. Hiçbir şey atmaz, çünkü bir şey atmak onun yaptığı iş değildir. Yani neredeyse boş bir ayarlar sayfasının ekran görüntüsü — görsel olarak neredeyse hiçbir şey — yine de 1,5 ile 2,5 MB arasında tartar, çünkü içerik seyrek olsa bile tuval kocamandır.
Hamle: WebP'ye çevirin
WebP, PNG'nin yapamadığı bir şeyi yapabilir — keskin kenarları ve saydamlığı korurken kayıplı sıkıştırmak. Özellikle ekran görüntülerinde bu birleşim sihre yakındır, çünkü bir ekran görüntüsü çoğunlukla düz bölgelerdir (sıkıştırması ucuz) ve bir tutam metindir (ki WebP onu keskin tutar). Kayıplı geçiş, sezilemeyen gürültüyü atar; gözünüz hiç şikâyet etmez.
Kendi diskimdeki ekran görüntülerinden gerçek sayılar:
| Ekran görüntüsü | PNG olarak | WebP olarak |
|---|---|---|
| Bir ayarlar sayfası, çoğu beyaz | 1.6 MB | ~180 KB |
| Tam bir analitik panosu | 2.4 MB | ~310 KB |
| Karanlık modda bir kod düzenleyici | 1.9 MB | ~240 KB |
Bu kabaca %85–90 azdır ve yan yana koyunca hangisinin hangisi olduğunu ayırt edemiyorum. Metin piksel piksel okunaklı kalır. Bu, yaptığım en yüksek getirili dönüşümdür, tam da ekran görüntüleri en baştan bu kadar aşırı fazla kilolu olduğu için — sıkılacak devasa miktarda hiçlik vardır.
«Metin bulanıklaşmaz mı»
Korku bu ve haklı bir korku, çünkü muhtemelen bulanık hâleli metinli bir JPG ekran görüntüsü gördünüz ve tüm kayıplı biçimlerin bunu yaptığını varsaydınız. WebP kenarlarda JPG'den daha iyidir — anlamlı ölçüde daha iyi. Makul bir kalite ayarında, bir WebP ekran görüntüsündeki metin keskin kalır. Harf biçimlerinin çevresinde bozulma avlamak için %400'e yakınlaştırdım ve normal arayüz yakalamalarında eli boş döndüm.
Dürüst istisna: minik bir dosya kovalamak için kaliteyi sertçe aşağı çekerseniz, eninde sonunda metnin yumuşadığını görürsünüz. Çözüm bunu yapmamaktır. Orta bir kalite ayarı, metin sağlamken zaten %60–90 kazancı verir. Bozulduğu aralığa itmenin hiçbir nedeni yok.
Küçültmenin işe yaramadığı durumlar
PNG'yi rahat bıraktığım iki durum var.
Ekran görüntüsü, işaretlenmek, açıklanmak ya da birleştirilmek için bir tasarım aracına geri dönüyorsa, onu kayıpsız tutarım. WebP'nin kayıplı geçişi tek yönlü bir kapıdır ve düzenleyip yeniden dışa aktaracağım bir şeye sıkıştırmayı pişirmek istemem. WebP'yi gönderin, PNG ana dosyasını saklayın — her zamanki kuralın aynısı.
Ve bir ekran görüntüsü zaten küçükse — minik bir kırpılmış ayrıntı, tek bir düğme, zaten yaklaşık 100 KB'ın altında bir şey — dönüşüm iğneyi zar zor oynatır. %60–90 kazanç, tuval kocaman olduğu için kocaman olan dosyalardan gelir. Küçük bir kırpma bu sorunu zaten çözmüştür. Boşuna bir adım eklemeyin.
Gerçekte nasıl yapıyorum
Ekran görüntülerini, bir e-postaya ya da belgeye yaklaşmadan önce bu sitedeki PNG'den WebP'ye dönüştürücüden geçiririm. Tarayıcınızda olur, yani yakalama — ki açıkçası çoğu zaman ekranınızın yarısını ve arka planda ne varsa onu gösterir — cihazınızdan hiç çıkmaz. PNG'yi bırakın, boyut sütununun çöküşünü izleyin, WebP'yi indirin, onun yerine onu ekleyin.
Asıl mesele araç değil, refleks. «Ekran görüntüsü al, sonra küçült» bir kez otomatikleşince, uygulamayı zaten açık tutan insanlara 2 MB'lık görseller yollamayı bırakırsınız, e-postalarınız daha hızlı gider ve zincirler onlarca megabayta şişmeyi bırakır. O on bir görüntülü e-posta, yirmi küsur yerine toplam yaklaşık 2 MB olurdu. Aynı resimler. Her şey aynı. Sadece ölü ağırlık yok.
İlgili yazılar
PNG'yi neden WebP'ye çeviriyorum (ve bir keresinde neden hiç çevirmedim)
PNG içinde çalışmak için harika, yayımlamak için savurgan bir biçim. WebP'nin size gerçekte ne kazandırdığını, nerede hiçbir şey kazandırmadığını ve asla bozmadığım tek kuralı anlatıyorum.
AVIF mi WebP mi — küçük dosya her zaman doğru dosya değildir
AVIF boyutta genellikle WebP'yi geçer, bazen %20 ya da fazlasıyla. Bu fazladan sıkıştırmanın kodlama süresi ve uç durumlarda size neye mal olduğunu ve ne zaman hâlâ WebP'ye uzandığımı anlatıyorum.
SVG'den PNG'ye — gerçekten piksele ihtiyacınız olduğunda (ve olmadığında)
Bir SVG sonsuza kadar ölçeklenir ve minik kalır, o yüzden onu piksele dökmek bir gerileme gibi gelir. Bazen öyledir. Bir vektörden gerçekten ne zaman PNG piksel istediğinizi ve SVG'yi ne zaman rahat bırakacağınızı anlatıyorum.
Tüm yazılar