100 KB'nin altındaki görselleri sıkıştırın (hiçbir yere göndermeden)

Hedef 100 KB civarında olacaksa nadiren tek bir sihirli kontrol bulunur. Neredeyse her zaman bir sıradır: pikselleri azaltın, doğru codec bileşenini seçin, kaliteyi ayarlayın, gereksiz meta verileri ortadan kaldırın ve gerçek bağlamda (mobil, retina, PDF) doğrulama yapın. Pek çok ekip eski formlardan, e-posta ağ geçitlerinden, CMS küçük resimlerinden veya devlet portallarından keyfi sınırlamalar devralır. Bu arada, Safe Local Tools tarayıcınızdaki her şeyi işler; bu, ekran görüntüsü hala istemci verilerini, başlatılmamış kullanıcı arayüzünü veya çok bulanık kimlik bilgilerini taşıdığında anlamlıdır.

Neden "100 KB" tavan olarak görünüyor?

Yüz kilobayt doğanın sabiti değildir; Bu bir taahhüttür. Yavaş ağlar ve bütçeye uygun CDN'ler için yeterince küçük, ancak makul küçültme boyutlarından sonra mütevazı bir fotoğraf için yeterince büyük. Portallar bu tavanı dayatıyor çünkü ilk doğrulayıcılar bellek ve depolamanın daha az olduğu zamanlarda yazıldı. Mobil uygulamalar, ekler ve raporlar için benzer sınırlamalar benimser.

İşiniz doğrulayıcıyla tartışmak değil, insan algısının bir fark fark ettiği yerlerde bitleri tahsis etmek ve kimsenin fark etmediği bitleri kaldırmaktır.

Dosya Boyutunu Gerçekten İten Nedir?

Genel olarak konuşursak, kodlanmış boyut piksel sayısıyla (genişlik x yükseklik) birlikte büyür; görüntünün entropisi (gürültü, gren, dokulu arka planlar ve renk taklidi, desenler tekrarlanmadığı için sıkıştırıcıları alt eder) ve PNG'nin parladığı ve JPEG'in zayıfladığı alfa şeffaflığı ve keskin kenarlarla birlikte büyür. Codec seçimi önemlidir: fotoğrafik geçişler için JPEG; Keskin çizgiler için PNG; WebP ve AVIF, yayıncılık zinciri formatı kabul ettiği sürece modern kod çözücülerde genellikle kazanır.

Metnin okunabilir kalması gerektiğinde, arayüz kenarlarında parlak halkalar oluşturacak kadar düşük JPEG kalitesinden kaçının. Bazen WebP yardımcı olur; bazen sadece daha az pikselli PNG işe yarar.

Geometriyle başlayın: "codec mucizesinden" önce yeniden boyutlandırın

Yazarlar genellikle 4000x3000 piksellik ekran görüntüleri yükler ve her şeyi yalnızca "kalite = 10" ile 100 KB'ye sıkıştırmaya çalışırlar. Bazen işe yarıyor; tipografide ve düğmelerdeki halelerde çoğu zaman görsel çamura dönüşüyor. En iyi komut dosyası: maksimum görüntü genişliğini tanımlayın (örneğin satır içi şekil için 800 piksel), önce orantılı olarak azaltın ve ancak bundan sonra sıkıştırma parametrelerini ayarlayın.

Ölçek bütçenin kralıdır: kenarları 2 kat azaltmak alanı 4 kat azaltır, yani depolanacak katsayıların sayısı dört kat azalır.

Alıntı: hedef çerçeveye oturt

Bu taslak, herhangi bir kodlayıcı hilesinden önce geometrinin neden bayt bütçesine hakim olduğunu gösteriyor.

function encaixarNaCaixa(largura, altura, ladoMax) {
  const escala = Math.min(1, ladoMax / Math.max(largura, altura));
  return {
    w: Math.round(largura * escala),
    h: Math.round(altura * escala),
    escala,
  };
}

JPEG kalite kontrolleri logaritmik değil algısaldır

Bir uygulamada "Kalite 75" diğerinde aynı değildir. Hedef cihazdaki gözü kullanın: cilt tonları ve gradyanlar şeritlenmeyi ortaya çıkarır; önce küçük metin kaybolur; Sağlam dolgulara sahip arayüz captcha'ları, istemediğiniz bile gürültüyle bitleri boşa harcar.

Doğrulayıcılar diskteki megapikselleri değil, kablodaki baytları ölçer. Görsel olarak benzer iki dışa aktarma, aşamalı JPEG, Huffman tabloları ve kodlayıcı ön ayarları nedeniyle onlarca kilobayt farklılık gösterebilir; deneysel olarak değerlendirin.

Gerçek akışta meta veriler ve gizlilik

EXIF, GPS'i, cihaz tanımlayıcılarını ve gömülü küçük resimleri taşıyabilir. Meta verileri kaldırmak, birkaç bayttan tasarruf sağlar ve sızdırılan pencere adlarını veya dosya yollarını yakalarken gizliliği büyük ölçüde artırır. Çevrimiçi sıkıştırıcılar hızlı silme sözü verebilir, ancak veriler zaten makinenizden çıkmıştır; yetki alanları ve alt işleyiciler, DPIA ve tedarikçi anketlerinin bulunduğu ortamlarda risk oluşturur.

Safe Local Tools'ta işleme, tarayıcıda yereldir: yalnızca kaliteyi test etmek için veri işlemcileri listesine başka bir SaaS eklemeden hassas yakalamalar üzerinde yinelenirsiniz.

100 KB'nin gerçekçi olduğu senaryolar

Küçük kare avatarlar iyi çalışır. Orta genişlikteki blog kahramanları genellikle WebP/JPEG ölçeklendirip kullandıktan sonra sığar. Makbuz taramaları, izin verildiğinde arka planı ikili hale getirebilir. Vektör diyagramları SVG olmalıdır; yalnızca zorlanırsanız rasterleştirin. Haritalar ve ekranlar: İlgisiz alanların agresif bir şekilde kırpılması ve etik olarak bulanıklaştırılması entropiden tasarruf sağlar. E-posta ekleri ve destek paketleri, boyut sınırlamalı geçişlerden geçmeden önce yerel sıkıştırmadan yararlanır.

98 KB'de zafer ilan etmeden önce, birçok kullanıcının yaptığı gibi %125-150'ye yakınlaştırın ve odak ve kontrast kenarlarının hayatta kalıp kalmadığını kontrol edin; agresif sıkıştırma aynı zamanda erişilebilirlik meselesidir.

Yakalamalarda retina ve kroma alt örneklemesi

Varlıklar @2x, HiDPI ekranlarda anlamlıdır, ancak CMS'nin çözünürlüğü boşa harcayan CSS genişliğiyle işlenmesi durumunda kilobayt tavanları altında ölümcüldür. Tasarım amacını CSS × DPR piksellerine çevirin ve karşılık gelen taramayı dışa aktarın.

JPEG alt örneklerinin rengi, parlaklıktan daha güçlüdür; fotoğraflarda harikadır, koyu arka plan üzerindeki renkli metinlerde ise acımasızdır. Yapılar gliflere yapışıyorsa bu genellikle "genel kalitenin çok düşük olması" değil, kromadır.

100 KB'nin altında kalmak, insan kısıtlamalarıyla yapılan bir optimizasyondur: akıllıca yeniden boyutlandırın, codec'leri seçin, meta verileri temizleyin ve yalnızca soyut sayının değil, görüntünün nerede görüneceğini doğrulayın. Bilinmeyen sunuculara ekran görüntüsü göndermeden deneme yapmak istediğinizde Görüntü Kompresörünü Deneyin →