Görsel Sıkıştırıcı

Görsel ağırlığı, modern bir web sayfasının nasıl hissettirdiğini belirleyen tek başına en büyük etkendir. Google'ın kendi Core Web Vitals metrikleri — Largest Contentful Paint, Cumulative Layout Shift, Interaction to Next Paint — içerik sayfalarının büyük çoğunluğunda görseller tarafından domine edilir; çünkü görseller genellikle en büyük byte yükü, çözmesi en yavaş olan ve nihayet vardığında düzeni en çok kaydıran kısımdır. Aynı yük ekonomisi tarayıcı dışında da geçerlidir: e-posta ile göndermek istediğiniz bir telefon klibi, bir takım arkadaşının Slack'te ihtiyaç duyduğu ürün fotoğrafı, bir müşterinin otel Wi-Fi'sinden indirebilmesi gereken portföy görseli. Sıkıştırma evrensel cevaptır ve yıllardır en popüler araç — TinyPNG — neredeyse bir tekel tutmuştur çünkü teknik olmayan kullanıcılara ImageOptim, jpegoptim, oxipng, sharp veya başka bir üretim seviyesinde aracı öğrenmeden sıkıştırma yolu verir. Karşılığında TinyPNG ve taklitlerinin çoğu görselinizi bir sunucuya yükler, sıkıştırıcıyı orada çalıştırır ve sonucu size e-posta ile gönderir.

Bu sıkıştırıcı aynı kitle için inşa edildi ama işi tamamen tarayıcınızda yapıyor. Sayfaya bir görsel bıraktığınızda, dosya tarayıcı sandbox'ı içinde çalışan üç adımdan geçer: byte'lar bellek içi bir bitmap'e çözülür, bitmap seçtiğiniz boyutlarda bir canvas'a çizilir ve canvas tarayıcının yerleşik kodlayıcılarını kullanarak JPEG, PNG, WebP veya AVIF olarak yeniden kodlanır. Hiçbir şey yüklenmez. Ağ sekmesi sıkıştırma sırasında sıfır dışa giden istek gösterir — DevTools'ta doğrulayabilirsiniz ve sayfa yüklendikten sonra internetten kopabilirsiniz, araç çalışmaya devam eder. Hassas materyalle çalışan herkes için — müşteri fotoğrafları, dahili mockup'lar, gizli metin içeren ekran görüntüleri, NDA kapsamındaki her şey — gizlilik öncelikli model güvenli olan tek seçenektir.

Dört giriş formatı destekleniyor: JPEG (1992'den beri fotoğraflar için fiili standart), PNG (şeffaflıklı grafikler için evrensel format), WebP (Google'ın 2010'daki neredeyse her gerçek görsel için her ikisini de dosya boyutunda yenen modern konteyneri) ve AVIF (2019'daki AV1 türevi, aynı kalitede WebP'yi yenen ama daha yavaş kodlayan format). Her giriş için orijinal formatı korumayı seçebilirsiniz, ki bu geriye dönük uyumluluk gerektiğinde en güvenli seçimdir, veya farklı bir formata dönüştürebilirsiniz. 2026'daki en yaygın dönüşüm PNG → WebP'dir; tipik olarak boyutu %60–80 azaltır ve şeffaflığı korur, ve JPEG → WebP tipik bir fotoğrafta %25–35'lik ek tasarruf ekler. AVIF en agresif seçimdir — aynı algılanan kalitede WebP'den yaklaşık %20 daha küçük — ama tarayıcıda kodlama önemli ölçüde daha uzun sürer ve 2024 sonu itibarıyla yalnızca Chromium tabanlı tarayıcılarda mevcuttur.

Kalite kontrolü ilk uzandığınız koldur. Dahili olarak canvas kodlayıcısının kalite parametresine (0.0 ila 1.0) ve JPEG/WebP/AVIF kalite ölçeklerine (0 ila 100) eşlenir; burada 100 esasen kayıpsızdır ve 0 tanınmazdır. Doğru sayı, görselin ne için olduğuna bağlıdır. Web'de yayımlanan fotoğraflar yaklaşık 78–82'ye kadar kaynakla aynı görünür, ki bu aracın varsayılan olarak gönderdiği aralıktır — YouTube ingestion'ın hedeflediği aralık, Adobe'nin Save For Web'inin yirmi yıl boyunca varsayılan olarak kullandığı aralık ve Google'ın WebP ekibinin genel amaçlı kullanım için önerdiği aralıktır. Metin veya keskin kenarları olan pazarlama grafikleri 88–92 civarında daha yükseğe ayarlanmalıdır çünkü sıkıştırılmış görsellerdeki metin, insan gözünün fark ettiği ilk şeydir. Görüntülenen boyutun küçük olduğu küçük resimler ve avatarlar 60–65'e kadar inebilir ve mükemmel kalır. Kaydırıcı, sayfadan ayrılmadan her ayarın ne ürettiğini önizlemenize olanak tanır.

Hedef Boyut modu, kesin bir byte bütçeniz olduğunda kullanışlı olan ikinci moddur — örneğin, 500 KB üzerindeki yüklemeleri reddeden bir CMS, 25 MB e-posta eki sınırı, 200 KB üzerindeki her şeyi sıkıştıran bir sohbet platformu. Hedef boyut modu, kalite parametresi üzerinde bir ikili arama yapar: kalite 67'de kodlar, sonuç boyutunu kontrol eder, sonucun sığıp sığmadığına bağlı olarak daha yüksek veya daha düşük kodlar ve yedi iterasyonda sığan en yüksek kalitede yakınsar. Bu, guetzli ve mozjpeg'in ikili arama ön uçları gibi komut satırı araçlarının kullandığı algoritmanın aynısıdır ve dosya sığana kadar kaliteyi naif şekilde düşürmekten önemli ölçüde daha iyi sonuçlar üretir çünkü arama kalite aralığının üst ucuna doğru sapmıştır. PNG, kalite parametresi olmadığı için bu moddan hariçtir; PNG'de hedef boyut isterseniz, sonuç kayıpsız kodlayıcının ürettiği şey olur.

Yeniden boyutlandırma, büyük boyut azaltmaları için yapabileceğiniz en etkili tek değişikliktir ve aynı formun içine entegre edilmiştir. Web'deki çoğu görsel, görüntülendikleri boyutun bir kısmı kadar bile olsa, kaynak çözünürlüklerinin tamamında sunulur — bir blog yazısına gömülü 4032×3024'lük bir telefon fotoğrafı, masaüstü tarayıcısında 800 piksel genişliğinde render edilir. Sıkıştırmadan önce kaynağı 1600×1200'e indirmek genellikle kodlayıcı devreye girmeden önce boyutu %75 azaltır ve tipik görüntüleme boyutunda sonuç ayırt edilemez. Maks Genişlik ve Maks Yükseklik alanları, çıktıyı bu boyutlarda sınırlandırır ve en boy oranını otomatik olarak korur, böylece karışık yönlerde bir klasör bırakabilir ve dosya başına uğraşmadan tutarlı boyutlu çıktı alabilirsiniz. İkisini de boş bırakırsanız, orijinal boyutlar korunur ve sadece kodlayıcı ağır kaldırma yapar.

Toplu işleme varsayılan olarak desteklenir. On veya elli görsel bırakın ve kuyruk tablosu her birini orijinal boyutu, çıktı boyutu, tasarruf edilen yüzde ve satır başına indirme düğmesi ile gösterir. Tümünü Sıkıştır düğmesi kuyruğu sıralı olarak işler — tarayıcıda paralelliğin yararı yoktur çünkü canvas kodlayıcısı paylaşılan bir worker havuzu kullanır ve sıralı işleme UI'ı duyarlı tutar ve ilerlemeyi görünür kılar. Toplam tasarruf edilen byte'lar ve ortalama yüzde üstte gösterilir, böylece iş akışının size ne kazandırdığını bir bakışta görebilirsiniz. Kodlayıcının kaynaktan daha büyük bir sonuç ürettiği dosyalar — ki bu zaten sıkıştırılmış PNG simgeleri veya düşük kaliteli ekran görüntüleri için bazen olur — orijinal olarak bırakılır ve daha kötü bir sürüm indirmemeniz için "Zaten küçük" olarak etiketlenir.

Yaygın bir sürpriz, sıkıştırıcının bir görseli daha küçük yapmayı reddettiğinde olur. Bunun olabileceği üç meşru neden vardır ve araç her birini doğru şekilde işler. İlk olarak, bazı PNG'ler kaynak program tarafından zaten optimal sıkıştırılmıştır (Photoshop'un Save For Web, Figma'nın dışa aktarması, Sketch'in PNG dışa aktarması) ve bunları bir canvas üzerinden yeniden kodlamak iyileştirmez. İkinci olarak, bazı ekran görüntülerinde PNG'nin deflate algoritmasıyla güzel sıkıştıran ama JPEG olarak yeniden kodlandığında genişleyen büyük düz renkli arka planlar vardır; araç bu durumu algılar ve orijinali korur. Üçüncü olarak, çok küçük simgeler (5 KB'nin altında) genellikle o kadar az entropiye sahiptir ki yeniden kodlama, herhangi bir sıkıştırma tasarrufundan daha büyük meta veri ek yükü ekler. Üç durumda da satır, daha kötü bir çıktı üretmek yerine "Zaten küçük — orijinal korundu" olarak işaretlenir.

Gizlilik baş başlık avantajıdır ve net olmaya değer. Bu araca bıraktığınız görsel byte'ları, standart FileReader / File API kullanılarak JavaScript belleğine okunur, createImageBitmap (tarayıcının görsel kod çözücüleri üzerinde ince bir sarmalayıcı) ile çözülür, bir canvas'a çizilir ve canvas.toBlob ile yeniden kodlanır. Bu API'lerin hiçbiri ağ isteği yapmaz. Tarayıcının ağ paneli sıkıştırma sırasında sıfır istek gösterir ve bunu DevTools Ağ sekmesiyle doğrulayabilirsiniz. Bulut hesabı yok, görsellerinizin içeriği üzerinde telemetri yok, eğitim verisi çıkarımı yok ve günlük tutma yok çünkü hiçbir şey sayfayı terk etmiyor. KVKK, GDPR, HIPAA, NDA veya basitçe müşteri fotoğraflarını üçüncü taraf hizmetleriyle paylaşmama politikanıza tabi iseniz, bu araç tedarikçi-risk değerlendirmesi gerektirmeyen tek sıkıştırıcı kategorisidir.

Performans cihazınıza göre ölçeklenir. Modern bir dizüstü bilgisayarda, tek bir 4 MB fotoğraf 100–200 milisaniyede sıkıştırılır; elli fotoğraflık bir klasör otuz saniyenin altında alır. Daha eski donanımlarda yaklaşık 3–5 kat daha fazla zaman bekleyin. Darboğaz, tarayıcının yerel kodda uyguladığı JPEG / WebP / AVIF kodlayıcısıdır — hızlıdır ama sonsuz hızlı değildir, ve özellikle AVIF, kodek tasarımı nedeniyle JPEG'den çok daha yavaştır (yaklaşık 5 kat). Binlerce dosyayı toplu sıkıştırıyorsanız, Node.js'te sharp veya komut satırında libvips gibi sunucu tarafı bir araç tarayıcıyı geçer; bir avuç dosya veya bir klasör dosyasını bırakmanın gerçekçi etkileşimli durumu için tarayıcı yeterince hızlıdır.

Bilinmeye değer birkaç pratik kalıp. İlk olarak, kafanızda kalite adımından önce yeniden boyutlandırma adımını yapın: boyutları kesmek kalite düşürmekten daha çok byte tasarruf eder ve kalite düşüşleri yeniden boyutlandırmadan daha hızlı fark edilir bozulmalar üretir. İkinci olarak, fotoğraf içeriği için JPEG kalite 78–82 veya WebP kalite 75–80 tercih edin — ikisi de baş başa testlerde görsel olarak kaynakla aynı çıktı üretir ama WebP yaklaşık %30 daha küçüktür. Üçüncü olarak, keskin kenarlar ve metin içeren grafikler için PNG (kayıpsız) veya kalite 90+ olan WebP tercih edin — JPEG metin kenarlarını bozar. Dördüncü olarak, şeffaflık PNG, WebP veya AVIF kullanmalıdır; JPEG şeffaflığı temsil edemez ve beyaz bir arka plan üzerinde birleştirir. Beşinci olarak, sıkıştırma yapmadan orijinal fotoğrafları bir sohbete veya e-postaya asla yüklemeyin — modern telefon kameraları 4032×3024 veya daha yüksek çekim yapar, ki bu yazdırma dışı herhangi bir kullanım durumu için aşırıdır ve yükleme sürenizi üçe katlar.

Ele alınmaya değer yaygın bir yanlış anlama vardır. "PNG sıkıştırma" kafa karıştırıcı bir terimdir çünkü PNG zaten deflate sıkıştırması içeren kayıpsız bir formattır. TinyPNG ve benzer araçlar "PNG sıkıştırma" reklamı yaptıklarında, kapakta üç şeyden birini yapıyor olurlar: kayıplı kalite ile farklı bir formata yeniden kodlama (genellikle WebP), pngquant gibi bir araçla PNG'yi 256 renge palet-niceleme veya oxipng veya zopfli ile agresif kayıpsız yeniden kodlama. Bu aracın PNG yolu üçüncü seçenektir — canvas üzerinden kayıpsız bir yeniden kodlama — ki bu meta veriyi kaldırır ve kötü kodlanmış kaynak PNG'lerde sıkıştırmayı biraz iyileştirebilir, ama palet-niceleme yapmaz. 256 rengin yeterli olduğu bir grafiğiniz varsa (logolar, simgeler, basit illüstrasyonlar), doğru hareket WebP'ye 95–100 kalitede dönüştürmektir, ki bu çok daha küçük dosya boyutunda neredeyse PNG kalitesi verir, veya özel bir palet-niceleme aracı kullanmaktır.

Bu sıkıştırıcı diğer Omnvert görsel araçlarıyla doğal olarak eşleşir. Crop aracı sıkıştırmadan önce görsel alanını azaltır, ki bu tasarrufları katlar. Resize aracı, kesin piksel boyutları veya fit-in / smart-crop davranışı istediğinizde satır içi Maks Genişlik / Maks Yükseklik kontrollerinden daha esnektir. Filters aracı, sıkıştırmaya ek olarak rotate ve flip ile WebP/AVIF format dönüşümünü kapsar. EXIF Remover, GPS koordinatlarını sızdırmadan bir fotoğrafı paylaşmak istediğiniz durumlar için sıkıştırmadan önce meta veriyi sıyırır. Background Remover size, sıkıştırıcının daha küçük bir WebP'ye yeniden kodlayabileceği şeffaf bir PNG verir. Bunların hepsi aynı gizlilik garantileriyle tarayıcıda çalışır, böylece bütün bir görsel hazırlama iş akışı tek bir sekmede sunucuya tek bir byte gitmeden gerçekleşebilir.