Squoosh ekibimizin oluşturduğu bir görüntü sıkıştırma uygulamasıdır ve Chrome Dev Summit 2018’de tanıtıldı. Farklı görüntü kodekleriyle denemeyi kolaylaştırmak ve modern web’in yeteneklerini sergilemek için 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üncellemesi yayınlıyoruz.
Yeni codec desteği #
Artık tarayıcınızda doğal olarak desteklenen codec bileşenlerine ek olarak OxiPNG, MozJPEG, WebP ve AVIF’i destekliyoruz. WebAssembly kullanılarak yeni bir codec yeniden mümkün kılındı. Kullanıcılar, bir codec kodlayıcı ve kod çözücüyü WebAssembly modülü olarak derleyerek, tercih ettikleri tarayıcı desteklemese bile daha yeni codec’lere erişebilir ve bunları deneyebilir.
Bir komut satırı başlatma Squoosh! #
2018’deki orijinal lansmandan bu yana, ortak kullanıcı isteği, kullanıcı arayüzü olmadan programlı olarak Squoosh ile etkileşim kurmaktı. Uygulamamız, komut satırı tabanlı codec araçlarının üzerinde bir kullanıcı arabirimi olduğundan, bu yol hakkında biraz çelişkili hissettik. Bununla birlikte, birden çok araç yerine tüm codec paketiyle etkileşim kurma arzusunu anlıyoruz. Squoosh CLI tam da bunu yapar.
Squoosh CLI’nin beta sürümünü çalıştırarak yükleyebilirsiniz. npm i @squoosh/cli veya doğrudan kullanarak çalıştırın npx @squoosh/cli [parameters].
Squoosh CLI, Düğümde yazılmıştır ve PWA’nın kullandığı WebAssembly modüllerinin aynısını kullanır. Çalışanların kapsamlı kullanımı sayesinde, tüm görüntülerin kodu paralel olarak çözülür, işlenir ve kodlanır. Ayrıca, kurulumun şu şekilde yapıldığından emin olmak için her şeyi tek bir JavaScript dosyasında bir araya getirmek için Toplama’yı kullanıyoruz. npx hızlı ve sorunsuzdur. CLI ayrıca, görsel doğruluğu bozmadan bir görüntünün kalitesini olabildiğince düşürmeye çalıştığı (kullanarak) otomatik sıkıştırma sunar. Tereyağı metriği).
Squoosh CLI ile web uygulamanızdaki görüntüleri birden fazla formatta sıkıştırabilir ve <picture> eleman tarayıcının en iyi sürümü seçmesine izin vermek için. Ayrıca, görüntü sıkıştırmayı oluşturma işleminizin otomatik bir parçası haline getirmek için Webpack, Rollup ve diğer oluşturma araçları için eklentiler oluşturmayı planlıyoruz.
Webpack’ten Rollup’a süreç değişikliği oluşturun #
Squoosh’u yapan aynı ekip, bu yıl için yapım araçlarına bakmak için önemli miktarda zaman harcadı. Takım Raporuve derleme sürecimizi Webpack’ten Rollup’a geçirmeye karar verdik.
Proje başlangıçta Webpack ile başlatıldı çünkü bunu bir ekip olarak denemek istiyorduk ve 2018’de Webpack, projeyi istediğimiz gibi kurmamız için bize yeterli kontrolü sağlayan tek araçtı. Zamanla, Rollup’ın kolay eklenti sistemi ve ESM’deki sadeliğinin onu bu proje için doğal bir seçim haline getirdiğini gördük.
Güncellenmiş kullanıcı arayüzü tasarımı #
Ayrıca uygulamanın kullanıcı arayüzü tasarımını da güncelledik. blobs görsel bir unsur olarak Kodumuzda verileri nasıl ele aldığımıza dair küçük bir kelime oyunu. Squoosh, görüntü verilerini bir damla olarak iletir, bu nedenle tasarıma bazı lekeler eklemek doğal geldi (anladınız mı?).
Renk kullanımı da geliştirildi, böylece renk bir vurgudan daha fazlasıydı, ayrıca seçenekler için hangi görüntünün bağlam içinde olduğunu ayırt eden ve pekiştiren bir vektördü. Sonuç olarak, ana sayfa biraz daha canlıdır ve aracın kendisi de biraz daha net ve özdür.
Sıradaki ne ? #
Squoosh üzerinde çalışmaya devam etmeyi planlıyoruz. Yeni resim formatı çıktıkça, kullanıcılarımızın ağır yük kaldırmadan codec ile oynayabilecekleri bir yere sahip olmalarını istiyoruz. Ayrıca Squoosh CLI kullanımını genişletmeyi ve bir web uygulamasının oluşturma sürecine daha fazlasını entegre etmeyi umuyoruz.
Squoosh her zaman açık kaynak olmuştur, ancak topluluğu büyütmeye hiçbir zaman odaklanmadık. 2021’de katılımcı tabanımızı genişletmeyi ve projeye daha iyi bir katılım süreci geçirmeyi planlıyoruz.
Squoosh için herhangi bir fikriniz var mı? Lütfen bize haber verin sorun izleyici. Ekip uzun bir kış tatiline gidiyor ama biz yeni yılda yeniden sizlerle olmaya söz veriyoruz.