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 Chrome Dev Summit 2018. Chúng tôi xây dựng trang web này để giúp bạn dễ dàng thử nghiệm với các bộ mã hoá và giải mã hình ảnh khác nhau, cũng như để thể hiện khả 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 mới để sử dụng Squoosh trên dòng lệnh có tên 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 tạo trở lại nhờ việc sử dụng WebAssembly. Bằng cách biên dịch bộ mã hoá và bộ 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 với các bộ mã hoá và giải mã mới ngay cả khi trình duyệt họ ưa dùng không hỗ trợ các bộ mã hoá và giải mã đó.
Đang khởi động một dòng lệnh Squoosh!
Kể từ lần ra mắt đầu tiên vào năm 2018, yêu cầu phổ biến của người dùng là 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ó đôi chút xung đột về lộ trình 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ụ bộ mã hoá và giải mã dựa trên dòng lệnh. Tuy nhiên, chúng tôi hiểu rằng chúng tôi 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 đã 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 Nút và sử dụng đúng 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 sử dụng Rollup để nhóm mọi thứ vào một tệp JavaScript nhằm đảm bảo quá trình 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 đó CLI 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ố Butteraugli).
Với Squoosh CLI, bạn có thể nén hình ảnh trong ứng dụng web 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 tốt nhất. Chúng tôi cũng dự định xây dựng các trình bổ trợ cho Webpack, Rollup và các công cụ xây dựng khác để tự động nén hình ảnh trong quy trình xây dựng.
Thay đổi quy trình xây dựng từ Webpack sang Rollup
Cùng một nhóm phát triển Squoosh đã dành một khoảng thời gian đáng kể để xem xét công cụ xây dựng cho Tooling Report (Báo cáo công cụ) trong năm nay và quyết định chuyển quy trình xây dựng của chúng tôi từ Webpack sang Rollup.
Ban đầu, dự án được bắt đầu bằng Webpack vì chúng tôi muốn thử với tư cách một nhóm. Tại thời điểm 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ợ đơn giản của Rollup và tính đơn giản với ESM đã khiến nó trở thành một lựa chọn tự nhiên cho dự án này.
Thiết kế giao diện người dùng được cập nhật
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à thành phần hình ảnh. Trò chơi này đôi chút 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, cảm giác tự nhiên
khi đưa một số blob vào thiết kế (bạn hiểu chưa?).
Việc sử dụng màu sắc cũng được thể hiện, vì vậy, màu sắc không chỉ là điểm nhấn mà còn là vectơ để phân biệt và củng cố hình ảnh nào phù hợp với các tuỳ chọn. Nhìn chung, trang chủ sinh động hơn một chút và bản thân công cụ thì rõ ràng và súc tích hơn một chút.
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ủa mình có một nơi để họ có thể phát bằng bộ mã hoá và giải mã mà không tốn nhiều công sức. Chúng tôi cũng hy vọng có thể mở rộng việc sử dụng Squoosh CLI và tích hợp thêm vào quy trình xây dựng một ứng dụng web.
Squoosh luôn là một 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. Vào năm 2021, chúng tôi dự định mở rộng cộng đồng người đóng góp và cải thiện quy trình làm quen với dự án.
Bạn có ý tưởng nào cho Squoosh không? Vui lòng cho chúng tôi biết qua công cụ theo dõi lỗi. Nhóm chúng tôi đang chuẩn bị cho kỳ nghỉ đông kéo dài, nhưng chúng tôi hứa sẽ gặp lại bạn trong năm mới.