Всем привет. В этом материале я расскажу как создавал бесплатный сервис оптимизации изображений FlashImg.ru
Зачем оптимизировать изображения
Сегодня любой сайт содержит огромное количество изображений. Целевая аудитория сервиса - вебмастера.
Размер сайта определяется количеством медиа-контента (изображения, видео, аудио).
Первое место в этом списке занимают изображения. Если открыть панель инструментов веб-мастера в браузере и посмотреть на вкладку Network то можно увидеть подобную картину:
Большое количество загруженных изображений прямым образом влияет на время загрузки сайта. Сегодня, каждая милисекунда загрузки сайта имеею особое значение в супер конкурентной гонке за посетителя.
Я не буду вдоваться в подробности кэширования изображений, да это полезная штуковина, но как быть при первой загрузке сайта?
Поэтому для оптимизации производительности и уменьшения размера сайтов я настоятельно всем рекомендую оптимизировать изображения.
Это позволит ускорить загрузку сайта и сэкономить значительную часть дискового пространства на серверах для хранения изображений.Оптимизация изображений также играет роль в SEO, поскольку эффективно сжатые изображения способствуют более высокой скорости загрузки страниц и улучшают рейтинг вашего сайта в поисковых системах.
FlashImg - абсолютно бесплатный сервис оптимизации изображений. У нас нет платных подписок и платных функций. Для использования функций сервиса Вам не нужно создавать аккаунт или проходить авторизацию, все доступно без регистрации.
С помощью сервиса можно получить уменьшение размера изображения до 2-х раз без потери качества.
Очень простой и интуитивно понятный интерфейс помогут Вам оптимизировать Ваши изображения. Скорость выполнения оптимизации и легкость использования Вас приятно удивят.
Пример оптимизации
Из примера видно, что для JPG изображения удалось сэкономить 67% от исходного размера.
Что под капотом
Сервис написан на Next.js + Tailwind как основа для UI и Express.js в качестве серверного API. Оптимизация основана на библиотеке sharp.
Храним архив с изображениями у себя на сервере 30 минут, это позволяет поддерживать бесплатность и скорость работы.
Где развернуто приложение
Vercel — это облачная платформа для разработки, развертывания и хостинга веб-приложений и статических сайтов. Vercel особенно популярен среди разработчиков React и Next.js, хотя он также поддерживает другие фреймворки и технологии.
Оказался очень удобным инструментом для развертывания и деплоя веб-приложения. Все что необходимо сделать это залогиниться в сервисе через github и дать доступ к репозиторию с проектом и далее он автоматически будет деплоить проект при обновлении основной ветки в git.
Очень просто, удобно и понятно. Мне хватает бесплатной версии, хотя, существует и платная с детальной аналитикой и расширенными настройками и характеристиками сервера. Серверное API развернул на своем VPS сервере, т.к. там мне необходима дополнительная настройка.
Формат WebP
WebP — это формат изображений который использует продвинутые алгоритмы сжатия, позволяющие сократить размер изображения без потерь в качестве.
С помощью нашего сервиса Вы можете преобразовать изображение любого формата (JPG, PNG, GIF, AVIF) в WebP формат.
WebP был разработан Google и является рекомендуемым для использования на веб-сайтах и приложениях.
В FlashImg есть возможность преобразовать изображение в WebP и получить оптимизированное изображение для сайта.
Ограничения
На данный момент существуют ограничения оптимизации. 100 изображений за один раз, размер файла не более 25 Mb и форматы: jpg, png, gif, avif и webp.
Итого
Буду рад новым пользователям и обратной связи.
Оптимизируйте изображения с помощью FlashImg.
Спасибо
Комментарии (17)
suprunchuk
07.11.2024 15:52не удобно что качает архив. лишние действия для разархивирования и так далее.
добавьте фичу скачивания сразу же готовой фотографии. если у меня одна фотка, зачем мне архив качать.
wmlab
07.11.2024 15:52Так это пережатие с потерей качества или оптимизация? Если оптимизация, то как можно гарантировать уменьшение размера до двух раз, если это, например webp? Такое даже при перекодировании в jxl недостижимо. Что будет, если пропустить то же изображение через сервис десять раз?
Quiensabe
07.11.2024 15:52Прошу прощения за оффтопик. Так случилось, только что сделал для своих целей утилитку для конвертации разных картинок в jpeg. Максимально простую, без настроек, установки, зависимостей (кроме .NET) и пр. На отдельный пост это никак не тянет, но вдруг кому-то пригодится. Понимает tif, bmp, png, webp.
Да, оно весит 160 Mb. И мне все равно)) 
Zara6502
07.11.2024 15:52convert "!.!" "!.!.jpg"в FAR на F2 - в миллиарды раз проще.
Да, оно весит 160 Mb. И мне все равно))
Почему так много? Или сторонние DLL такие? По идее на .NET приложения мелкие получаются если вы не собрали всю .NET в один файл как раз чтобы не было зависимостей.
jonic
07.11.2024 15:52Я конечно все понимаю, но, нельзя было без загрузки на сервер сделать?
AlexMeshock Автор
07.11.2024 15:52А как без загрузки на сервер это сделать?
liquiddeath13
07.11.2024 15:52Имелось ввиду скорее всего без хранения на сервере, видимо переживают за конфиденциальность
jonic
07.11.2024 15:52Например вот так: https://github.com/LI-NA/mozjpeg.js
А архив собирать так: https://stuk.github.io/jszip/
orekh
07.11.2024 15:52Вы несколько раз в статье пишете неправду, когда утверждаете, что сжатие ваш сервис делает «без потери качества». Или не разбираетесь, или приукрашиваете, но в любом случае - вводите в заблуждение. Как минимум конвертация в webp поменяет значения пикселей изображения; а перекодирование JPG, даже если пиксели останутся точно тех же цветов, но поменяются таблицы квантования или квантованные значения, то это всё равно будет деструктивной оптимизацией. Про другие оптимизации у вас не знаю. Различайте.
RigelGL
07.11.2024 15:52Так это ж ти́пикал ма́ркетинг. Автор называет оптимизацию без потери видимого качества "оптимизацией без потери качества". Так что всё верно, чтобы на глаз найти различие в двух картинках, их нужно жать с сильно различающимся качеством (> 0.1..0.2), сравнивать попиксельно и умножать дальту на 2..5..10.
Есть нюанс, avif по тестам обыгрывает jpeg, и по точности у него баллы выше, но на глаз сжатие jpeg как будто приятнее и детальнее (хотя это не так), а avif слишком гладкими делает фотки.
В реальности автор молодец, но в мир саасов, хотелось бы оффлайн решения, чтобы картинки жались в браузере, а не на сервере. С использованием wasm производительность будет достаточной. Да даже на js, если не жать 4к картинки.
Xbolt
07.11.2024 15:52Есть ещё вариант, можно качать и работать локально, править под свои хотелки. Кадрирование: вращение, изменение размера, обрезка. В итоге картинка и превьюшка. Ванильный js (почти)
https://jonhappy.github.io/modal_menu/pic.html
Seasle
07.11.2024 15:52Как идея весьма неплохо, особенно поразбираться с инструментами для обработки изображений.
В статье не увидел ни одного аналога, с которым можно было бы сравнить. А сравнить есть с чем, например со Squoosh, или другими существующими решениями.
Попробовал посжимать изображения с Вашим сервисом и со Squoosh, и опытным путём получилось, что качество при сжатии равно примерно 70%. Для примера брал изображения с Unsplash (очень похожий медведь, фото ночного города, фото острова).
Если сравнивать функционал, то у Вас можно выбрать только факт того, нужен ли WebP, в то время как в сравниваемом мной сервисе можно:
изменить размер;
уменьшить цветовую палитру;
выбрать итоговый формат;
настроить параметры сжатия;
сравнить оба изображения.
Плюсом ко всему, Squoosh можно установить как PWA и пользоваться им в офлайн-режиме.
Минусы также имеются - невозможность обработки больше одного изображения за раз; тяжелые изображения могут и не сжаться - всё происходит на устройстве пользователя, что для меня является более существенным, т.к. всё это исполняется в браузере.
Что касается Вашего проекта, то возможно стоит задуматься об аналогах sharp, дать возможность пользователю настройки параметров сжатия, поправить UX (например: контрастность цветов в D&D-области; сама D&D область не на весь экран; в центральной области поведение отличается в зависимости от того, выбраны ли файлы).
AndreyDmitriev
Спасибо, но есть хотелка. Было б здорово, если бы вы туда что-то типа OptiPNG прикрутили. Мой любимый скриншотер сохраняет скриншоты в некомпрессированный png лошадиного размера, а OptiPNG может попробовать разные комбинации сжатий и автоматом выбрать оптимальное, но это всё происходит без потери качества. А у вас оно пережимается с потерей качества и выглядит потом не очень — нерезко и с артефактами. На фотках этого не видно, а вот на скриншотах - очень даже.
mikenerevarin
https://tinypng.com/ ?
AndreyDmitriev
Да, tinypng идёт по правильному пути, там генеряется палитра и скриншот перегоняется в индексированные цвета. Но в идеале должна быть комбинация с OptiPNG, поскольку если я прогоню файл через tinypng, то потом могу его ещё немного "дожать" через OptiPNG. Не факт, кстати, что палитра всегда будет давать выигрыш, в идеале чтобы получить "минимально возможный" PNG надо попробовать так и этак и все возможные комбинации сжатия и фильтров. Кроме того, если дотошно попиксельно сравнить оригинал и результат tinypng, то они слегка отличаются, вот пример, где это заметно при очень сильном увеличении:
VanyaKokorev
PNG можно перепаковывать в lossless JpegXL, выигрывая порядка половины размера "cjxl.exe picture.png picture.jxl -q 100 -e 9"; для просмотра я использую JpegView, плагин для explorer.exe называется jxl-winthumb; также оно умеет lossless перепаковывать jpeg-и, выигрывая порядка 25%