Как я создавал бесплатный сервис оптимизации изображений FlashImg.ru
FlashImg — оптимизатор изображений
Всем привет. В этом материале я расскажу как создавал бесплатный сервис оптимизации изображений FlashImg.ru
Зачем оптимизировать изображения
Сегодня любой сайт содержит огромное количество изображений. Целевая аудитория сервиса — вебмастера.
Размер сайта определяется количеством медиа-контента (изображения, видео, аудио).
Первое место в этом списке занимают изображения. Если открыть панель инструментов веб-мастера в браузере и посмотреть на вкладку Network то можно увидеть подобную картину:
Список файлов в панели вебмастера одного из крупных сайтов
Большое количество загруженных изображений прямым образом влияет на время загрузки сайта. Сегодня, каждая милисекунда загрузки сайта имеею особое значение в супер конкурентной гонке за посетителя.
Я не буду вдоваться в подробности кэширования изображений, да это полезная штуковина, но как быть при первой загрузке сайта?
Поэтому для оптимизации производительности и уменьшения размера сайтов я настоятельно всем рекомендую оптимизировать изображения.
Это позволит ускорить загрузку сайта и сэкономить значительную часть дискового пространства на серверах для хранения изображений.Оптимизация изображений также играет роль в SEO, поскольку эффективно сжатые изображения способствуют более высокой скорости загрузки страниц и улучшают рейтинг вашего сайта в поисковых системах.
FlashImg — абсолютно бесплатный сервис оптимизации изображений. У нас нет платных подписок и платных функций. Для использования функций сервиса Вам не нужно создавать аккаунт или проходить авторизацию, все доступно без регистрации.
С помощью сервиса можно получить уменьшение размера изображения до 2-х раз без потери качества.
Очень простой и интуитивно понятный интерфейс помогут Вам оптимизировать Ваши изображения. Скорость выполнения оптимизации и легкость использования Вас приятно удивят.
Интерфейс FlashImg
Пример оптимизации
Пример оптимизации
Из примера видно, что для JPG изображения удалось сэкономить 67% от исходного размера.
Что под капотом
Сервис написан на Next.js + Tailwind как основа для UI и Express.js в качестве серверного API. Оптимизация основана на библиотеке sharp.
Храним архив с изображениями у себя на сервере 30 минут, это позволяет поддерживать бесплатность и скорость работы.
Где развернуто приложение
Vercel — это облачная платформа для разработки, развертывания и хостинга веб-приложений и статических сайтов. Vercel особенно популярен среди разработчиков React и Next.js, хотя он также поддерживает другие фреймворки и технологии.
Оказался очень удобным инструментом для развертывания и деплоя веб-приложения. Все что необходимо сделать это залогиниться в сервисе через github и дать доступ к репозиторию с проектом и далее он автоматически будет деплоить проект при обновлении основной ветки в git.
Очень просто, удобно и понятно. Мне хватает бесплатной версии, хотя, существует и платная с детальной аналитикой и расширенными настройками и характеристиками сервера. Серверное API развернул на своем VPS сервере, т.к. там мне необходима дополнительная настройка.
Список деплоев в Vercel
Формат WebP
Формат WebP
WebP — это формат изображений который использует продвинутые алгоритмы сжатия, позволяющие сократить размер изображения без потерь в качестве.
С помощью нашего сервиса Вы можете преобразовать изображение любого формата (JPG, PNG, GIF, AVIF) в WebP формат.
WebP был разработан Google и является рекомендуемым для использования на веб-сайтах и приложениях.
В FlashImg есть возможность преобразовать изображение в WebP и получить оптимизированное изображение для сайта.
Ограничения
На данный момент существуют ограничения оптимизации. 100 изображений за один раз, размер файла не более 25 Mb и форматы: jpg, png, gif, avif и webp.
Итого
Буду рад новым пользователям и обратной связи.
Оптимизируйте изображения с помощью FlashImg.
Спасибо
