Как я создавал бесплатный сервис оптимизации изображений FlashImg.ru

Всем привет. В этом материале я расскажу как создавал бесплатный сервис оптимизации изображений 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.

Спасибо