Как уменьшить вес изображений сайта и сохранить качество

Сначала посмотри, где живёт изображение

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

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

Замерь, что загружается сейчас. В инструментах браузера можно увидеть адрес файла, переданный объём и размер изображения. Сверь это с тем, сколько места оно занимает на странице. Если на телефоне карточка шириной несколько сотен пикселей запрашивает исходник в несколько тысяч, появляется конкретная задача. Не нужно сразу пересохранять весь каталог. Начни с одного шаблона и нескольких показательных файлов.

Подготовь размеры для разных мест

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

В HTML можно предложить браузеру набор источников через srcset и sizes. Для смены кадрирования или форматов подходит picture. Описание размеров должно соответствовать реальному макету. Если изображение занимает половину экрана, а в sizes указан весь экран, браузер может выбрать лишне большой файл. Проверять нужно фактический сетевой запрос, а не только наличие атрибутов в коде.

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

Как выбрать формат и степень сжатия

Для фотографий можно сравнить подходящие варианты JPEG, WebP и AVIF с учётом поддержки и системы, которая готовит файлы. Не выбирай формат только по одному проценту экономии. Посмотри на тёмные градиенты, мелкую фактуру, надписи и оттенки. У одной фотографии снижение качества почти незаметно, у другой появляются пятна или размываются края. Сравнивай одинаковый размер и реальный экран, где изображение будет жить.

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

Сохраняй исходник. Повторное пересжатие уже сжатого изображения может ухудшить качество. Если команда добавляет товары регулярно, опиши процесс подготовки: исходный файл, размеры, варианты, именование и проверка. Такой процесс можно встроить в загрузку сайта или выполнить до публикации. В обоих случаях редактору нужно понимать, какие изображения появятся на странице.

Что загружать первым

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

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

Для статей подход похожий. Обложка нужна в начале, иллюстрации дальше можно загружать по мере чтения. В журнале ZEVY схемы и обложки хранятся локально как векторные файлы. Это подходит для типографики, стрелок и подписей, которым важно оставаться чёткими. Фотографии стоит готовить по своим правилам. Форма иллюстрации должна соответствовать тому, что она объясняет.

Пример проверки на одном шаблоне

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

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

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

Как передать задачу разработчику

Приложи адреса страниц, скриншоты места в макете, несколько исходных файлов и наблюдение, которое хочешь улучшить. Например, «на карточке товара главное фото загружается в размере для увеличения». Для ZEVY этого достаточно, чтобы начать оценку доработки и выбрать проверяемый шаг. Если каталог регулярно пополняется, включи в задачу процесс подготовки новых изображений. Так улучшение будет работать и после того, как команда загрузит следующую коллекцию.

Где зафиксировать правила для редакции

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

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