Tarayıcı tabanlı görüntü sıkıştırma nasıl çalışır
Her sıkıştırma işlemi tamamen JavaScript'te çalışır. Hiçbir codec kütüphanesi indirilmez ve hiçbir sunucu dahil değildir. Tarayıcının kendi Canvas API'si görüntüyü çözer, daha düşük kalitede yeniden kodlar ve sayfanın önizleyebileceği, indirebileceği veya sıkıştırabileceği bir Blob sunar. Her adım sekmenin sanal alanında kaldığından orijinal dosyalar asla ağa dokunmaz.
- Yüklenen her dosyayı Blob olarak okur ve bir nesne URL'si oluşturur; böylece tarayıcı baytları sunucuya kopyalamadan veya diske yazmadan yerel olarak çözebilir.
- Çözülen görüntüyü, yeniden kodlamaya hazır şekilde orijinal piksel boyutlarında ekran dışı bir Canvas öğesine çizer.
- Pikselleri yeniden kodlamak için
canvas.toBlob(callback, mimeType, quality)çağırır. Kalite modunda kaydırıcı değeri doğrudan kodlayıcının kuantizasyon ayarına eşlenir; hedef boyut modunda sayfa, çıktı blob'u bayt bütçenizin altına düşene kadar kalite değerini ikiye böler. - Orijinal boyut, sıkıştırılmış boyut ve tasarruf yüzdesiyle öncesi/sonrası bir okuma gösterir, ardından görüntü başına indirme veya tüm toplu işlem için tek bir ZIP sunar. ZIP, ilk kullanımda yüklenen 8 KB'lık bir kütüphane olan fflate kullanılarak bellekte oluşturulur.
Neden görüntüleri sıkıştırmalısınız?
- Daha küçük görüntüler daha hızlı yüklenir. 4 MB'lık bir hero görüntüsünü 600 KB'ye indirmek, Google'ın sıralama için kullandığı Core Web Vitals'tan biri olan Largest Contentful Paint'i doğrudan iyileştirir. Birkaç fotoğraf içeren bir sayfada tasarruflar daha hızlı bir ilk boyamaya dönüşür.
- Yükleme ve ek sınırları her yerde. Birçok CMS platformu, biletleme aracı ve e-posta sistemi 1 veya 2 MB'ın üzerindeki dosyaları reddeder. Hızlı bir sıkıştırma işlemi, tam bir editör açmadan fotoğrafı sınırın altına indirir.
- Bant genişliği ve depolama büyük ölçekte para eder. Tam boyutlu PNG yerine 0,8 kalitede WebP göndermek görüntü yükünü üçte bir veya daha fazla azaltabilir; bu da CDN çıkış faturalarını ve ziyaretçilerinizin mobil veri kullanımını düşürür.
- Hassas görüntülerde gizlilik önemlidir. Her şey tarayıcınızda çalıştığından kimlik taramaları, tıbbi görüntüler ve dahili ekran görüntüleri cihazınızda kalır — TinyPNG gibi üçüncü taraf sunuculara yükleme konusunda endişelenmenize gerek yoktur.
Yaygın uygulamalar
Sıkıştırma, bir görüntü gideceği yerden büyük olduğunda devreye girer. Tekrar tekrar gördüğümüz üç senaryo.
- Çevrimiçi mağaza için ürün fotoğrafları hazırlama. JPEG orijinaller, mağaza cephesinin hızlı kalması ve mobilde Core Web Vitals'ı geçmesi için 0,8 kaliteye (veya 200 KB hedefine) sıkıştırılır.
- Hata izleyiciye veya wiki'ye eklemeden önce ekran görüntülerini küçültme. 0,85 kalitede JPEG'e dönüştürülen PNG toplusu genellikle onlarca megabayttan birkaç megabayta düşer.
- Bir fotoğrafı yükleme sınırının altına indirme — 1 MB'ın üzerindeki dosyaları reddeden iş başvurusu portalı, sıkı ek sınırına sahip bir e-posta sistemi veya belirli bir bayt bütçesine uymak zorunda olan forum avatarı.
Gerçek örnek: 4 MB JPEG'ten 400 KB'ye
Telefon kamerasından çıkan 4 MB'lık bir JPEG, yükleme sınırlarını aşan ve sayfaları yavaşlatan yaygın bir dosyadır. Sıkıştırmanın ne kadar tasarruf sağladığı için adil bir kıyaslama noktasıdır.
JPEG'i yükleme bölgesine bırakın, formatı JPEG'te bırakın ve kalite kaydırıcısını 0,7'ye çekin ya da hedef boyut moduna geçip 400 KB yazın. Kalite modunda Canvas hattı bir kez yeniden kodlar ve sonucu gösterir — fotoğrafa bağlı olarak genellikle 500–700 KB civarında. Hedef boyut modunda sayfa birkaç kalite değeri dener, 400 KB'nin altında kalan en yüksek değeri seçer ve tasarruf yüzdesini raporlar. Tek dosyayı almak için karttaki İndir'e tıklayın ya da aynı anda birkaç görüntü sıkıştırdıysanız .zip indir'e tıklayın. Bu boyuttaki bir görüntü için tüm işlem bir saniyenin çok altında tamamlanır ve sayfa yüklendikten sonra sıfır bant genişliği tüketir.
Kalite modu ile hedef boyut modu arasındaki fark nedir?
Kalite modu, JPEG veya WebP kodlayıcısının kuantizasyon ayarına eşlenen 0,1'den 1,0'a kadar tek bir kaydırıcı sunar — düşük sayılar daha küçük dosyalar ve daha görünür artefaktlar anlamına gelir. Hedef boyut modu problemi tersine çevirir: kilobayt cinsinden bir boyut belirlersiniz ve sayfa, bütçenizin altında kalan en yüksek kaliteyi bulana kadar birkaç kez kodlayarak kalite değerini ikiye böler. Hedef boyut, sert bir sınır önemli olduğunda kullanışlıdır (1 MB yükleme sınırı gibi); kalite modu, öngörülebilir bir görsel sonuç istediğinizde daha hızlı ve daha iyidir. PNG kayıpsız olduğundan hiçbir mod onu etkilemez.
Bu cihazımda mı gerçekleşiyor?
Evet, tamamen. Sayfa her görüntüyü bellekte çözmek ve yeniden kodlamak için tarayıcının yerel Canvas API'sini ve Web File API'sini kullanır. Sunucuya hiçbir görüntü verisi gönderilmez, geçici yükleme yoktur ve bulut gidiş-dönüşü yoktur. Bunu kendiniz doğrulayabilirsiniz: DevTools'u açın, Ağ paneline geçin ve bir sıkıştırma çalıştırın. Göreceğiniz tek giden istekler ilk sayfa yüklemesi ve reklam çağrılarıdır. Sekmeyi terk eden görüntü şeklinde hiçbir şey yoktur.
PNG sıkıştırma neden bazen neredeyse küçülmüyor?
PNG kayıpsız bir format olduğundan Canvas API dosyayı küçültmek için ayrıntıları atamaz — yalnızca aynı pikselleri yeniden paketleyebilir. Fotoğraflar için PNG zaten büyüktür ve kayıpsız yeniden kodlama çok az tasarruf sağlar. Gerçek kazanım, çıktı formatını JPEG veya WebP'ye geçirmekten gelir; bunlar fotoğraflara uygun kayıplı sıkıştırma kullanır ve genellikle 4–10 kat daha küçük dosyalar verir. PNG'yi yalnızca kayıpsız kalite veya şeffaflık gerektirdiğinizde tercih edin; aksi takdirde fotoğraflar için JPEG'i veya en iyi boyut-kalite dengesi için WebP'yi seçin.
Hangi formatı seçmeliyim?
Fotoğraflar için 0,8 kalitede WebP en iyi boyut-kalite dengesini sunar ve 2021'den beri gönderilen her tarayıcı tarafından desteklenmektedir; JPEG, hedef daha eski veya daha kısıtlayıcı olduğunda güvenli evrensel yedektir. PNG'yi yalnızca kayıpsız kalite veya alfa kanalı gerektirdiğinizde seçin — çizgi sanatı, UI ekran görüntüleri, şeffaflıklı logolar. Sayfa hızı için optimize ediyorsanız ve kitleniz modern tarayıcılar kullanıyorsa WebP neredeyse her zaman doğru seçimdir; eski bir CMS'i veya WebP'yi reddeden bir baskı hattını besliyorsanız JPEG'e bağlı kalın.
Görüntülerinizi bırakın, kalite seviyesi veya hedef boyut seçin, sıkıştırın. Her şey sekmenizde çalışır. Yükleme yok, hesap yok, sunucu kuyruğunda bekleme yok.