Когда не копировать веб-изображения [видео]

Чтобы стратегически думать о своем визуальном веб-контенте, вам нужно сделать больше, чем просто выбрать, какие изображения использовать; вы также должны убедиться, что эти изображения подходят для больших и маленьких экранов.

Если изображение работает для всех размеров экрана, отлично. Загрузите один файл (изображение из одного источника), и все готово.

Не все изображения делают вашу жизнь такой простой. Иногда стоит предоставить несколько версий изображения, чтобы дать людям то, что им нужно от изображения на любом устройстве.

Так говорит Бадди Скалера, старший директор по контент-стратегии The Medicines Company. В своем выступлении на конференции Intelligent Content Conference «Создание и реализация масштабируемой стратегии визуального контента» Бадди сказал нам, что он всецело выступает за использование единого источника ... Он выступает за то, что он и другие называют «в основном COPE» (COPE-M), особенно когда речь идет об изображениях.

COPE означает «создать один раз, опубликовать везде». Контент COPE - это контент из одного источника. Во многих смыслах контент COPE идеален. Вы создаете фрагмент контента один раз - описание продукта, спецификацию, определение, изображение - и система может извлекать (не вставлять) этот фрагмент в несколько результатов. Когда вы обновляете источник, обновление проходит через ваш репозиторий. Контент COPE элегантен. Это эффективно. Это логично. Это экономит компаниям миллионы долларов на переводе. Это помогает им избежать смущающих, сумасшедших и порождающих судебные тяжбы несоответствий. COPE хорошо работает с текстом, аудио и видео (если вы используете YouTube).

Тем не менее, иногда COPE - неправильный путь. Современные браузеры изменяют формат текста, но изображения уменьшаются для ваших устройств. Изображение, которое отлично смотрится на рабочем столе, может стать неузнаваемым на смартфоне. (Привет, ущипните и увеличьте масштаб.)

Вот где появляется буква M в COPE-M. «Хотя подготовка контента к многоканальному повторному использованию - хорошая цель, не весь контент эффективно масштабируется в модели COPE», - говорит Бадди.

В этой статье я резюмирую совет Бадди из его выступления в ICC. Все изображения в этом посте взяты из его слайдов, а все цитаты, если не указано иное, взяты из его выступления и из моих последующих бесед с ним.

Почему с некоторыми изображениями сложно СОПРАВИТЬСЯ

Бадди бросает то, что он называет «бомбой правды» об изображениях: они не то же самое, что текст.

Текст поддается использованию из одного источника, потому что текст можно отделить от его внешнего вида. Каскадные таблицы стилей позволяют тексту изменять внешний вид от одного экземпляра к другому без изменения основного источника текста. «Текст - это замечательный, гибкий, гибкий, многоразовый, независимый от каналов ресурс, который отлично работает в цифровом мире», - говорит он.

Не так с изображениями. Их невозможно отделить от их внешнего вида. Один размер изображения не всегда подходит всем.

Как сказал несколько лет назад Джастин Хорнор, «слон в комнате» для адаптивного веб-дизайна «это то, как обращаться с изображениями». Маленькое изображение может выглядеть резким на мобильном телефоне и смехотворно маленьким на мониторе с высоким разрешением. Рендеринг большого изображения на небольшом устройстве может занять много времени, тогда как изображение меньшего размера будет достаточно.

Как думать о мультисорсинге изображений

Вместо того, чтобы ожидать, что одно изображение будет работать для всех устройств за счет компромисса на высоком и низком уровнях, вы можете хотя бы изредка посчитать целесообразным загружать несколько изображений, а затем сообщать системе, в какой точке останова использовать каждое из них.

Точка останова - это точка, в которой система перестает вытягивать одно изображение и вместо этого вытягивает другое - большее или меньшее, в зависимости от разрешения устройства. На этом рисунке показаны три возможных точки останова: 320 пикселей для мобильного телефона, 720 пикселей для планшета или большого телефона и 1024 пикселей для ноутбука.

Точки останова определяются в соответствии с шириной устройства, потому что у нас есть бесконечная вертикальная прокрутка, но ограниченная ширина.

Бадди описывает время, когда одна из контент-групп в его компании напечатала брошюру, в которой была диаграмма с ответами на вопросы врачей об определенном продукте.

График отлично смотрелся в печати. А потом они разместили его на веб-сайте, и он стал меньше. При просмотре на смартфоне график не читался. Люди, ищущие что-то на смартфоне в больнице, очень срочно. Им нужен ответ. Их не нужно щипать и масштабировать.

Во многих случаях допустимо загрузить одно большое изображение на ваш веб-сайт (другими словами, для единственного источника изображения) и позволить браузеру масштабировать его для вас. В других случаях изображения становятся почти неразборчивыми, когда они помещаются в небольшое окно или экран. Чтобы проиллюстрировать этот момент, Бадди показывает, что происходит, когда браузер масштабирует фотографию своих дочерей шириной 800 пикселей:

Это пример COPE. К сожалению, когда браузер масштабирует это изображение для узкого окна или экрана, лица девочек трудно увидеть. Если бы это изображение было диаграммой или инфографикой, текст на меньшем экране мог бы стать неразборчивым.

Для визуальных элементов, критически важных для повествования о вашем бренде, вы можете приложить дополнительные усилия, чтобы использовать несколько изображений. Такой подход, который Бадди называет «адаптивным художественным руководством», дает людям больше шансов разглядеть важные детали на любом экране.

Когда Бадди меняет ширину изображения с 800 до 400 на 200 пикселей, он также меняет композицию изображения: это не COPE. Это планирование имиджа. На фотографии шириной 800 пикселей девушки и собака изображены бок о бок, что он называет горизонтальным снимком в три ширины. Фотография шириной 400 пикселей сближает девушек и выставляет собаку перед собой для получения двух вертикального снимка в ширину. Снимок шириной 200 пикселей сжимает все три фигуры в виде тотемных столбов.

Если вы просматривали пример страницы Buddy в браузере и растягивали и сужали окно, изображение менялось бы каждый раз, когда вы достигали одной из точек останова, указанных в коде HTML. Чтобы получить представление о пользовательском опыте, посмотрите это шестисекундное видео:

Чтобы испытать такое поведение в собственном браузере, посетите страницу примера Buddy на устройстве, которое позволяет вам изменять ширину окна.

Хотя этот пост не является руководством по написанию такого кода, вам может быть полезно посмотреть, как этот код выглядит:

Главное, на что следует обратить внимание (смотрите между тегами «изображение»), это то, что Бадди указал три исходных изображения:

• GirlsDog_200w.jpg
• GirlsDog_400w.jpg
• GirlsDog_800w.jpg

Каждому файлу JPG назначается точка останова:

• максимальная ширина: 499 пикселей
• максимальная ширина: 799 пикселей
• минимальная ширина: 800 пикселей

Сколько точек останова нужно создать? Как определить их максимальную и минимальную ширину? Нет никаких правил. В отличной статье, на которую указывает Бадди, Джейсон Григсби говорит: «Выбор точек останова изображения - это то, с чем столкнется каждый, и, честно говоря, у меня нет для вас хороших ответов».

Вероятно, вы не будете создавать несколько изображений для каждого изображения на своем веб-сайте. Определите, какие изображения действительно важны для вашего покупателя. Если вы знаете, что изображение (например, график, диаграмма, фотография продукта) действительно важно для вашего пользователя, не оставляйте его веб-браузеру для определения способа визуализации этого изображения. Взять под контроль.

Стоит отметить, что некоторые системы управления цифровыми активами (DAM) могут создавать несколько выходных данных одного изображения в разных размерах и соотношениях. Он не будет копировать то, что сделал Бадди с отдельными фотографиями, но вам следует изучить, что предлагает ваша программная система.

Единственное правило, которое я могу предложить, - принимать стратегические решения в отношении изображений так же, как вы принимаете стратегические решения в отношении любого другого контента: спрашивайте себя, что нужно вашей аудитории и почему. Поэкспериментируйте с различными изображениями и точками останова. Повторение.

Чтобы узнать больше о том, что Бадди говорит о создании и выполнении масштабируемой стратегии для вашего визуального контента, см. Его аннотированную презентацию ICC.

Когда использовать несколько источников ваших изображений

Хотя вы не захотите создавать несколько исходных файлов для каждого изображения, рассмотрите возможность использования нескольких источников для тех изображений, которые имеют наибольшее влияние, например, основных изображений на ваших страницах конверсии. Как говорит Бадди:

Подумайте обо всех деньгах, потраченных на ваш сайт. Если вы позволяете машинам решать, как обращаться со всеми вашими изображениями, а люди иногда не могут видеть ключевые изображения, вы упускаете возможность.

Вы знаете важные страницы и изображения на своем веб-сайте. Вероятно, вы уже отметили их в своем программном обеспечении для аналитики. Особенно важно протестировать эти страницы на мобильных устройствах, «не только на великолепных широкоэкранных мониторах, которые ваши дизайнеры использовали для создания контента», - говорит Бадди.

Также рассмотрите возможность использования мультисорсинговых изображений на любых других страницах, которые большинство людей просматривает на небольших устройствах. «Посмотрите, сколько трафика вы получаете со своих смартфонов. Если это как у нас, 65%, это ваша аудитория. Вы должны их обслужить, - говорит Бадди. Если пользователи смартфонов не могут прочитать изображение без сжатия и масштабирования, вы можете настроить изображение для маленьких экранов.

Лучший способ узнать, какие изображения использовать в нескольких источниках, - это протестировать свои веб-страницы на нескольких устройствах . Все контент-команды - включая ваших коллег по контент-стратегии, дизайну, разработке контента и пользовательскому опыту - должны знать, как изображения вашего сайта загружаются на смартфоны. Возьмите стопку устройств и дизайнера, контент-стратега или специалиста по UX. Загрузите свой контент так, как это сделал бы ваш клиент. «Если изображения, которые вы с любовью загрузили на свой веб-сайт, выглядят немного сжатыми, подумайте о том, как браузер масштабирует ваши графические ресурсы», - говорит Бадди, и планируйте соответственно.

Заключение

Пока наши системы содержания не станут достаточно умными, чтобы автоматически предоставлять людям идеальные впечатления от каждого изображения на любом устройстве, подумайте, когда копировать, а когда не копировать с вашими изображениями. Возможно, стоит приложить дополнительные усилия и использовать несколько источников для определенных изображений.

Как насчет вашей команды? Вы иногда создаете несколько версий важных изображений для разных размеров экрана? Что вы узнали, тестируя свои изображения на нескольких устройствах? Дайте нам знать в комментарии.

Вот отрывок из выступления Бадди:

Подпишитесь на нашу еженедельную электронную рассылку Content Strategy for Marketers , в которой представлены эксклюзивные истории и идеи от главного консультанта CMI Роберта Роуза. Если вы похожи на многих других маркетологов, с которыми мы встречаемся, вы будете с нетерпением ждать чтения его мыслей каждую субботу.

Изображение на обложке: Джозеф Калиновски / Институт контент-маркетинга