Эта статья подробно описывает реализацию инструмента сжатия изображений на стороне клиента, предназначенного для работы исключительно в браузере. Мотивация проистекает из защиты конфиденциальности, устранения необходимости обработки на стороне сервера и затрат, а также обеспечения более быстрого взаимодействия с пользователем. Основная архитектура использует кодеки изображений на основе WebAssembly из библиотеки @jsquash для декодирования и кодирования изображений. Реализация включает в себя динамическую загрузку кодеков, декодирование изображений в необработанные пиксельные данные, а затем кодирование их с выбранными форматами и настройками качества. Элементы управления пользовательского интерфейса позволяют выбирать формат и регулировать качество с помощью ползунка. Service Worker кэширует файлы WebAssembly для более быстрой последующей загрузки и автономной функциональности. Инструмент поддерживает такие форматы, как JPEG, PNG, WebP и AVIF, и демонстрирует примеры коэффициентов сжатия. Ключевые соображения производительности включают время загрузки кодека, скорость сжатия и использование памяти. В заключении подчеркивается конфиденциальность, производительность и использование WebAssembly для сжатия на уровне нативного кода. Инструмент доступен для использования с запросом на включение заголовка referer для отслеживания источника трафика.
dev.to
Building a Browser-Based Image Compression Tool
Create attached notes ...
