Оптимизация изображений для сайтов: инструменты и подход Denkon

Почему я решил автоматизировать оптимизацию изображений

При разработке и вёрстке сайтов приходится постоянно работать с графикой: фотографиями, баннерами, превью, изображениями товаров, фоновыми элементами и иллюстрациями.

Причём исходные файлы редко бывают полностью готовы для публикации.

Например, заказчик передаёт фотографии шириной 4000 пикселей, хотя на сайте они будут отображаться в блоках шириной 800 пикселей. Или дизайнер предоставляет изображения в PNG, хотя для конкретной фотографии более подходящим вариантом может оказаться WebP или AVIF.

Если таких файлов несколько, обработать их вручную несложно.

Но когда изображений десятки или сотни, ситуация меняется.

Нужно уменьшить размеры, сохранить пропорции, подобрать качество, создать современные форматы, правильно назвать результаты и разместить их в проекте.

Для этого можно использовать графические редакторы или онлайн-сервисы. Однако постоянное переключение между инструментами отнимает время.

Именно поэтому я разработал Denkon Local Image Optimization — локальный инструмент пакетной обработки изображений, предназначенный прежде всего для удобства frontend-разработки.

Идея простая: вместо повторяющихся ручных действий организовать понятный процесс подготовки графики непосредственно в рабочем окружении разработчика.

При этом автоматизация решает не только вопрос удобства. Она помогает сделать оптимизацию изображений регулярной частью разработки сайта, а не задачей, о которой вспоминают после публикации проекта.

Почему изображения влияют на производительность сайта

Когда пользователь открывает страницу, браузер загружает HTML, CSS, JavaScript, шрифты, изображения и другие ресурсы.

Каждый файл требует передачи данных по сети.

Если на странице используются десятки фотографий большого размера, общий объём загрузки может значительно увеличиться.

Особенно заметно это на мобильных устройствах и при нестабильном интернет-соединении.

Представим страницу каталога с 20 изображениями.

Если каждое весит 1 МБ, суммарный объём графики составит около 20 МБ.

Если подготовить изображения так, чтобы каждое занимало в среднем 150 КБ, общий объём уменьшится примерно до 3 МБ.

Это условный пример, но он хорошо показывает, почему оптимизация графики важна.

При этом уменьшение веса изображений не означает автоматического ускорения сайта на определённый процент. Итог зависит от порядка загрузки ресурсов, кеширования, соединения и того, какие изображения действительно необходимы пользователю.

Как изображения влияют на Core Web Vitals

Google использует показатели Core Web Vitals для оценки отдельных аспектов пользовательского опыта.

Для изображений особенно важны два из них.

LCP (Largest Contentful Paint) — время отображения основного содержимого страницы. Если самым крупным видимым элементом является баннер или фотография, скорость его загрузки может существенно влиять на LCP.

CLS (Cumulative Layout Shift) — визуальная стабильность страницы. Если браузер заранее не знает размеры изображения, после его загрузки содержимое может сместиться.

Третий показатель, INP (Interaction to Next Paint), оценивает отзывчивость интерфейса. Он не связан напрямую с размером изображений, хотя тяжёлая обработка ресурсов и работа JavaScript могут влиять на общую отзывчивость страницы.

Поэтому подготовка изображений — важная часть оптимизации, но не единственный фактор производительности.

Современные форматы изображений: JPEG, PNG, WebP и AVIF

Выбор формата изображения влияет на размер файла, качество и возможности его использования.

Универсального формата для всех задач не существует.

Почему WebP стал популярным

WebP разрабатывался как формат, позволяющий эффективнее хранить изображения для интернета.

Во многих случаях он обеспечивает меньший размер файла по сравнению с JPEG или PNG при сопоставимом визуальном качестве.

Но это не универсальное правило.

Например, для некоторых простых графических изображений PNG может оставаться вполне подходящим решением.

Чем интересен AVIF

AVIF — более современный формат, который часто обеспечивает высокую эффективность сжатия.

При сопоставимом визуальном качестве он может создавать файлы меньшего размера, чем WebP.

Однако многое зависит от содержимого изображения, параметров кодирования и требований к качеству.

Кроме того, обработка AVIF может требовать больше вычислительных ресурсов.

Нужно ли полностью отказываться от JPEG и PNG

Нет.

Я не считаю, что современные форматы должны автоматически заменить все исходные изображения.

Гораздо практичнее иметь возможность выбирать подходящий формат для конкретной задачи.

Например, использовать AVIF или WebP для фотографий, а PNG сохранять там, где он действительно необходим.

Именно поэтому в своём инструменте я предусмотрел создание нескольких вариантов изображения.

Почему оптимизацию лучше выполнять ещё на этапе вёрстки

Распространённый сценарий разработки выглядит следующим образом.

Сначала создаётся дизайн, затем выполняется вёрстка, изображения подключаются в исходном виде, а оптимизация откладывается до завершения проекта.

В результате сайт уже готов, но при тестировании выясняется, что отдельные страницы загружают слишком много графики.

Приходится возвращаться к изображениям, менять размеры, создавать новые файлы и корректировать шаблоны.

Я предпочитаю другой подход.

Изображение должно попадать в проект уже подготовленным для своего назначения.

Например, если в карточке товара предусмотрено изображение шириной около 400 пикселей, нет необходимости загружать в браузер оригинал шириной 4000 пикселей.

При этом для экранов с высокой плотностью пикселей могут понадобиться варианты большего разрешения.

Поэтому задача разработчика — не просто максимально уменьшить изображение, а подготовить подходящие размеры для разных условий отображения.

Как выглядит правильный рабочий процесс

1. Получить исходные изображения от дизайнера или заказчика.

2. Определить, где они будут использоваться.

3. Подготовить необходимые размеры.

4. Создать подходящие форматы.

5. Проверить визуальное качество.

6. Подключить изображения в шаблонах.

7. Проверить загрузку страницы в браузере.

Так оптимизация становится частью обычной frontend-разработки.

Denkon Local Image Optimization — для чего я создал этот инструмент

Denkon Local Image Optimization — локальное приложение для пакетной оптимизации изображений на Node.js с использованием библиотеки Sharp.

Проект ориентирован прежде всего на Windows и позволяет работать через интерфейс, открываемый в браузере.

Главная особенность — обработка выполняется непосредственно на компьютере пользователя.

Изображения не нужно загружать во внешние онлайн-сервисы.

Это удобно при работе с клиентскими материалами, большими каталогами и проектами, где требуется регулярно обрабатывать значительное количество файлов.

Что умеет Denkon Local Image Optimization

Инструмент поддерживает:

• выбор папки через стандартный диалог Windows или ручной ввод пути;

• рекурсивную обработку вложенных каталогов;

• создание WebP и AVIF для оригинального размера изображения;

• создание уменьшенных версий в исходном формате, WebP и AVIF;

• настройку качества JPEG, WebP и AVIF;

• настройку уровня сжатия PNG;

• изменение размеров по ширине, высоте или двум параметрам;

• сохранение пропорций при изменении только одной стороны;

• отображение прогресса обработки;

• журнал выполнения операций;

• пропуск уже созданных файлов;

• защиту существующих результатов от случайной перезаписи.

Эти возможности закрывают значительную часть повторяющихся задач, возникающих при подготовке изображений для вёрстки.

Пакетная обработка и работа с папками

Одна из функций, которую я считаю особенно полезной, — рекурсивная обработка каталогов.

Представим, что в проекте изображения организованы следующим образом:

src/
└── images/
    ├── banners/
    ├── products/
    │   ├── category-a/
    │   └── category-b/
    └── portfolio/

Вместо того чтобы открывать каждую папку отдельно, можно выбрать основной каталог и запустить обработку вложенных папок.

Это особенно удобно при работе с интернет-магазинами, каталогами и крупными многостраничными проектами.

Почему важна защита от повторной обработки

При повторном запуске инструмент может пропускать уже созданные результаты.

Также он не перезаписывает существующие файлы, если пользователь явно не разрешил это действие.

Такой подход снижает риск случайной потери подготовленных изображений и позволяет продолжать работу с проектом.

Создание адаптивных размеров изображений

Современный сайт должен корректно работать на разных устройствах.

Но адаптивность касается не только расположения блоков.

Изображения тоже желательно подготавливать под реальные размеры отображения.

Например, один и тот же баннер может использоваться в нескольких вариантах:

• крупный вариант для широкого экрана;

• средний вариант для планшета;

• уменьшенный вариант для мобильного устройства.

В Denkon Local Image Optimization можно создавать уменьшенные изображения, указывая ширину, высоту или обе стороны.

Изменение размера только по ширине

Если указать ширину 800 пикселей, оставив высоту пустой, Sharp использует изменение размера с сохранением пропорций.

Например, изображение 1600 × 1200 пикселей после уменьшения по ширине до 800 пикселей получит размер 800 × 600.

Это помогает избежать случайного искажения изображения.

Имена файлов

Инструмент формирует понятные названия результатов.

Например, для исходного файла:

hero.png

Могут быть созданы:

hero.webp
hero.avif

hero-800-600.png
hero-800-600.webp
hero-800-600.avif

hero-w800.png
hero-w800.webp
hero-w800.avif

Суффикс -w800 обозначает ограничение по ширине, а -h600 — по высоте.

Такая система именования помогает быстро определить назначение файла.

Кроме того, файлы с подобными суффиксами не обрабатываются повторно как исходные изображения.

Как использовать подготовленные изображения во frontend-разработке

После создания изображений важно правильно подключить их на сайте.

Одна из возможностей HTML — элемент picture.

Он позволяет браузеру выбирать подходящий формат из нескольких вариантов.

Например:

<picture>
    <source
        srcset="hero.avif"
        type="image/avif"
    >

    <source
        srcset="hero.webp"
        type="image/webp"
    >

    <img
        src="hero.png"
        alt="Описание изображения"
        width="1600"
        height="900"
    >
</picture>

Браузер может использовать AVIF, если поддерживает этот формат.

Если AVIF недоступен, он может выбрать WebP.

А если ни один из этих вариантов не поддерживается, используется изображение из img.

Адаптивные размеры через srcset

Для разных размеров экрана можно использовать srcset и sizes.

Например:

<img
    src="hero-w800.webp"
    srcset="
        hero-w800.webp 800w,
        hero.webp 1600w
    "
    sizes="
        (max-width: 800px) 100vw,
        800px
    "
    alt="Описание изображения"
    width="1600"
    height="900"
>

В этом примере предполагается, что hero.webp имеет ширину 1600 пикселей, а hero-w800.webp — 800 пикселей.

Браузер выбирает подходящий файл с учётом ширины отображения и плотности пикселей экрана.

Таким образом, подготовка нескольких размеров помогает избежать загрузки чрезмерно больших файлов.

Важно: приведённые HTML-примеры демонстрируют использование подготовленных изображений на сайте. Они не означают, что Denkon Local Image Optimization автоматически генерирует HTML-разметку.

Как запустить Denkon Local Image Optimization

Для работы необходимы Node.js версии 18 или новее и Windows.

После получения исходного кода проекта нужно установить зависимости:

npm install

Затем запустить локальный интерфейс:

npm run ui

После запуска интерфейс доступен в браузере по адресу:

http://localhost:3000

Для консольного запуска с настройками по умолчанию предусмотрена команда:

npm start

Где находятся исходные изображения

По умолчанию инструмент использует каталог:

src/images

Эта папка исключена из Git.

Поэтому изображения, размещённые в ней, и результаты обработки не будут случайно добавлены в репозиторий при обычной работе с Git.

При необходимости можно выбрать другой каталог.

Репозиторий проекта

Исходный код и описание возможностей доступны на GitVerse:

https://gitverse.ru/Denkon/denkon-local-image-optimization

Почему я выбрал Node.js и Sharp

Для реализации инструмента я использовал Node.js и Sharp.

Node.js позволяет создать локальное приложение на JavaScript, а Sharp предоставляет возможности обработки изображений.

Sharp поддерживает изменение размеров, преобразование форматов и настройку параметров кодирования.

Это позволяет автоматизировать операции, которые при ручной работе потребовали бы многократного открытия и сохранения файлов.

Почему локальный инструмент удобнее онлайн-сервиса

Онлайн-сервисы могут быть полезны для разовых задач.

Но при постоянной frontend-разработке локальная обработка имеет несколько преимуществ.

Не нужно загружать изображения на сторонний сервер. Файлы обрабатываются на компьютере разработчика.

Удобнее работать с большим количеством файлов. Можно выбрать каталог и запустить пакетную обработку.

Можно сохранить структуру рабочего процесса. Подготовка графики становится регулярной операцией при разработке проекта.

Есть контроль над результатами. Пользователь выбирает параметры качества, размеры и режим перезаписи.

При этом локальная обработка не означает, что инструмент автоматически обеспечивает идеальное качество или минимально возможный размер каждого изображения.

Параметры всё равно необходимо подбирать с учётом задачи.

Оптимизация — это не только уменьшение размера файла

Иногда под оптимизацией понимают исключительно сжатие.

Но в реальной frontend-разработке этого недостаточно.

Например, можно уменьшить фотографию с 2 МБ до 300 КБ.

Это хороший результат.

Однако если изображение предназначено для маленькой карточки размером 200 × 200 пикселей, даже файл 300 КБ может оказаться избыточным.

Поэтому важно учитывать несколько факторов.

1. Фактические размеры

Изображение должно соответствовать месту, где оно используется, с учётом экранов высокой плотности.

2. Формат

Для фотографий могут подходить JPEG, WebP или AVIF.

Для графики с прозрачностью — PNG, WebP или AVIF в зависимости от требований.

3. Степень сжатия

Слишком сильное сжатие может привести к заметной потере качества.

Поэтому необходимо искать разумный баланс.

4. Правильное подключение

Даже оптимизированный файл можно использовать неправильно.

Например, загружать изображения ниже первого экрана без необходимости или, наоборот, назначить loading="lazy" основному баннеру.

5. Кеширование

Если изображения правильно кешируются браузером и сервером, повторные посещения могут требовать меньше сетевых запросов.

6. Визуальная стабильность

Указание ширины и высоты изображения помогает браузеру заранее выделить место под него и уменьшает риск смещения содержимого.

Настоящая оптимизация изображений — это сочетание правильного формата, подходящих размеров, разумного сжатия и корректного использования в интерфейсе.

Кому пригодится Denkon Local Image Optimization

Я разрабатывал инструмент прежде всего под собственные задачи frontend-разработки.

Но подобный подход может быть полезен и другим специалистам.

Frontend-разработчикам и верстальщикам

Для подготовки изображений из макетов, создания адаптивных размеров и современных форматов.

Разработчикам WordPress

Для предварительной подготовки графики темы, баннеров, фоновых изображений и других статических ресурсов.

При этом WordPress уже имеет собственные механизмы создания размеров и адаптивной загрузки изображений. Локальный инструмент не заменяет их, а может использоваться на этапе подготовки ресурсов.

Веб-студиям

Для организации повторяемого процесса обработки изображений при работе над несколькими проектами.

Разработчикам интернет-магазинов

Для подготовки каталогов, фотографий товаров и других изображений, особенно если исходные файлы поступают большими партиями.

Что даёт оптимизация изображений в итоге

Правильно подготовленные изображения помогают уменьшить объём передаваемых данных, снизить ненужную сетевую нагрузку и улучшить скорость отображения содержимого страницы.

Для пользователей это означает более комфортную работу с сайтом.

Для разработчика — более предсказуемое поведение интерфейса и возможность контролировать качество ресурсов.

Для владельца бизнеса — более качественную техническую основу сайта.

Однако не стоит обещать, что переход на WebP или AVIF автоматически увеличит продажи или обеспечит высокие позиции в поисковой выдаче.

Производительность — только один из факторов пользовательского опыта.

На итоговый результат также влияют удобство интерфейса, содержание, качество предложения и множество других условий.

Мой подход: оптимизация должна быть частью разработки

Я считаю, что производительность сайта необходимо учитывать с самого начала работы над проектом.

Не после завершения вёрстки.

Не после публикации.

И не только тогда, когда сервис проверки скорости показывает неудовлетворительные результаты.

Это касается архитектуры шаблонов, JavaScript, CSS, запросов к базе данных и, конечно, изображений.

Denkon Local Image Optimization появился именно из такого подхода.

Мне нужен был инструмент, который позволяет быстро и последовательно подготавливать изображения, не тратя время на однотипные операции.

Вместо того чтобы каждый раз вручную создавать несколько размеров и форматов, я решил автоматизировать этот процесс.

При этом инструмент не претендует на замену всех существующих средств оптимизации изображений.

Его задача гораздо практичнее: сделать подготовку графики удобной и повторяемой частью frontend-разработки.

Заключение

Современный сайт — это не только дизайн и функциональность.

Это ещё и скорость загрузки, корректная работа на разных устройствах и рациональное использование ресурсов.

Изображения играют в этом важную роль.

Использование WebP и AVIF, подготовка адаптивных размеров и правильное подключение графики помогают уменьшить избыточную нагрузку и улучшить пользовательский опыт.

Но для разработчика не менее важно, насколько удобно организован сам процесс подготовки файлов.

Именно эту задачу я решал при создании Denkon Local Image Optimization.

Главная идея проекта — не просто уменьшать изображения, а сделать их оптимизацию естественным этапом профессиональной разработки сайта.

Исходный код проекта доступен в открытом репозитории GitVerse:

Denkon Local Image Optimization:
https://gitverse.ru/Denkon/denkon-local-image-optimization