Hỗ trợ các bộ mã hoá và giải mã mới, thiết kế mới và hỗ trợ CLI!
Squoosh là một ứng dụng nén hình ảnh do nhóm của chúng tôi tạo ra và ra mắt tại Hội nghị Chrome Dev Summit 2018. Chúng tôi đã tạo ra công cụ này để giúp bạn dễ dàng thử nghiệm các bộ mã hoá và giải mã hình ảnh khác nhau, đồng thời giới thiệu các chức năng của web hiện đại.
Hôm nay, chúng tôi phát hành một bản cập nhật lớn cho ứng dụng này, trong đó có thêm nhiều bộ mã hoá và giải mã, thiết kế mới và một cách mới để sử dụng Squoosh trên dòng lệnh, được gọi là Squoosh CLI.
Hỗ trợ các bộ mã hoá và giải mã mới
Ngoài các bộ mã hoá và giải mã được trình duyệt hỗ trợ sẵn, chúng tôi hiện hỗ trợ OxiPNG, MozJPEG, WebP và AVIF. Một bộ mã hoá và giải mã mới đã được tạo ra nhờ việc sử dụng WebAssembly. Bằng cách biên dịch bộ mã hoá và giải mã codec dưới dạng mô-đun WebAssembly, người dùng có thể truy cập và thử nghiệm các codec mới hơn ngay cả khi trình duyệt họ muốn dùng không hỗ trợ các codec đó.
Khởi chạy Squoosh! trên dòng lệnh
Kể từ lần ra mắt đầu tiên vào năm 2018, yêu cầu thường gặp của người dùng là tương tác với Squoosh theo cách có lập trình mà không cần giao diện người dùng. Chúng tôi cảm thấy hơi mâu thuẫn về hướng đi này vì ứng dụng của chúng tôi là một giao diện người dùng nằm trên các công cụ codec dựa trên dòng lệnh. Tuy nhiên, chúng tôi hiểu rằng bạn muốn tương tác với toàn bộ gói codec thay vì nhiều công cụ. Squoosh CLI làm được điều đó.
Bạn có thể cài đặt phiên bản beta của Squoosh CLI bằng cách chạy npm i @squoosh/cli hoặc chạy trực tiếp bằng npx @squoosh/cli [parameters].
Squoosh CLI được viết bằng Node và sử dụng chính xác các mô-đun WebAssembly mà PWA sử dụng. Thông qua việc sử dụng worker trên diện rộng, tất cả hình ảnh đều được giải mã, xử lý và mã hoá song song.
Chúng tôi cũng sử dụng Rollup để đóng gói mọi thứ vào một tệp JavaScript nhằm đảm bảo quá trình cài đặt thông qua npx diễn ra nhanh chóng và liền mạch. CLI cũng cung cấp tính năng nén tự động, trong đó CLI cố gắng giảm chất lượng hình ảnh nhiều nhất có thể mà không làm giảm độ trung thực về hình ảnh (bằng cách sử dụng chỉ số Butteraugli).
Với Squoosh CLI, bạn có thể nén hình ảnh trong ứng dụng web của mình thành nhiều định dạng và sử dụng phần tử <picture> để trình duyệt chọn phiên bản tốt nhất. Chúng tôi cũng dự định tạo các trình bổ trợ cho Webpack, Rollup và các công cụ tạo khác để biến việc nén hình ảnh thành một phần tự động trong quy trình tạo của bạn.
Thay đổi quy trình xây dựng từ Webpack sang Rollup
Cũng chính nhóm đã tạo ra Squoosh đã dành nhiều thời gian để xem xét công cụ xây dựng trong năm nay cho Báo cáo về công cụ và quyết định chuyển quy trình xây dựng từ Webpack sang Rollup.
Ban đầu, dự án được bắt đầu bằng Webpack vì chúng tôi muốn dùng thử công cụ này theo nhóm. Vào thời điểm đó (năm 2018), Webpack là công cụ duy nhất cho phép chúng tôi kiểm soát đủ để thiết lập dự án theo cách chúng tôi muốn. Theo thời gian, chúng tôi nhận thấy hệ thống trình bổ trợ dễ dàng và sự đơn giản của Rollup với ESM đã khiến Rollup trở thành lựa chọn tự nhiên cho dự án này.
Thiết kế giao diện người dùng mới
Chúng tôi cũng đã cập nhật thiết kế giao diện người dùng của ứng dụng có blobs làm phần tử trực quan. Đây là một cách chơi chữ về cách chúng ta xử lý dữ liệu trong mã. Squoosh truyền dữ liệu hình ảnh xung quanh dưới dạng một blob, vì vậy, việc đưa một số blob vào thiết kế là điều tự nhiên (bạn hiểu ý tôi chứ?).
Việc sử dụng màu sắc cũng được tinh chỉnh để màu sắc không chỉ là điểm nhấn mà còn là một vectơ để phân biệt và củng cố hình ảnh nào phù hợp với các lựa chọn. Nhìn chung, trang chủ có phần sinh động hơn và bản thân công cụ này cũng rõ ràng và súc tích hơn.
Tiếp theo là gì?
Chúng tôi dự định tiếp tục phát triển Squoosh. Khi định dạng hình ảnh mới được phát hành, chúng tôi muốn người dùng có một nơi để thử nghiệm bộ mã hoá và giải mã mà không cần phải làm gì nhiều. Chúng tôi cũng hy vọng sẽ mở rộng việc sử dụng Squoosh CLI và tích hợp nhiều hơn vào quy trình xây dựng của một ứng dụng web.
Squoosh luôn là phần mềm nguồn mở nhưng chúng tôi chưa bao giờ tập trung vào việc phát triển cộng đồng. Năm 2021, chúng tôi dự định mở rộng cơ sở cộng tác viên và có quy trình thiết lập ban đầu tốt hơn cho dự án.
Bạn có ý tưởng nào cho Squoosh không? Vui lòng cho chúng tôi biết trên công cụ theo dõi lỗi của chúng tôi. Nhóm hỗ trợ sẽ nghỉ đông dài ngày nhưng chúng tôi hứa sẽ liên hệ lại với bạn vào năm mới.