Yeni codec desteği, güncellenen tasarım ve CLI desteği
Squoosh, ekibimizin oluşturduğu ve Chrome Dev Summit 2018'de ilk kez gösterdiği bir resim sıkıştırma uygulamasıdır. Bu aracı, farklı görüntü codec'leriyle deneme yapmayı kolaylaştırmak ve modern web'in özelliklerini sergilemek için geliştirdik.
Bugün, uygulamada daha fazla codec desteği, yeni bir tasarım ve komut satırınızda Squoosh'u kullanmanın yeni bir yolu olan Squoosh CLI'yi içeren önemli bir güncelleme yayınlıyoruz.
Yeni codec desteği
Artık tarayıcınızda yerel olarak desteklenen codec'lere ek olarak OxiPNG, MozJPEG, WebP ve AVIF'i destekliyoruz. WebAssembly'nin kullanılmasıyla yeni bir codec tekrar mümkün hale geldi. Kullanıcılar, tercih ettikleri tarayıcı desteklemese bile WebAssembly modülü olarak bir codec kodlayıcı ve kod çözücü derleyerek daha yeni codec'lere erişebilir ve bunları deneyebilir.
Komut satırı Squoosh! uygulamasını başlatma
2018'deki ilk lansmanından bu yana, kullanıcıların en çok talep ettiği özelliklerden biri Squoosh ile kullanıcı arayüzü olmadan programatik olarak etkileşim kurabilmekti. Uygulamamız, komut satırına dayalı codec araçlarının üzerinde bir kullanıcı arayüzü olduğundan bu yolla ilgili biraz kararsız kaldık. Ancak, birden fazla araç yerine codec'lerin tamamıyla etkileşim kurma isteğinizi anlıyoruz. Squoosh CLI tam olarak bunu yapar.
Squoosh CLI'nin beta sürümünü npm i @squoosh/cli komutunu çalıştırarak yükleyebilir veya npx @squoosh/cli [parameters] komutunu kullanarak doğrudan çalıştırabilirsiniz.
Squoosh CLI, Node ile yazılmıştır ve PWA'nın kullandığı WebAssembly modüllerinin aynısını kullanır. Çalışanların yoğun kullanımı sayesinde tüm resimler paralel olarak çözülür, işlenir ve kodlanır.
Ayrıca,
npx üzerinden kurulumun hızlı ve sorunsuz olmasını sağlamak için her şeyi tek bir JavaScript dosyasında paketlemek üzere Rollup'ı kullanırız. CLI, görsel doğruluğu bozmadan (Butteraugli metriğini kullanarak) bir görüntünün kalitesini mümkün olduğunca düşürmeye çalıştığı otomatik sıkıştırma da sunar.
Squoosh CLI ile web uygulamanızdaki resimleri birden fazla biçimde sıkıştırabilir ve tarayıcının en iyi sürümü seçmesine izin vermek için
<picture> öğesini kullanabilirsiniz. Ayrıca, Webpack, Rollup ve diğer derleme araçları için eklentiler oluşturarak resim sıkıştırmayı derleme işleminizin otomatik bir parçası haline getirmeyi planlıyoruz.
Derleme işleminde Webpack'ten Rollup'a geçiş
Squoosh'u geliştiren ekip, bu yıl Tooling Report için derleme araçlarını incelemeye önemli ölçüde zaman ayırdı ve derleme sürecimizi Webpack'ten Rollup'a geçirmeye karar verdi.
Projeye ilk olarak Webpack ile başladık çünkü ekip olarak bu aracı denemek istiyorduk. 2018'de projeyi istediğimiz şekilde kurmamız için yeterli kontrolü sağlayan tek araç Webpack'ti. Zaman içinde, Rollup'ın kolay eklenti sistemi ve ESM ile basitliğinin bu proje için doğal bir seçim olduğunu gördük.
Güncellenmiş kullanıcı arayüzü tasarımı
Ayrıca, görsel öğe olarak blobs simgesini içeren 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, görüntü verilerini blob olarak aktardığı için tasarıma bazı blob'lar eklemek doğal bir seçim oldu (anladınız mı?).
Renk kullanımı da iyileştirildi. Böylece renk, vurgu olmanın yanı sıra seçenekler için hangi resmin bağlamda olduğunu ayırt etmeye ve pekiştirmeye yarayan bir vektör haline geldi. Sonuç olarak ana sayfa biraz daha canlı, araç ise biraz daha net ve özlü hale geldi.
Sırada ne var?
Squoosh üzerinde çalışmaya devam etmeyi planlıyoruz. Yeni resim biçimi yayınlandığında kullanıcılarımızın, fazla çaba harcamadan codec ile oynayabilecekleri bir yer olmasını istiyoruz. Ayrıca Squoosh KSA'nın kullanımını genişletmeyi ve web uygulamalarının derleme işlemine daha fazla entegrasyon yapmayı da umuyoruz.
Squoosh her zaman açık kaynaklıydı ancak topluluğu büyütmeye hiç odaklanmadık. 2021'de katkıda bulunan kullanıcı tabanımızı genişletmeyi ve projeye daha iyi bir katılım süreci sunmayı planlıyoruz.
Squoosh hakkında fikirleriniz var mı? Lütfen sorun izleyicimizden bize bildirin. Ekibimiz uzun bir kış tatiline çıkıyor ancak yeni yılda size geri döneceğimize söz veriyoruz.