Как выбирать размер и размещать фотографии в статье с текстом и изображениями
Чтобы статья легко читалась, подбирайте размер каждой фотографии в соответствии с её задачей: отведите изображению с ключевыми деталями или контекстом достаточно места, а иллюстрации вспомогательного характера сделайте меньше, если окружающий текст уже объясняет суть. Размещайте фотографию рядом с фрагментом, который она поясняет, сохраняйте понятный порядок чтения и проверяйте макет на узких экранах. Это руководство посвящено компоновке фотографий в цифровой статье; те же ориентированные на цель принципы применимы и к печатной вёрстке, однако поведение контента на экранах требует отдельной проверки.
Начните с задачи фотографии
Прежде чем перемещать или масштабировать фотографию, решите, что читатель должен из неё почерпнуть. Является ли она свидетельством, требующим изучения, примером, помогающим визуализировать мысль, или просто декоративным элементом? Такое разделение гораздо полезнее, чем следование заранее заданной ширине изображения.
Если фотография содержит информацию, отсутствующую в тексте, выделите ей достаточно места, чтобы важные детали оставались разборчивыми. Небольшое изображение документа, объекта или процесса не справится со своей основной задачей, если читатель не сможет его рассмотреть. Если же снимок просто иллюстрирует мысль, уже изложенную в тексте, может хватить и меньшего размера — или изображение может вовсе не понадобиться. Это практическое правило дизайна, вытекающее из назначения фотографии, а не универсальный стандарт размеров. Руководство GOV.UK Design System по изображениям также отмечает, что иллюстрации должны отвечать реальным потребностям пользователей и служить визуальной подсказкой, в то время как обязательная информация должна оставаться доступной в текстовом виде. Их рекомендации составлены для государственных онлайн-сервисов, поэтому воспринимайте их скорее как полезный ориентир, а не как свод правил для любого типа статей.
Удобный вспомогательный прием — назначить каждой фотографии одну из трех ролей: изучение, иллюстрация или оформление. Роль «изучение» обычно требует более крупного отображения, а также пояснения или подписи, привлекающей внимание к нужным деталям. «Иллюстрация» часто может иметь умеренный размер и располагаться рядом с абзацем, который она дополняет. У «оформления» нет информационной задачи; подумайте о том, чтобы убрать такое изображение или сделать его визуально нейтральным. Эти категории служат практическим инструментом редактирования, а не терминами, предписанными источниками.
Выбирайте размер исходя из важности и свободного места
Используйте текстовую колонку статьи в качестве исходной границы. Фотография во всю ширину колонки сразу привлекает внимание и дает больше места деталям; приберегите такое оформление для изображений, чья значимость оправдывает визуальную паузу. Фотография меньшего размера, выровненная по колонке, может поддержать расположенную рядом мысль, не конкурируя с заголовком или текстом. Не выбирайте размер только потому, что исходный файл имеет высокое разрешение: отображаемые параметры должны соответствовать макету и информации, которую читателям необходимо увидеть.
Вот пример логики выбора, а не готовый шаблон: допустим, колонка контента шириной 700 пикселей содержит фотографию, показывающую объект из двух частей, различие между которыми имеет ключевое значение для статьи. Отображение почти во всю ширину колонки облегчит сопоставление деталей. Если та же фотография служит лишь общим фоном, а объяснение дано в абзаце, более узкое отображение поможет сохранить акцент на тексте. Ширина в 700 пикселей приведена исключительно в качестве примера и не является рекомендованным стандартом.
Когда на широком экране фотография располагается рядом с текстом, воспринимайте их как единый блок. Выделите изображению достаточную ширину, чтобы показать объект, а тексту — достаточно места для комфортного чтения. Если какому-то из элементов становится тесно, расположите их друг под другом, а не уменьшайте фотографию, сжимая текст в узкую полоску. На небольших экранах последовательность в одну колонку зачастую оказывается самым наглядным решением: текст, затем связанная с ним фотография, а затем следующий фрагмент. Пояснение W3C к критерию WCAG 2.2 Reflow описывает, как страницы статей могут адаптироваться к одной колонке, и разъясняет цель предотвращения прокрутки в двух направлениях при обычном чтении. Там также отмечены исключения для контента, чье значение или использование требует двумерной разметки. Главное для макета статьи — сделать так, чтобы комбинация изображения и текста не вынуждала читателей прокручивать страницу по горизонтали для чтения текста.
Размещайте каждую фотографию там, где очевидна её связь с текстом
Помещайте фотографию рядом с предложением или абзацем, который объясняет причину её присутствия. Если читателям приходится пролистывать несколько не связанных с ней абзацев, чтобы найти изображение, связь может затеряться. Точно так же крупная фотография, вставленная прямо посреди рассуждения, может нарушить логику восприятия. Удачным решением обычно является размещение сразу после первого абзаца, вводящего тему, или непосредственно перед шагом инструкции, где требуется изображение.
Используйте подпись, когда она добавляет что-то конкретное: называет объект, указывает на деталь или объясняет, почему этот кадр важен. Не используйте подпись для дословного дублирования соседнего предложения. Если фотография требует внимательного рассмотрения, укажите, на что обратить внимание, как в тексте поблизости, так и в подписи; читатели не должны догадываться об этом лишь по расположению снимка.
Взаимосвязь между фотографией и текстом важна и для невизуального чтения. В руководстве W3C Images Tutorial говорится, что информативным изображениям необходимы текстовые альтернативы, передающие их ключевую суть, тогда как декоративные изображения могут иметь пустой альтернативный текст, чтобы вспомогательные технологии могли их пропускать. Руководство W3C по информативным изображениям подчеркивает, что альтернативный текст должен передавать значение изображения в контексте, а не просто перечислять видимые объекты. В качестве практической проверки спросите себя: если бы кто-то не видел эту фотографию, какую информацию он бы упустил? Внесите важную информацию в текст статьи и укажите подходящий альтернативный текст для изображения. Если изображение не добавляет ничего нового к соседнему тексту, дублировать его описание может быть излишним.
Сохраняйте полезную форму фотографии
Соотношение сторон фотографии — пропорция между её шириной и высотой — влияет на занимаемое ею пространство и на то, что останется видимым. Начните с размещения всей фотографии целиком внутри выбранной области. Кадрируйте только тогда, когда объект съемки остается понятным, а обрезка не удаляет важные для читателя детали. Горизонтальное кадрирование может подойти для широкого главного изображения; вертикальный снимок может лучше смотреться при меньшей ширине внутри колонки. Это вопросы композиции, а не жесткие предписания.
Если кадрирование лишает снимок контекста, искажает предполагаемый смысл или скрывает деталь, упомянутую в статье, используйте другое кадрирование или покажите оригинал в исходных пропорциях. Для схем, инфографики с надписями или документов обязательно проверьте итоговый размер отображения: текст, встроенный в фотографию, может стать слишком мелким для чтения. Руководство GOV.UK по изображениям обычно не рекомендует помещать текст внутрь изображений, поскольку его сложно читать, копировать, масштабировать или воспринимать через программы экранного доступа; если текст на изображении критически важен, продублируйте его смысл в расположенном рядом текстовом блоке.
Проверяйте макет на тех экранах, которыми пользуются читатели
Оцените статью как на широком экране компьютера, так и на узком экране смартфона. Убедитесь, что фотография не выходит за пределы текстовой колонки, не перекрывает контент и не заставляет текст сжиматься в узкую полосу рядом с ней. Проследите за порядком чтения от заголовка к абзацу и к фотографии: когда элементы выстраиваются друг под другом, изображение все равно должно находиться рядом с тем фрагментом, который оно поясняет. Также проверьте подписи и любые важные детали на самом изображении в реальном размере отображения.
Для веб-страниц размер отображения на экране и размер файла — это разные вещи. Исходный файл высокого разрешения может потребоваться для показа на большом экране, но отправка неоправданно тяжелых файлов на мобильные устройства приводит к лишней трате трафика. Руководство Google web.dev по адаптивным изображениям рассказывает, как браузеры могут выбирать подходящий размер картинки под различные условия отображения, и отмечает, что единственно правильного количества версий изображения не существует. Это технические рекомендации по веб-публикации; они не определяют, где именно изображение должно находиться внутри статьи.
Краткий алгоритм принятия решений
Определите задачу. Предназначена ли фотография для изучения деталей, служит иллюстрацией к тексту или нужна лишь для оформления страницы?
Найдите её смысловую привязку. Определите фрагмент текста, который вводит изображение или опирается на него, и поместите фотографию рядом с ним.
Задайте ширину отображения. Предоставьте ключевым деталям достаточно места; сделайте вспомогательную фотографию компактнее, если детальность не играет решающей роли.
Проверьте кадрирование. Сохраняйте в кадре объект съемки и весь значимый контекст.
Прочитайте макет последовательно. На узком экране убедитесь, что текст и фотографии по-прежнему идут в логичном порядке, а текст остается удобным для чтения.
Опишите содержание. Добавьте подпись, если она полезна, и укажите текстовую альтернативу исходя из роли изображения.
Практическое правило простое: пусть важность определяет заметность, связанный текст определяет расположение, а предварительный просмотр на узком экране показывает, работает ли задуманная компоновка. Если на выбранном размере фотографию трудно понять, увеличьте её, упростите кадрирование или объясните нужные детали в тексте.