Почему изображение стоит подготовить заранее
Фотография прямо с камеры или телефона часто больше, чем нужно сайту. Она может весить несколько мегабайт, иметь слишком высокое разрешение и содержать EXIF-данные: модель устройства, дату съёмки и координаты. Такой файл дольше загружается и может раскрывать лишнюю информацию.
Подготовку удобно разделить на три простых шага.
1. Уменьшите размер
Сначала определите, какого размера изображение действительно будет показано на странице. Для обычной иллюстрации часто не нужна ширина в несколько тысяч пикселей. Загрузите файл в инструмент «Изменить размер изображения», укажите нужную ширину и сохраняйте пропорции, чтобы картинка не растянулась.
Не увеличивайте маленькое изображение без необходимости: новых деталей от этого не появится.
2. Сожмите готовый файл
После изменения размера воспользуйтесь инструментом «Сжать изображение». Сжатие уменьшает вес файла и ускоряет загрузку страницы. Проверяйте результат визуально: мелкий текст, границы предметов и плавные градиенты не должны заметно портиться.
Если изображений несколько, применяйте к ним одинаковые настройки — так качество на странице будет выглядеть равномерно.
3. Удалите служебные данные
Перед публичной загрузкой обработайте файл инструментом «Удалить EXIF и метаданные». Это особенно важно для личных фотографий и снимков, сделанных на устройствах с включённой геолокацией.
В результате вы получите изображение подходящего размера, без лишнего веса и необязательных служебных данных. Останется проверить его на странице в desktop- и mobile-версии.
Отталкивайтесь от места, где будет стоять картинка
Универсального размера «для сайта» не существует. Обложка статьи, фотография товара и аватарка занимают на странице разную площадь. Сначала откройте макет или работающую страницу и посмотрите, какой ширины достигает контейнер. Если колонка ограничена 1200 пикселями, загружать фотографию шириной 6000 пикселей обычно бессмысленно. Для экранов с высокой плотностью можно подготовить запас примерно в два раза, но запас в пять раз лишь увеличит файл.
Не забывайте о кадрировании. Панорамный снимок плохо превращается в квадратную карточку: важный объект окажется слишком мелким или будет обрезан. Лучше заранее выбрать композицию под конкретное соотношение сторон, а не пытаться исправить её одним изменением размера.
Выберите формат по содержимому
JPEG подходит фотографиям и сложным изображениям с множеством оттенков. PNG полезен, когда нужна прозрачность, чёткие линии или интерфейсный скриншот, но фотография в PNG может оказаться неоправданно тяжёлой. WebP часто даёт меньший файл при сопоставимом качестве, однако для старой системы публикации стоит сначала проверить поддержку формата.
Сохраняйте исходник отдельно. Если после нескольких циклов продолжать работать с уже сжатым JPEG, артефакты будут накапливаться. Правильнее каждый новый вариант экспортировать из оригинала.
Оцените качество не только по килобайтам
Самый лёгкий файл не всегда лучший. Откройте результат в масштабе, близком к реальному отображению, и посмотрите на лица, текст, тонкие контуры и однотонные области. Квадраты вокруг букв, цветные ореолы на границах и полосы в градиенте означают, что сжатие слишком сильное.
Для серии изображений полезно выбрать один тестовый файл со сложными деталями и подобрать настройки на нём. Затем обработать остальные и выборочно проверить несколько результатов. Это быстрее, чем оценивать каждую картинку с нуля, и надёжнее, чем без просмотра применить максимальное сжатие ко всей папке.
Проверьте результат в реальных условиях
После загрузки откройте страницу не только на большом мониторе. На телефоне может обнаружиться, что ключевой объект попал под обрезку, подпись стала нечитаемой, а мобильная сеть слишком долго загружает галерею. Если сайт формирует несколько адаптивных размеров автоматически, убедитесь, что браузер действительно получает подходящий вариант, а не уменьшает огромный оригинал средствами CSS.
Перед публикацией проверьте:
- пропорции не искажены;
- главный объект не обрезан на основных экранах;
- мелкие детали выглядят приемлемо;
- имя файла понятно и не содержит персональных данных;
- метаданные удалены, если они не нужны;
- оригинал сохранён отдельно от веб-версии.
Такая подготовка занимает несколько минут, зато уменьшает трафик, ускоряет страницу и избавляет от повторной обработки после публикации.