Сайт готов, быстрый и аккуратный. Через месяц контент-менеджер добавляет новость с пятью фотографиями прямо с телефона — и страница начинает грузиться по десять секунд, а на мобильном интернете не грузится вовсе. Ещё через неделю выясняется, что в одном из снимков сохранились координаты места съёмки, и это было фото, сделанное у кого-то дома.
Изображения — самая тяжёлая и самая неконтролируемая часть контента. Мы встраиваем автоматическую обработку фото в админки, которые делаем, но понимать, что происходит с картинкой, полезно и самому редактору. Ниже — чек-лист, по которому стоит пройтись перед загрузкой.
Размер в пикселях и вес в килобайтах
Современный смартфон снимает в разрешении 4000 пикселей по ширине и больше. Сайту столько не нужно: даже на большом мониторе основная колонка текста редко шире 1200 пикселей, а полноэкранные обложки — около 1920. Всё, что больше, браузер всё равно уменьшит, но сначала скачает целиком.
Ориентиры, которые мы используем:
| Назначение | Ширина | Желаемый вес |
|---|---|---|
| Обложка на всю ширину экрана | до 1920 px | до 300–400 КБ |
| Фото в тексте статьи | 1200–1600 px | до 200 КБ |
| Карточка товара или проекта | 800–1000 px | до 120 КБ |
| Аватар, портрет в блоке команды | 400–600 px | до 60 КБ |
| Логотип партнёра | SVG или до 300 px | до 20 КБ |
Это ориентиры, а не жёсткие правила, но если фото весит мегабайты — с ним точно что-то не так.
В наших админках загрузчик сам уменьшает слишком большие изображения до разумного максимума и отклоняет откровенно огромные файлы. Но лучше, когда редактор не полагается на автоматику полностью: исходник в 40 мегапикселей и 20 мегабайт загружается долго, особенно с мобильного интернета.
Формат: почему WebP
JPEG — классика для фотографий, PNG — для графики с прозрачностью и чёткими границами. Оба формата старые и неэффективные по сегодняшним меркам. WebP поддерживают все актуальные браузеры, и при сопоставимом качестве он обычно заметно легче JPEG, а с прозрачностью — значительно легче PNG.
Ещё более современный формат — AVIF, он сжимает ещё лучше, но кодируется медленнее и поддерживается чуть менее широко. Для большинства сайтов WebP сегодня — разумный компромисс.
Наш загрузчик перекодирует любую загруженную картинку в WebP автоматически. Редактору не нужно думать о формате: можно загрузить JPEG с телефона, PNG из графического редактора или скриншот — на сайт попадёт лёгкий WebP. Если ваша CMS этого не умеет, конвертировать можно заранее любым бесплатным инструментом или онлайн-сервисом.
Отдельный случай — логотипы и иконки. Для них лучший формат — SVG: векторная графика выглядит чётко на любом экране и весит считанные килобайты.
Кадрирование под место на сайте
Карточки на сайте почти всегда имеют фиксированные пропорции: 16:9, 4:3, квадрат. Вёрстка обрежет фото под эти пропорции — и обрежет по центру, если не настроено иначе. На групповом фото команды могут пропасть головы, на фото товара — сам товар.
Что делать:
- узнайте, в какой пропорции фото будет показано, и кадрируйте заранее — главный объект в центре кадра с запасом по краям;
- для портретов команды используйте квадрат или 4:5, лицо — в верхней трети кадра;
- для скриншотов сайтов важен верх: шапка и первый экран, а не середина страницы;
- не размещайте текст на фото у самого края — на узком экране его отрежет.
Когда мы добавляли на свой сайт фото команды, исходник был вертикальным портретом. Мы заранее сделали квадратный кроп с лицом по центру, и фото одинаково хорошо смотрится и в блоке на главной, и на странице «О нас», где сетка другая.
Геометки и метаданные: удаляйте
Каждое фото с телефона несёт внутри метаданные EXIF: модель камеры, дату и время съёмки, настройки экспозиции и — если в телефоне включено определение местоположения — точные GPS-координаты. Большинство соцсетей удаляют эти данные при загрузке. Сайт на самописной CMS или неаккуратно настроенном движке может отдавать файл как есть.
Чем это грозит: фото «нашей команды на корпоративе» выдаёт адрес загородного дома руководителя, фото «склад изнутри» — координаты склада, который вы не хотели раскрывать. Кроме приватности, метаданные просто добавляют вес.
Наш загрузчик срезает EXIF целиком при конвертации. Если ваша система этого не делает:
- отключите сохранение местоположения в настройках камеры телефона, которым снимаете для сайта;
- перед загрузкой удаляйте метаданные — в Windows через свойства файла, на телефоне через приложения для редактирования фото, в графических редакторах — при экспорте;
- проверьте результат любым онлайн-просмотрщиком EXIF.
Alt, имя файла и подпись
Атрибут alt — текстовое описание картинки. Его читают экранные дикторы для незрячих пользователей, его показывает браузер, если изображение не загрузилось, и его учитывают поисковики, в том числе в поиске по картинкам.
Хороший alt описывает, что на изображении, коротко и по делу:
- плохо: «фото», «IMG_2034», «картинка1»;
- плохо: «купить диван недорого Краснодар диван угловой диван-кровать» — это спам ключами;
- хорошо: «Угловой диван серого цвета в интерьере гостиной»;
- для чисто декоративных изображений — пустой alt, чтобы диктор их пропускал.
Имя файла тоже стоит делать осмысленным и латиницей: uglovoj-divan-seryj.webp лучше, чем IMG_20261103_154512.jpg. Некоторые системы, включая наши, генерируют случайное имя автоматически, чтобы файлы не перезаписывали друг друга, — тогда описательную роль берёт на себя alt.
Права на изображения
Картинка из поиска — не бесплатная картинка. Использование чужих фото без лицензии — прямой риск претензии от правообладателя. Безопасные источники: собственные съёмки, фотобанки с понятной лицензией, изображения, на которые у вас есть письменное разрешение. Для фото людей — согласие этих людей на публикацию, особенно если это ваша команда или клиенты.
Как проверить, что с картинками всё в порядке
После публикации не нужно гадать — всё проверяется за пару минут бесплатными инструментами:
- Инструменты разработчика в браузере. Вкладка «Сеть» с фильтром по изображениям покажет вес каждой картинки на странице. Если что-то весит больше мегабайта — это кандидат на пересжатие.
- PageSpeed Insights. Сервис прямо укажет «изображения неоптимального размера» и «используйте современные форматы» и посчитает, сколько можно сэкономить.
- Просмотр на телефоне через мобильный интернет. Самая честная проверка: если обложка проявляется по частям, её нужно уменьшать.
Ещё один приём — ленивая загрузка. Изображения ниже первого экрана получают атрибут loading="lazy" и загружаются только когда посетитель до них долистает. Большинство современных шаблонов делают это автоматически, но для первого экрана ленивую загрузку, наоборот, лучше отключить — главная картинка должна появиться сразу.
Чек-лист перед загрузкой
- Фото ваше или есть лицензия/разрешение.
- Люди на фото согласны на публикацию.
- Кадр подготовлен под пропорцию места на сайте, главный объект не обрежется.
- Ширина не больше нужной для этого места.
- Формат WebP или система конвертирует сама; логотипы — SVG.
- Вес укладывается в ориентир для этого типа изображения.
- Геометки и метаданные удалены.
- Заполнен alt — коротко и по сути.
- После публикации страница открыта с телефона на мобильном интернете.
Итог
Правильно подготовленное фото весит в десятки раз меньше исходника, не выдаёт лишнего о вас и хорошо выглядит в любой карточке. Большую часть работы — уменьшение, конвертацию в WebP, очистку метаданных — можно и нужно доверить админке. Но кадр, alt и права на изображение остаются за человеком.
Хотите, чтобы ваша админка сама приводила фото в порядок, а сайт оставался быстрым? Напишите нам — настроим загрузку изображений под ваш контент. Что ещё мы делаем, смотрите в разделе услуг.
