Yeni codec'ler desteği, güncellenmiş tasarım ve KSA desteği.
Squoosh, ekibimizin geliştirip Chrome Geliştirici Zirvesi 2018'de tanıttığı bir görüntü sıkıştırma uygulamasıdır. Bu geliştirmeyi, farklı görüntü codec'lerini denemeyi kolaylaştırmak ve modern web'in yeteneklerini sergilemek üzere oluşturduk.
Bugün, daha fazla codec desteği, yeni bir tasarım ve Squoosh CLI adlı komut satırınızda Squoosh'u kullanmanın yeni bir yolunu içeren büyük bir uygulama güncellemesini yayınlıyoruz.
Yeni codec'ler desteği
Tarayıcınızda yerel olarak desteklenen codec'lerin yanı sıra artık OxiPNG, MozJPEG, WebP ve AVIF'yi de destekliyoruz. WebAssembly ile tekrar yeni bir codec kullanılmıştır. WebAssembly modülü olarak bir codec kodlayıcı ve kod çözücü derleyerek kullanıcılar, tercih ettikleri tarayıcı desteklenmiyor olsa bile daha yeni codec'lere erişebilir ve bunlarla denemeler yapabilir.
Squoosh komut satırı başlatılıyor!
2018'deki lansmandan bu yana kullanıcıların yaygın istekleri, Squoosh ile kullanıcı arayüzü olmadan programatik olarak etkileşime geçmekti. Uygulamamız, komut satırı tabanlı codec araçlarının yanı sıra bir kullanıcı arayüzü olduğundan bu yol konusunda biraz çelişki hissettik. Ancak birden çok araç yerine codec'lerin tamamı ile etkileşime geçme arzusunu anlıyoruz. Squoosh CLI, tam da bunu yapıyor.
npm i @squoosh/cli komutunu çalıştırarak Squoosh KSA'nın beta sürümünü yükleyebilir veya npx @squoosh/cli [parameters] ile doğrudan çalıştırabilirsiniz.
Squoosh KSA, Node'da yazılır ve PWA'nın kullandığı WebAssembly modüllerinin aynısı kullanılır. Çalışanların yoğun bir şekilde kullanılmasıyla tüm görüntülerin kodu çözülür, işlenir ve paralel olarak kodlanır.
npx aracılığıyla yüklemenin hızlı ve sorunsuz olmasını sağlamak amacıyla, her şeyi tek bir JavaScript dosyasında paketlemek için Toplayıcı özelliğini de kullanıyoruz. KSA, görsel kalitesini düşürmeden (Butteraugli metriğini kullanarak) resmin kalitesini mümkün olduğunca azaltmaya çalışan otomatik sıkıştırma olanağı da sunar.
Squoosh CLI ile web uygulamanızdaki resimleri birden fazla biçimde sıkıştırabilir ve <picture> öğesini kullanarak tarayıcının en iyi sürümü seçmesini sağlayabilirsiniz. Görüntü sıkıştırmayı derleme işleminizin otomatik bir parçası haline getirmek amacıyla Webpack, Rollup ve diğer derleme araçları için eklentiler de derlemeyi planlıyoruz.
Webpack'ten Rollup'a derleme işlemi değişikliği
Squoosh'u geliştiren ekip, bu yıl Tooling Report için derleme araçlarına oldukça fazla zaman harcadı ve derleme sürecimizi Webpack'ten Rollup'a geçirmeye karar verdi.
Projeye başlangıçta Webpack ile başladı çünkü bir ekip olarak denemek istiyorduk. 2018 yılında Webpack, projeyi istediğimiz şekilde oluşturmamız için bize yeterli kontrol sağlayan tek araçtı. Zaman içinde, Rollup'ın kolay eklenti sistemi olduğunu ve ESM'nin sunduğu basitliği nedeniyle bu proje için doğal bir tercih olduğunu fark ettik.
Kullanıcı arayüzü tasarımı güncellendi
Görsel öğe olarak blobs kullanılan uygulamanın kullanıcı arayüzü tasarımını da güncelledik. Bu, kodumuzdaki verileri
nasıl işlediğimizle ilgili küçük bir kelime oyunudur. Squoosh, resim verilerini blob olarak aktarıyor. Bu nedenle, tasarıma bazı lekeler eklemek (anlayın!) doğal geldi.
Renk kullanımı da hassaslaştırıldı. Böylece, renk vurgudan çok daha fazlasını ifade ediyordu. Ayrıca, seçeneklerde hangi resmin bağlam içinde yer aldığını ayırt edip pekiştirecek bir vektör de kullanmak istiyordu. Özetle, ana sayfa biraz daha canlı, aracın kendisi ise biraz daha anlaşılır ve öz.
Sırada ne var?
Squoosh üzerinde çalışmaya devam etmeyi planlıyoruz. Yeni resim biçimi kullanıma sunulduğunda kullanıcılarımızın zahmetsizce codec ile oynayabilecekleri bir ortam olmasını istiyoruz. Ayrıca, Squoosh CLI'ın kullanımını artırmayı ve web uygulaması derleme sürecine daha fazla entegre etmeyi umuyoruz.
Squoosh her zaman açık kaynak olmuştur ama topluluğu büyütmeye hiçbir zaman odaklanmamıştık. 2021'de, katkıda bulunan kullanıcı tabanımızı genişletmeyi ve projeye daha iyi bir oryantasyon süreci sunmayı planlıyoruz.
Squoosh için bir fikrin var mı? Lütfen sorun izleyicimiz üzerinden bu durumu bize bildirin. Ekip daha uzun bir kış tatili için yola çıkacak ama yeni yılda sizinle tekrar iletişime geçeceğimize söz veriyoruz.