Комментарии 18
Спасибо, но есть хотелка. Было б здорово, если бы вы туда что-то типа OptiPNG прикрутили. Мой любимый скриншотер сохраняет скриншоты в некомпрессированный png лошадиного размера, а OptiPNG может попробовать разные комбинации сжатий и автоматом выбрать оптимальное, но это всё происходит без потери качества. А у вас оно пережимается с потерей качества и выглядит потом не очень — нерезко и с артефактами. На фотках этого не видно, а вот на скриншотах - очень даже.
Да, tinypng идёт по правильному пути, там генеряется палитра и скриншот перегоняется в индексированные цвета. Но в идеале должна быть комбинация с OptiPNG, поскольку если я прогоню файл через tinypng, то потом могу его ещё немного "дожать" через OptiPNG. Не факт, кстати, что палитра всегда будет давать выигрыш, в идеале чтобы получить "минимально возможный" PNG надо попробовать так и этак и все возможные комбинации сжатия и фильтров. Кроме того, если дотошно попиксельно сравнить оригинал и результат tinypng, то они слегка отличаются, вот пример, где это заметно при очень сильном увеличении:
PNG можно перепаковывать в lossless JpegXL, выигрывая порядка половины размера "cjxl.exe picture.png picture.jxl -q 100 -e 9"; для просмотра я использую JpegView, плагин для explorer.exe называется jxl-winthumb; также оно умеет lossless перепаковывать jpeg-и, выигрывая порядка 25%
не удобно что качает архив. лишние действия для разархивирования и так далее.
добавьте фичу скачивания сразу же готовой фотографии. если у меня одна фотка, зачем мне архив качать.
Так это пережатие с потерей качества или оптимизация? Если оптимизация, то как можно гарантировать уменьшение размера до двух раз, если это, например webp? Такое даже при перекодировании в jxl недостижимо. Что будет, если пропустить то же изображение через сервис десять раз?
Прошу прощения за оффтопик. Так случилось, только что сделал для своих целей утилитку для конвертации разных картинок в jpeg. Максимально простую, без настроек, установки, зависимостей (кроме .NET) и пр. На отдельный пост это никак не тянет, но вдруг кому-то пригодится. Понимает tif, bmp, png, webp.
Я конечно все понимаю, но, нельзя было без загрузки на сервер сделать?
А как без загрузки на сервер это сделать?
Имелось ввиду скорее всего без хранения на сервере, видимо переживают за конфиденциальность
Например вот так: https://github.com/LI-NA/mozjpeg.js
А архив собирать так: https://stuk.github.io/jszip/
А ещё можно вот так, используя WebAssembly:
https://github.com/GoogleChromeLabs/squoosh/tree/dev
Вы несколько раз в статье пишете неправду, когда утверждаете, что сжатие ваш сервис делает «без потери качества». Или не разбираетесь, или приукрашиваете, но в любом случае - вводите в заблуждение. Как минимум конвертация в webp поменяет значения пикселей изображения; а перекодирование JPG, даже если пиксели останутся точно тех же цветов, но поменяются таблицы квантования или квантованные значения, то это всё равно будет деструктивной оптимизацией. Про другие оптимизации у вас не знаю. Различайте.
Так это ж ти́пикал ма́ркетинг. Автор называет оптимизацию без потери видимого качества "оптимизацией без потери качества". Так что всё верно, чтобы на глаз найти различие в двух картинках, их нужно жать с сильно различающимся качеством (> 0.1..0.2), сравнивать попиксельно и умножать дальту на 2..5..10.
Есть нюанс, avif по тестам обыгрывает jpeg, и по точности у него баллы выше, но на глаз сжатие jpeg как будто приятнее и детальнее (хотя это не так), а avif слишком гладкими делает фотки.
В реальности автор молодец, но в мир саасов, хотелось бы оффлайн решения, чтобы картинки жались в браузере, а не на сервере. С использованием wasm производительность будет достаточной. Да даже на js, если не жать 4к картинки.
Есть ещё вариант, можно качать и работать локально, править под свои хотелки. Кадрирование: вращение, изменение размера, обрезка. В итоге картинка и превьюшка. Ванильный js (почти)
https://jonhappy.github.io/modal_menu/pic.html
Как идея весьма неплохо, особенно поразбираться с инструментами для обработки изображений.
В статье не увидел ни одного аналога, с которым можно было бы сравнить. А сравнить есть с чем, например со Squoosh, или другими существующими решениями.
Попробовал посжимать изображения с Вашим сервисом и со Squoosh, и опытным путём получилось, что качество при сжатии равно примерно 70%. Для примера брал изображения с Unsplash (очень похожий медведь, фото ночного города, фото острова).
Если сравнивать функционал, то у Вас можно выбрать только факт того, нужен ли WebP, в то время как в сравниваемом мной сервисе можно:
изменить размер;
уменьшить цветовую палитру;
выбрать итоговый формат;
настроить параметры сжатия;
сравнить оба изображения.
Плюсом ко всему, Squoosh можно установить как PWA и пользоваться им в офлайн-режиме.
Минусы также имеются - невозможность обработки больше одного изображения за раз; тяжелые изображения могут и не сжаться - всё происходит на устройстве пользователя, что для меня является более существенным, т.к. всё это исполняется в браузере.
Что касается Вашего проекта, то возможно стоит задуматься об аналогах sharp, дать возможность пользователю настройки параметров сжатия, поправить UX (например: контрастность цветов в D&D-области; сама D&D область не на весь экран; в центральной области поведение отличается в зависимости от того, выбраны ли файлы).
Публикации
Как я создавал бесплатный сервис оптимизации изображений FlashImg.ru