Медиа Перевод: Как перевести изображения, видео и PDF-файлы на ваш сайт

Как правильно переводить изображения веб-сайтов: переводите альтернативный текст, подписи и имена файлов повсюду, воссоздавайте изображения с большим количеством текста для каждого языка и размещайте нужное изображение, видео или PDF-файл в каждой языковой версии.
Нет данных карты Никаких обязательств

· Обновлено · Алекс Б · Блог

Подведите итог этому посту следующим образом: 9 мин чтения

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

Ключевые выводы

  • Альтернативный текст — это часть, которую читает Google. Google называет его “самым важным атрибутом, когда речь идет о предоставлении дополнительных метаданных для изображения” (Центр поиска Google), поэтому непереведенный атрибут alt является пропущенным сигналом ранжирования на каждом языке.
  • Отдельный файл нужен только для изображений с текстом, ценами, местными отсылками или подсказками о людях и культуре. Декоративные изображения и фотографии продуктов обычно этого не делают.
  • Меняйте файлы на каждом языке по URL-адресу вместо наложения текста с помощью трюков CSS. Каждая языковая страница должна ссылаться на свой собственный файл изображения.
  • Google также рекомендует переводить имена файлов при локализации изображений.
  • Самый быстрый способ избежать большей части этой работы — прекратить помещать текст внутрь изображений в новых дизайнах.

Почему важен перевод СМИ

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

Коммерческое обоснование необходимости делать это правильно основано на том, как люди совершают покупки. В опросе CSA Research 2020 года “Не умею читать, не буду покупать”, в котором приняли участие 8709 потребителей в 29 странах, 76% онлайн-покупателей заявили, что предпочитают покупать товары с информацией на родном языке, а 40% заявили, что никогда не будут покупать на сайтах на других языках (CSA Research, июль 2020 г). Инфографика, таблица размеров или диаграмма “как это работает” также являются информацией о продукте.

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

Что считается “медиа” на веб-сайте

АктивЧто переводитьОбычно нужен новый файл?
Фотографии (продукция, команда, локации)Альтернативный текст, заголовок, подпись, имя файлаРедко
Баннеры и изображения героев с текстомАльтернативный текст и само изображениеДа
Инфографика, диаграммы, графикиАльтернативный текст и само изображениеДа
Скриншоты вашего продуктаАльтернативный текст; изображение, если пользовательский интерфейс локализованЧасто
Иконки и иллюстрацииАльтернативный текст (если он имеет смысл)Только если они несут текст или культурные символы
Видео (самостоятельно размещенные или на YouTube)Название, описание, субтитрыДа, если есть речь или текст на экране
PDF-файлы (брошюры, руководства, спецификации)Текст ссылкиДа

Шаг 1: Проверьте изображения, которые действительно несут язык

Начните с сканирования или быстрого ручного просмотра ваших лучших страниц на языках, которые вы уже предлагаете. Задайте три вопроса о каждом изображении:

  1. Есть ли текст в пикселях? Баннеры, кнопки, нарисованные в виде изображений, диаграммы с надписями, скриншоты.
  2. Есть ли местная ссылка? Цены в валюте, номера телефонов, адреса, форматы дат, единицы измерения, сезонные темы (снежный “праздничный” баннер означает июль в Австралии).
  3. Зависит ли имидж от культуры? Жесты рук, одежда, еда, цвета с ярко выраженным местным значением или люди, которые не отражают рынок, на который вы ориентируетесь.

Если ответ “нет” все три раза, изображению нужно только перевести текстовые атрибуты. Все остальное попадает в список локализации, отсортированный по трафику.

Шаг 2: Переведите слова, прикрепленные к каждому изображению

Это касается каждого изображения, включая те, которые вы сохраняете:

  • Напишите альтернативный текст на целевом языке. Не переводите список ключевых слов с помощью машины; следуйте тому же правилу, которое Google дает для английского языка, и напишите краткое, конкретное описание (Гугль).
  • Переведите атрибуты заголовка и подписи. Подписи представляют собой видимый основной текст, поэтому их следует переводить вместе с остальной частью страницы.
  • Перевести имена файлов. Руководство Google прямое: “Если вы локализуете свои изображения, не забудьте также перевести имена файлов, учитывая правила кодирования URL-адресов, если вы используете нелатинские или специальные символы” (Гугль). zapatillas-running-rojas.jpg сообщает испаноязычному индексу более red-running-shoes.jpg.
  • Если разметка продукта или изделия ссылается на изображение, name и description вокруг него также должен быть язык страницы.

Шаг 3: Создайте локализованные версии изображений с большим объемом текста

Для изображений из вашего списка локализации:

  1. Получите исходные файлы. Воссоздание баннера из многослойного файла дизайна (Figma, Photoshop, Canva) происходит гораздо быстрее и чище, чем редактирование сглаженного JPG-файла.
  2. Сначала переведите текст, затем разработайте дизайн. Отправьте строки своему переводчику или пропустите их через инструмент перевода, просмотрите их и только затем поместите в дизайн. Ожидайте, что текст будет длиннее; Заголовки на немецком и французском языках обычно требуют больше места, чем на английском, поэтому оставьте место или уменьшите шрифт.
  3. Проверьте макеты справа налево. Для арабского или иврита зеркально отображайте элементы направления (стрелки, шаги выполнения, порядок чтения изображения «до и после»).
  4. Экспорт с четким шаблоном именования, например pricing-banner-de.webp, pricing-banner-fr.webpи сохранить те же размеры, что и у оригинала, чтобы макет не прыгал.
  5. Ведите реестр изображений, имеющих локализованные версии, чтобы при изменении английского баннера обновлялись и другие языки.

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

Шаг 4: Подайте нужный файл на каждой языковой версии

Локализованный файл полезен только в том случае, если на него указывает каждая языковая страница. То, как вы это сделаете, зависит от стека:

  • Благодаря отдельным страницам на каждом языке (многоязычная настройка CMS) загрузите локализованное изображение на страницу или в поле мультимедиа каждого языка.
  • С помощью слоя перевода или плагина используйте функцию замены мультимедиа, чтобы src изображение изменяется на переведенной странице, в то время как исходная страница сохраняет исходный файл.
  • В пользовательском коде сохраняйте ссылки на изображения в локализованных файлах ресурсов так же, как вы храните строки.

Какой бы маршрут вы ни использовали, проверьте отображаемый HTML-код переведенной страницы и подтвердите <img src> и alt оба атрибута изменились.

Видео и PDF-файлы

Для видео субтитры являются самым дешевым и доступным для поиска вариантом; YouTube и большинство видеоплееров принимают файл субтитров для каждого языка. Для маркетинговых видеороликов с большим количеством текста на экране или закадрового голоса лучше использовать отдельную локализованную версию, а затем переведенную страницу следует встроить в нее эту версию вместо оригинала.

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

Как ConveyThis обрабатывает изображения, видео и PDF-файлы

При ConveyThis текст вокруг вашего носителя обрабатывается автоматически: при переводе страницы alt, title и placeholder Атрибуты переводятся вместе с видимым текстом, поэтому каждое изображение получает описание на каждом языке без дополнительной работы.

Для файлов, которым требуется локальная версия, вы включаете перевод мультимедиа один раз, а затем меняете файлы на каждом языке:

  1. На панели управления ConveyThis откройте Настройки → Показать больше параметров а в разделе «Общие» включите необходимые вам параметры мультимедиа: изображения, видео и PDF.
  2. Откройте страницу в визуальный редактор, переключитесь на целевой язык и щелкните значок пера на изображении (или PDF-файле), которое вы хотите заменить.
  3. Введите URL-адрес локализованного файла, в идеале того же размера, что и оригинал, и сохраните.

Замена изображения работает для обычного <img> теги и фоновые изображения, установленные в строке элемента. Замена видео охватывает самостоятельный хостинг <video> источники и встроенные проигрыватели YouTube, чтобы испанская страница могла воспроизводить испанскую версию. Пошаговые руководства со скриншотами находятся в справочном центре: переводить изображения и медиа и изменить медиафайл в переведенной версии.

Поскольку каждый язык существует на своем собственном URL-адресе с тегами hreflang, Google индексирует переведенный альтернативный текст и локализованные файлы для этого языка. Смотреть все ConveyThis особенности, или как визуальный редактор вписывается в рабочий процесс проверки перевода.

Краткий контрольный список для перевода медиа

  • Альтернативный текст, атрибуты заголовка и подписи переведены на каждую языковую версию
  • Локализованные имена файлов для локализованных изображений
  • Текстовые изображения, скриншоты и баннеры, воссозданные на каждом языке, начиная со страниц с наибольшим трафиком
  • Цены, единицы измерения, даты и номера телефонов на изображениях соответствуют целевому рынку
  • Версии RTL зеркально отображаются там, где направление имеет значение
  • Видео с субтитрами или заменой; PDF-файлы переведены и связаны по языкам
  • Реестр локализованных активов, позволяющий обновлениям достигать каждого языка

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

Часто задаваемые вопросы

Читает ли Google текст внутри изображений? Не рассчитывайте на это для рейтинга. Руководство Google по изображениям сосредоточено на альтернативном тексте, именах файлов и тексте, размещенном рядом с изображением, поэтому размещайте важные слова в этих местах и в HTML-коде страницы.

Стоит ли переводить альтернативный текст для декоративных изображений? Декоративные изображения должны иметь пустое место alt="" на всех языках, поэтому переводить нечего. Каждое значимое изображение нуждается в переведенном описании.

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

Следующий шаг

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

Поделиться:
G2 High Performer Spring 2023
G2 Easiest Setup Fall 2024
G2 Best Support Spring 2025