Проверьте смысл, форму и мелкие дефекты
Начните с общего впечатления: соответствует ли изображение содержанию материала, не вводит ли оно зрителя в заблуждение, понятен ли главный объект? Затем рассмотрите крупнее руки, глаза, пересечения предметов, отражения и надписи. Для предметной иллюстрации особенно важны форма и пропорции, для портрета — естественность деталей.
Отделите ошибки, которые можно исправить локально, от неудачной основы. Мелкий дефект фона не всегда требует повторной генерации. Но если неправильны композиция или ключевой предмет, увеличение разрешения проблему не решит. Сначала выберите убедительный исходник, затем переходите к обработке и экспорту.
Подготовьте кадрирование под несколько экранов
Проверьте широкую и узкую версии макета. Объект, красиво расположенный у края на компьютере, может исчезнуть при мобильном кадрировании. Выберите точку фокуса и убедитесь, что вокруг неё остаётся достаточно пространства. Если один исходник не выдерживает оба формата, подготовьте отдельные осмысленные кропы.
Текст поверх изображения требует спокойной области и достаточной читаемости. Проверяйте не только заголовок, но и мелкую подпись. При необходимости используйте затемнение или светлую подложку в макете. Важные слова удобнее хранить текстом страницы, чтобы они оставались чёткими, доступными и легко редактировались.
Подберите формат и размер без лишнего веса
Для фотографических и сложных растровых изображений на сайте стоит сравнить WebP, AVIF и JPEG на одном кадре. Их результат зависит от содержания и настроек кодирования. PNG может быть уместен там, где требуется сохранение пикселей без потерь. Выбирайте формат по реальному качеству и размеру файла, а не только по названию.
Экспортируйте несколько размеров для разных условий показа. В HTML атрибуты srcset и sizes помогают браузеру выбрать подходящий вариант. Явные width и height резервируют место до загрузки. Отложенная загрузка полезна для изображений ниже первого экрана, а главный видимый кадр обычно требует приоритетной доставки. Эти технические настройки дополняют, но не заменяют визуальную проверку сжатия.
Подпишите изображение и сохраните рабочие материалы
Используйте понятное имя файла, связанное с его содержанием. Alt-текст описывает важную для контекста информацию изображения. Не заполняйте его перечнем поисковых запросов и не повторяйте механически соседний заголовок. Если картинка выполняет только декоративную роль, её описание не должно создавать лишний шум для пользователя вспомогательных технологий.
Храните исходник отдельно от уменьшенных копий. Сохраните параметры генерации, ссылки на ресурсы и сведения об условиях их использования. Для следующей публикации лучше снова экспортировать из качественного оригинала, чем многократно пересжимать уже уменьшенный файл. Перед передачей проекта убедитесь, что имена версий и назначение каждого формата понятны другому человеку.
Контроль перед публикацией
| Этап | Критерий готовности | Частая ошибка |
|---|---|---|
| Макет | Главный объект виден на узком экране | Проверен только широкий вариант |
| Экспорт | Детали выглядят хорошо при рабочем размере | Файл сохранён намного крупнее необходимости |
| Описание | Alt передаёт смысл изображения | Вместо описания вставлены ключевые слова |