Подготовка изображений начинается со списка задач страницы. Фотография оборудования помогает рассмотреть конструкцию, снимок выполненной работы подтверждает конкретный результат, схема объясняет процесс. Если назначение не определено, большая папка картинок не делает контент готовым к разработке.
Для корпоративного сайта составьте реестр изображений вместе с картой страниц. Отметьте, что уже есть, что нужно снять или нарисовать и кто подтверждает содержание. В документах подготовки укажите роли, отвечающие за материалы и согласование.
Схема показывает порядок работы. Проверка на странице возвращает материал на нужный этап, если назначение, согласование или подготовка требуют уточнения.
Выберите сюжеты по задаче
Для каждой страницы ответьте: что посетитель должен понять благодаря изображению? На странице услуги это может быть этап работы или передаваемый результат. В каталоге — внешний вид, узел или комплектация. В кейсе — конкретное решение, о котором говорится рядом.
Не представляйте стоковый снимок, визуализацию или сгенерированную иллюстрацию как фотографию вашего производства, команды или выполненного проекта. Если материал условный, обозначьте это там, где иначе возникнет неверное впечатление. Для кейсов сначала подготовьте подтверждённые факты и разрешённые материалы.
Съёмочное задание должно указывать объект, нужные детали и место использования. Общий вид и крупный план решают разные задачи. Согласуйте, какие сведения на экранах, документах и маркировке можно показывать, прежде чем они попадут в кадр.
Зафиксируйте источник и условия использования
Запишите автора или источник, владельца материала, основание использования, ограничения и место подтверждающего документа. Наличие файла в общей папке не отвечает на вопросы о публикации, изменении и использовании в других каналах.
Для приобретённых материалов проверьте условия конкретной лицензии и требования к указанию автора. Для клиентского проекта уточните разрешённые изображения и редакцию публикации. Если условия неизвестны, оставьте статус «Не согласовано» и назначьте следующий шаг; не заменяйте его предположением «Наверное, можно».
Храните подтверждения в рабочем пространстве, а в открытом реестре — только безопасную ссылку или статус. Эта карточка собирает сведения для согласования, но не устанавливает права сама по себе.
Передайте качественный исходник и требования к размерам
Сохраняйте исходный файл отдельно от подготовленных вариантов. Пересылка только уменьшенной копии из мессенджера может лишить разработчика деталей для крупного блока. Уточните фактические размеры в пикселях, ориентацию и допустимую область обрезки.
Размер для сайта зависит от блока, макета и экранов. Не назначайте одно разрешение для всех изображений и не растягивайте маленькую картинку в надежде получить детали. Зафиксируйте максимальное отображение и набор вариантов вместе с разработчиком; затем проверяйте загруженный вариант в браузере.
В учебном примере карточке нужен квадратный кадр, а вводному блоку — широкий. Один исходник подойдёт обоим только тогда, когда важный объект сохраняется при обеих обрезках. Если нет, подготовьте другой снимок или отдельную композицию.
Согласуйте формат и сжатие
Выбирайте формат по содержанию и возможностям публикации: фотография, схема, логотип и изображение с прозрачностью имеют разные требования. Для растровых изображений можно сравнить WebP, AVIF и другие подходящие варианты по качеству, размеру файла и поддержке нужного процесса. Один формат не гарантирует лучший результат для любого материала. Обзор AVIF на web.dev.
Сравнивайте результат при реальном размере показа: мелкие надписи, тонкие линии и края объектов не должны становиться нечитаемыми. Для схем и логотипов сохраняйте исходный вектор, если он доступен. Не превращайте текст страницы в картинку только ради внешнего вида.
Укажите в паспорте размер подготовленного файла и параметры экспорта, если они важны для повторения. Не обещайте одинаковый процент экономии для всех фотографий. Проверка скорости страницы включает и другие ресурсы, а не только расширение изображения.
Проверьте кадрирование в макете
Назначьте смысловой центр и область, которую нельзя обрезать. Проверьте широкую и узкую версии блока: объект не должен исчезать под текстом, уходить за край или менять смысл из-за обрезки.
Если текст размещается поверх изображения, проверьте читаемость на всех подготовленных вариантах. Не рассчитывайте, что один удачный снимок обеспечивает её для следующих публикаций. Для редактора нужны понятные правила замены и предпросмотр.
Напишите alt по роли изображения
Для информативной картинки текстовая альтернатива передаёт важный смысл в контексте страницы. Для изображения-ссылки или кнопки нужно объяснить действие, если без картинки оно непонятно. Для чисто декоративного изображения обычно используют пустой alt; это отличается от отсутствующего атрибута. Сложную схему стоит объяснить также обычным текстом рядом. Дерево выбора alt от W3C.
Не набивайте alt перечнем поисковых запросов. Учебный вариант для фотографии узла: «Панель управления с кнопкой аварийной остановки», если именно эта особенность объясняется на странице. Для декоративного фона такое описание может быть лишним. Решение зависит от назначения, а не только от содержимого файла.
Паспорт изображения
Заполните одну карточку для каждого назначения. Таблица — шаблон, не реестр фактических материалов CoreWeb.
| Поле | Что записать |
|---|---|
| Страница и блок | Где используется и какую задачу решает |
| Исходник и версия | Ссылка на рабочий файл, дата и размеры в пикселях |
| Источник и согласование | Автор/источник, основание, ограничения, статус и роль согласующего |
| Варианты | Формат, размеры, размер файла и назначение каждого экспорта |
| Кадрирование | Смысловой центр, запрещённая обрезка, отдельный мобильный вариант при необходимости |
| Подпись и alt | Текст, роль изображения и основание пустого alt, если применимо |
| Проверка | Страница, устройство, дата, результат и требуемое исправление |
Передавайте материал после проверки страницы
Сначала подготовьте небольшой набор разных изображений и проверьте весь путь: исходник → экспорт → загрузка → отображение. Затем применяйте согласованные правила к остальным материалам. Это помогает обнаружить непригодную обрезку или ограничения CMS до массового наполнения.
Готовность означает, что разрешённая версия правильно связана со страницей, читается на нужных экранах и сохраняет смысл. Отметка «Файл загружен» не заменяет эту проверку. Включите паспорта в общий реестр подготовки контента, чтобы у каждого пробела были ответственная роль и следующий шаг.
Для подготовки собственного набора пройдите практикум по медиа: соберите исходники, заполните реестр и отметьте пробелы до передачи.