Как подготовить фото для сайта: фон, формат, вес

Фотография с телефона весит 4–8 МБ и имеет сторону в 4000 пикселей. На странице она занимает 800 пикселей и грузится три секунды. Между «есть фото» и «фото стоит на сайте» лежат четыре операции, и порядок у них не произвольный: сделать их в неправильной последовательности значит либо потерять качество дважды, либо потратить время впустую.

Порядок действий

Сначала фон, потом размер, потом формат, сжатие последним.

Причина в том, что каждая следующая операция работает с результатом предыдущей. Сжатие подбирает качество под конкретные пиксели: сожмёте картинку 4000 пикселей шириной, а потом уменьшите её до 800 — и вся работа по подбору качества выброшена, потому что пиксели уже другие. То же с форматом: перевести в JPG, а потом убирать фон бессмысленно, JPG не умеет прозрачность и сохранять результат будет некуда.

Убрать фон

Задача встречается чаще всего в двух случаях: товар для карточки в магазине и портрет для страницы «о команде». В обоих нужен объект без окружения, чтобы он лёг на любой фон страницы.

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

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

Уменьшить до нужного размера

Сторона фотографии с телефона — 3000–4000 пикселей. Для контента внутри статьи хватает 1200–1600, для полноэкранной обложки 1920, для карточки товара в списке 600–800. Больше не нужно: браузер всё равно покажет картинку в размере блока, а скачает при этом полный файл.

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

Отдельная история — экраны с удвоенной плотностью пикселей. Там картинку готовят вдвое больше блока, в котором она стоит, и отдают через srcset. Это не повод грузить четырёхтысячный оригинал: для блока 800 пикселей достаточно 1600.

Выбрать формат

Три рабочих формата и по одному предложению на каждый.

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

PNG — для прозрачности, скриншотов интерфейса, текста и графики с чёткими границами. Фотографию в PNG класть не стоит: весить будет в разы больше JPG без видимого выигрыша.

WebP — компромисс: умеет и прозрачность, и сильное сжатие, при равном качестве весит на 25–35% меньше JPG. Поддерживается всеми актуальными браузерами, включая Safari.

Перевести картинку между JPG, PNG и WebP можно без установки программ. Одна оговорка: перевод в формат с потерями и обратно качество не возвращает. JPG → PNG даст файл больше, но не лучше — исходные потери уже записаны в пиксели.

Сжать

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

Ориентир по весу: фотография внутри статьи — до 200–300 КБ, обложка на всю ширину — до 500 КБ, иконка или логотип — десятки килобайт. Это не нормативы, а порядок величины: страница, где пять картинок по 2 МБ, будет грузиться заметно дольше, чем та же страница с пятью по 200 КБ.

При сжатии удобно сравнивать вес и картинку сразу, двигая качество. Для фотографий 75–85% обычно неотличимы от оригинала на глаз, а вес падает в несколько раз. Для скриншотов с текстом порог выше: буквы начинают размываться раньше, чем детали фотографии.

Подобрать цвета страницы под фото

Необязательный шаг, но он заметно меняет результат. Когда фотография стоит рядом с кнопкой или подложкой, легче взять цвет из самой фотографии, чем подбирать на глаз. Достаточно снять цвет пипеткой с фото и получить HEX, RGB и HSL — дальше цвет идёт в стили как есть.

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

Коротко

• Порядок: фон → размер → формат → сжатие. Обратный порядок означает двойную потерю качества или выброшенную работу.
• После удаления фона сохранять только в PNG или WebP: JPG прозрачность не умеет.
• Сторона 1200–1600 пикселей закрывает почти весь контент внутри страниц, четырёхтысячный оригинал не нужен никогда.
• WebP при равном качестве весит на 25–35% меньше JPG и умеет прозрачность.
• Перевод из формата с потерями и обратно качество не восстанавливает.
• Ориентир по весу: 200–300 КБ на картинку в статье, до 500 КБ на обложку.