Squoosh v2 duyurusu

Yeni codec desteği, güncellenmiş tasarım ve CLI desteği!

Mariko Kosaka

Squoosh, ekibimizin geliştirdiği ve Chrome Geliştirici Zirvesi 2018'de tanıttığı bir resim sıkıştırma uygulamasıdır. Platformu, farklı resim codec'leriyle deneme yapmayı kolaylaştıracak ve modern web'in yeteneklerini gösterecek şekilde geliştirdik.

Bugün uygulamada daha fazla codec desteği, yeni bir tasarım ve Squoosh CLI adlı komut satırında Squoosh'u kullanmanın yeni bir yolu yer alan büyük bir güncelleme yayınlıyoruz.

Yeni codec desteği

Tarayıcınızda yerel olarak desteklenen codec'lerin yanı sıra artık OxiPNG, MozJPEG, WebP ve AVIF'i de destekliyoruz. WebAssembly kullanımı ile tekrar yeni bir codec sunulması mümkün hale geldi. Kullanıcılar, WebAssembly modülü olarak bir codec kodlayıcı ve kod çözücü derleyerek, tercih ettikleri tarayıcı desteklemediğinde bile yeni codec'lere erişebilir ve bunlarla denemeler yapabilir.

Komut satırı Squoosh başlatılıyor!

2018'deki ilk lansmandan beri yaygın kullanıcı isteği, kullanıcı arayüzü olmadan Squoosh ile programatik olarak etkileşime geçmekti. Uygulamamız, komut satırı tabanlı codec araçlarının üstünde yer alan bir kullanıcı arayüzü olduğundan bu yol konusunda biraz çelişkili hissettik. Bununla birlikte, birden çok araç yerine codec'lerin tüm paketiyle etkileşimde bulunmayı anlıyoruz. Squoosh CLI tam olarak bunu yapar.

Squoosh KSA'nın beta sürümünü npm i @squoosh/cli çalıştırarak yükleyebilir veya doğrudan npx @squoosh/cli [parameters] ile çalıştırabilirsiniz.

Squoosh KSA, Node'da yazılır ve PWA'nın kullandığı aynı WebAssembly modüllerini kullanır. Kapsamlı çalışan kullanımıyla tüm görüntülerin kodu çözülür, işlenir ve paralel olarak kodlanır. Ayrıca, npx üzerinden kurulumun hızlı ve sorunsuz olmasını sağlamak amacıyla, her şeyi tek bir JavaScript dosyasında toplamak için Rollup'ı kullanıyoruz. CLI, görsel kaliteyi düşürmeden (Butteraugli metriğini kullanarak) resmin kalitesini mümkün olduğunca düşürmeye çalışan otomatik sıkıştırma özelliği de sunar.

Squoosh KSA ile web uygulamanızdaki resimleri birden fazla biçimde sıkıştırabilir ve tarayıcının en iyi sürümü seçmesi için <picture> öğesini kullanabilirsiniz. Ayrıca, resim 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 de eklentiler geliştirmeyi planlıyoruz.

Derleme işlemi Webpack'ten Rollup'a değiştirildi

Squoosh'u geliştiren ekip bu yıl Tooling Report (Araç Raporu) için oluşturma araçlarını incelemeye önemli miktarda zaman harcadı ve derleme sürecimizi Webpack'ten Rollup'a geçirmeye karar verdi.

Proje başlangıçta Webpack'le başladı çünkü ekip olarak denemek istiyorduk. 2018'de Webpack, projeyi istediğimiz gibi ayarlamamız için bize yeterli kontrol sağlayan tek araçtı. Zaman içinde Rollup'ın pratik eklenti sistemini ve ESM'nin basitliği nedeniyle bu proje için doğal bir seçim olduğunu gördük.

Kullanıcı arayüzü tasarımı güncellendi

Görsel öğe olarak blobs içeren uygulamanın kullanıcı arayüzü tasarımını da güncelledik. Kodumuzdaki verileri nasıl işlediğimizle ilgili küçük bir kelime oyunu. Squoosh, resim verilerini damlalar şeklinde aktarıyor. Bu nedenle, tasarıma bazı lekeler eklemek doğal geldi (anladım mı?).

Renk kullanımı da yoğunlaştırıldı. Bu sayede, renk bir vurgudan ibaret değil, aynı zamanda seçenekler için hangi resmin bağlamında olduğunu ayırt etmek ve güçlendirmek için bir vektör olarak tasarlandı. Sonuç olarak, ana sayfa biraz daha canlı, araç ise daha açık ve net.

Sırada ne var?

Squoosh üzerinde çalışmaya devam etmeyi planlıyoruz. Yeni resim biçimi kullanıma sunuldukça, kullanıcılarımızın kod ile uğraşmadan oynayabilecekleri bir yere sahip olmalarını istiyoruz. Ayrıca Squoosh KSA'nın kullanımını genişletmeyi ve bir web uygulamasının derleme sürecine daha fazlasını entegre etmeyi umuyoruz.

Squoosh her zaman açık kaynak olarak kullanıldı, ancak hiçbir zaman topluluğu büyütmeye odaklanmadı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 fikriniz var mı? Lütfen sorun takip aracımızdan bize bildirin. Ekip, uzatılmış kış tatili yaklaşıyor. Yeni yılda ise size dönüş yapacağımızı garanti ediyoruz.