Hỗ trợ bộ mã hoá và giải mã mới, thiết kế cập nhật và hỗ trợ CLI!
Squoosh là một ứng dụng nén hình ảnh mà nhóm chúng tôi xây dựng và ra mắt tại Hội nghị Nhà phát triển Chrome năm 2018. Chúng tôi xây dựng công cụ này để giúp bạn dễ dàng thử nghiệm với nhiều bộ mã hoá và giải mã hình ảnh, đồ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 sẽ phát hành một bản cập nhật lớn cho ứng dụng với khả năng hỗ trợ nhiều bộ mã hoá hơn, thiết kế mới và cách sử dụng mới Squoosh trên dòng lệnh có tên là Squoosh CLI.
Hỗ trợ bộ mã hoá và giải mã mới
Ngoài các bộ mã hoá và giải mã được hỗ trợ sẵn trong trình duyệt, 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 sử dụng WebAssembly trở lại. Bằng cách biên dịch một bộ mã hoá và giải mã bộ mã hoá và giải mã dưới dạng mô-đun WebAssembly, người dùng có thể truy cập và thử nghiệm các bộ mã hoá và giải mã mới hơn, ngay cả khi trình duyệt mà họ ưu tiên không hỗ trợ các bộ mã hoá và giải mã đó.
Triển khai dòng lệnh Squoosh!
Kể từ lần đầu ra mắt vào năm 2018, thông thường, người dùng thường tương tác với Squoosh theo phương thứ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 có một chút mâu thuẫn về đường dẫn 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ụ mã hoá và giải mã dựa trên dòng lệnh. Tuy nhiên, chúng tôi hiểu mong muốn tương tác với toàn bộ gói bộ mã hoá và giải mã thay vì nhiều công cụ. Squoosh CLI sẽ thực hiện đ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 Nút và sử dụng chính các mô-đun WebAssembly mà PWA sử dụng. Thông qua việc sử dụng rộng rãi worker, tất cả hình ảnh đều được giải mã, xử lý và mã hoá song song.
Chúng tôi cũng dùng tính năng Cuộn lên để nhóm mọi thứ vào một tệp JavaScript nhằm đảm bảo việc cài đặt qua npx diễn ra nhanh chóng và liền mạch. CLI cũng cung cấp tính năng tự động nén, trong đó ứng dụng này sẽ cố gắng giảm chất lượng của hình ảnh nhiều nhất có thể mà không làm giảm độ trung thực hình ảnh (sử dụng chỉ số Bustaugli).
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> để cho phép trình duyệt chọn phiên bản phù hợp 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ụ xây dựng khác để biến việc nén hình ảnh thành một phần tự động trong quy trình xây dựng.
Thay đổi quy trình xây dựng từ Webpack sang Rollup
Năm nay, nhóm xây dựng Squoosh đã dành một lượng thời gian đáng kể để xem xét công cụ xây dựng cho Báo cáo công cụ và quyết định chuyển quy trình xây dựng của chúng tôi từ Webpack sang Cuộn.
Ban đầu, dự án này được bắt đầu với Webpack vì chúng tôi muốn thử dùng Webpack với tư cách một nhóm, và tại thời điểm đó vào năm 2018, Webpack là công cụ duy nhất cung cấp cho chúng tôi đủ quyền 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ễ sử dụng và tính đơn giản của Rollup đã khiến ESM trở thành một lựa chọn tự nhiên cho dự án này.
Cập nhật thiết kế giao diện người dùng
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, trong đó blobs là một phần tử hình ảnh. Đây chỉ là một chi tiết nhỏ về cách chúng tôi
xử lý dữ liệu trong mã nguồn của mình. Squoosh truyền dữ liệu hình ảnh xung quanh dưới dạng một blob, vì vậy, việc thêm một số blob vào thiết kế có vẻ tự nhiên (bạn có hiểu không?).
Việc sử dụng màu sắc cũng được tinh chỉnh, để màu đó không chỉ là màu 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 ngữ cảnh của các tuỳ chọn. Nói chung, trang chủ sống động hơn một chút và công cụ này rõ ràng, súc tích hơn một chút.
Tiếp theo là gì?
Chúng tôi dự định sẽ tiếp tục phát triển trò chơi 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ủa mình có thể chơi bằng bộ mã hoá và giải mã mà không phải tốn nhiều công sức. 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 ứng dụng web.
Squoosh luôn là 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ộng đồng cộng tác viên và áp dụng quy trình làm quen hiệu quả hơn với dự án.
Bạn có ý tưởng nào về Squoosh không? Vui lòng cho chúng tôi biết trên công cụ theo dõi lỗi. Nhóm hướng tới kỳ nghỉ đông kéo dài, nhưng chúng tôi hứa sẽ liên hệ lại với bạn trong năm mới.