Графика на многоязычном сайте: встроенный SVG, локализация изображений и границы перевода
1. Страницы переведены, а картинки нет — самая частая недоделка на многоязычном сайте
После запуска многоязычного сайта клиент замечает в первую очередь не грамматику, а картинки. На английской странице стоят блок-схемы с китайскими подписями — и клиент сразу видит, что перед ним «переводная версия».
Четыре вида недоделок встречаются с разной частотой и стоят по-разному:
| Часть страницы | Что получается, если перевести только текст | Что сразу чувствует покупатель | Как часто встречается |
|---|---|---|---|
| Иллюстрация в тексте с китайскими подписями | Подписи непонятны, смысл угадывают по контексту | Содержание неполное | Максимальная |
| Блок-схемы и схемы архитектуры | Вся картинка превращается в загадку | Сомневается, что сайт собрали наспех | Высокий |
| Схема с параметрами продукта | Единицы и шкалу не прочитать | Боится выбирать модель по схеме | Средний |
Есть проблема незаметнее: текст на изображении не читают ни поисковые системы, ни AI. Если картинка несёт трёхуровневую структуру, которую можно объяснить только на ней, для любой машины этих трёх уровней просто не существует. Локализация графики решает сразу две задачи — человек понимает, машина находит.
Когда этот подход не работает: Если на сайте всего два языка, а английские посетители — в основном старые клиенты и дилеры, графику можно отложить на потом, после страниц продуктов и сертификатов. Но если английская версия должна приводить поисковый трафик от незнакомых клиентов, китайские подписи на картинках — серьёзный минус.
2. Почему текст на изображении так сложно обработать: сравнение затрат по четырём вариантам
Текст внутри растрового изображения не исправить — вот где начинаются все сложности: текст уже сжат в пиксели, и чтобы его изменить, нужно вернуться к исходнику в редакторе.
У растрового варианта три конкретные проблемы:
| Проблема | Причина | Цена |
|---|---|---|
| Текст не исправить | Текст уже стал пикселями | Каждая правка требует возврата к исходнику в редакторе |
| Размер удваивается | Один язык — один файл | Число файлов в галерее равно числу картинок, умноженному на число языков |
| Версии расходятся | Китайскую и английскую версии ведут отдельно | В китайской версии параметры поменяли, в английской остались старые цифры |
Выбор между четырьмя вариантами выглядит так — эта таблица закрывает примерно 80% решений:
| Подход | Как сделать | Разовая стоимость | Долгосрочная поддержка | Когда подходит |
|---|---|---|---|---|
| Растровый перевод | Для каждого языка экспортируют свой файл | Средняя — по сути, переделать всё заново | Высокая — каждая правка означает новую переделку | Схемы со сложной информацией и обилием терминов |
| Встроенный SVG с двумя языками | Одна картинка с двумя наборами текста, показ по языку | Высокие, нужна помощь разработчиков | Низкие, меняешь в одном месте — работает для всех языков | Структурные схемы, блок-схемы, табличные карточки |
| Текст внутри картинки вынести наружу | На картинке только структура, текст несёт сама страница | Средние, нужна переверстка | Низкая | Простые схемы, стрелочные диаграммы |
| Ничего не делаем | Оставляем картинку как есть | ноль | ноль | Декоративные картинки, обычные фотографии товара |
Критерий выбора только один: будет ли эта картинка меняться. Сложная инфографика, которая не изменится в ближайшие два года, — делайте сразу два растровых файла, так проще всего. Если ещё будут меняться параметры,流程 или названия — используйте встроенный SVG или выносите текст наружу. Обычные фотографии товара — это четвёртый случай, в них текста нет, и тратить на них бюджет не нужно.
Три. Двуязычный текст во встроенном SVG: одна картинка с двумя наборами текста
Плюс встроенного SVG в том, что текст остаётся текстом, а не пикселями. В одной картинке лежат два набора текста — китайский и английский, — и страница сама решает, какой показать. Держать два файла не нужно.
| Что нужно сделать | Как сделать | Почему так |
|---|---|---|
| Оба набора текста из одного источника | Китайский и английский текст идут парами в одной картинке | Меняешь в одном месте — второй язык не забудешь |
| Показ по языку | Корневой элемент страницы помечен текущим языком, каждый набор текста привязан к своему языку, показ и скрытие управляются стилями | Не нужно генерировать новый файл для каждого языка |
| Запрет перевода на весь блок | Помечаем всю картинку как непереводимую | Чтобы плагин перевода не перевёл оба набора текста ещё раз |
| Длину проверяем на этапе генерации | При генерации сразу проверяем по реальной длине обоих языков, не вылезает ли текст | Переделка после запуска обходится гораздо дороже |
| Один файл | Одна картинка — один файл, по языкам не разбиваем | Количество файлов в галерее не зависит от числа языков |
Пункт про запрет перевода на весь блок пропускают чаще всего. Без пометки плагин перевода примет китайские подписи на картинке за обычный текст и переведёт их на английский — и на английской странице окажутся рядом переведённый английский и тот английский, что уже был. Два набора наложатся друг на друга, и картинка пропадёт. Такая проблема очень часто встречается на сайтах, которые полагаются на автоперевод плагином.
Есть ещё одно требование к именам: в имени файла картинки и в alt-тексте не должно быть языкового суффикса. С суффиксом каждый новый язык — это ещё партия файлов, галерея растёт вместе с числом языков, и при чистке трудно понять, какая картинка ещё нужна. В alt-тексте пишите, что на картинке, а не на каком она языке.
Четыре. Английский длиннее китайского в 1,3–1,5 раза — верстку закладывайте с этим запасом
Вот число, которое важнее всего запомнить из этой статьи: строка подписей, которая в китайской версии занимает ровно всю ширину, в английской обычно длиннее в 1,3–1,5 раза, а короткие подписи — ещё сильнее.
| Тип текста | Длина по-китайски | Обычный коэффициент для английского | Пояснение |
|---|---|---|---|
| Короткие подписи, до 4 иероглифов | Например, четыре иероглифа | 1,6–2,0 раза | Чем короче, тем менее точно, раздувает сильнее всего |
| Средние фразы, 8–15 иероглифов | Описание в одну строку | 1,3–1,5 раза | Самый типичный диапазон |
| Полные предложения, от 20 иероглифов | Полное предложение | в 1,2–1,4 раза | с контекстом доля падает |
| текст с аббревиатурами или артикулами | например, сокращения параметров | близко к 1,0 | артикулы и единицы не переводятся, длина почти не меняется |
В немецком и русском текст ещё длиннее — обычно на 10–20% больше, чем в английском. Если планируется немецкая версия, запас нужно закладывать по немецкому, а не считать только по английскому.
Но знать коэффициент мало — в вёрстке он должен превратиться в конкретные правила запаса, иначе цифра так и останется неиспользованной:
| Тип элемента | Минимальный кегль | Как считать доступную ширину | Минимальный запас |
|---|---|---|---|
| Заголовок карточки | не меньше 15 pt | ширина карточки минус внутренние отступы по 12 пикселей с каждой стороны | запас 40% пустой ширины |
| Строка текста в карточке | не меньше 12 pt | расстояние до левой границы соседней колонки | запас 45% пустой ширины |
| Оси и подписи делений | не меньше 10 pt | расстояние до следующего деления | запас 50%, при необходимости перенос на две строки |
| Легенда и сноски | не меньше 10 pt | расстояние до правой границы полосы набора | запас 35%, длинные сокращения |
Запас нужен для переноса строки, а не для уменьшения кегля. Если текст не помещается в одну строку, переносите на вторую, а по вертикали растите вверх и вниз от исходной базовой линии. Уменьшать кегль можно, только если не помещается и по вертикали, и не ниже минимума из таблицы выше. Этот порядок нельзя менять местами: если сначала уменьшить кегль, английская версия окажется на пункт меньше китайской, и визуальный вес двух языков разойдётся.
Переполнение проявляется тремя способами, и обрабатываются они по-разному:
| Форма переполнения | Как выглядит | Что делать |
|---|---|---|
| Выход по горизонтали | текст наезжает на соседнюю карточку | переносить по расстоянию до соседа, а не уменьшать кегль |
| Перекрытие по вертикали | многострочный текст закрывает следующую строку | закладывать межстрочный интервал как кегль, умноженный на 1,3–1,4 |
| Выход за карточку | текст выходит за границы карточки | сначала увеличить внутренние отступы, потом думать о высоте карточки |
Пять. Локализация таблиц: ширина колонок, числа, единицы, даты
С таблицами сложнее, чем с графикой, потому что они живые: ширина колонок зависит от содержимого, а содержимое — от языка. Пять мест, где чаще всего возникают проблемы:
| Что проверить | Частая проблема | Что делать |
|---|---|---|
| Ширина колонок | узкая колонка, рассчитанная по китайскому тексту, ломает английский заголовок на две строки | перераспределить ширину колонок по длине английского заголовка |
| Формат чисел | запятая и пробел как разделитель разрядов используются вперемешку | привести к правилам целевого языка: один сайт — один набор правил |
| Единицы измерения | в китайском заголовке единица указана, в английском пропала | единицу указывать в заголовке, а не в ячейках с данными |
| Дата | порядок «год-месяц-день» в разных языках понимают по-разному | использовать четырёхзначный год и английское сокращение месяца, избегать чисто цифровых дат |
| Перенос слишком длинного перевода | текст в ячейке растягивает всю строку по высоте | перенос разрешён, но не больше двух строк; если не помещается — сократить заголовок |
Именно в записи чисел и единиц легче всего заложить мину, поэтому типичные расхождения нужно оговорить заранее:
| Содержание | Как принято в китайском | Как принято в англоязычных странах | На что обратить внимание |
|---|---|---|---|
| Разделитель разрядов | 10,000 или 10000 | 10 000 | не путать десятичный разделитель с разделителем разрядов |
| Десятичная дробь | 0,5 | 0.5 или .5 | запятая как десятичный разделитель недопустима |
| Размеры | 200 мм | 200 mm | перед обозначением единицы ставить пробел |
| Температура | 20 °C | 20 °C | между знаком градуса и буквой ставить пробел |
| Диапазон | от 10 до 20 | 10 to 20 или 10–20 | Везде используйте дефис или короткое тире |
| Валюта | 30 000 юаней | 30 000 юаней | Не разрывать строку между обозначением валюты и суммой |
Отдельно проверьте, как таблица выглядит на телефоне. Можно добавить горизонтальную прокрутку или превратить её в карточки. Чего делать нельзя — сжимать таблицу целиком, чтобы она влезла в экран: шрифт станет нечитаемым. Критерий простой: заголовки таблицы должны читаться без увеличения.
Шесть. Что на изображениях переводить обязательно, а что запрещено
К содержимому изображений нельзя подходить с одной меркой — здесь действуют разные правила:
| Тип контента | Переводить? | Почему |
|---|---|---|
| Подписи к данным, обозначения осей, легенда | Перевод | Без них читатель не поймёт график — изображение теряет смысл |
| Блоки схемы, названия модулей | Перевод | Это часть основного текста, они должны совпадать с текстом на странице |
| Названия брендов и компаний | Не переводить | У названия бренда есть единственное написание, перевод приведёт к расхождениям |
| Модели и серийные номера изделий | Не переводить | Модель — это точка опоры для поиска на любом языке: переведёшь — ничего не найдёшь |
| Обозначения единиц и формулы | Не переводить, но оформлять по правилам языка | Сами обозначения универсальны, а пробелы и написание зависят от местных традиций |
| Номера сертификатов и стандартов | Не переводить | Номер — это внешний фиксированный идентификатор |
Есть простое правило: если после перевода этого текста клиент не сможет найти нужную вещь на другом языке, переводить не надо. Модели, номера и бренды как раз из этой категории.
Есть ещё одно требование к единообразию: термины на схеме должны совпадать с глоссарием. Если один и тот же параметр на китайской странице называется «ход», а на английской в одном месте написано travel, в другом — stroke, читатель решит, что это два разных параметра. Для многоязычного сайта сначала нужен глоссарий, и только потом можно говорить о локализации изображений. Если поменять порядок, придётся переделывать снова и снова. Логика работы с параметрами здесь та же, можно сравнить /insight/13-product-catalog-filter-search-experience/.
Семь. Чек-лист: каждое изображение умножаем на каждый язык — четыре проверки
Проверять только китайскую версию нельзя. Каждое изображение на каждом языке проходит четыре проверки; что не прошло — не публикуем.
| Что проверить | Критерий оценки | Что делать, если не прошло |
|---|---|---|
| Выход за границы | Текст не выходит за пределы карточки и не давит на соседние элементы | Перенести строку, если по высоте не хватает — уменьшить кегль |
| Перекрытие | Строки текста не накладываются друг на друга, текст не накладывается на графику | Увеличить межстрочный интервал или высоту контейнера |
| Кегль | Не меньше минимального кегля для этого элемента | Сократить текст, а не уменьшать кегль дальше |
| Выход за карточку | Отступ между текстом и рамкой не меньше 12 пикселей | Добавить внутренние отступы или расширить карточку |
Когда честно делать два комплекта изображений
| Ситуация | Обоснование | Рекомендация |
|---|---|---|
| Технологическая схема с плотной терминологией | Больше 20 специальных терминов на одном изображении | Два комплекта растровых изображений, проверяет человек, знающий оба языка |
| Сложная многоуровневая инфографика | Больше четырёх уровней вложенности на изображении | Разбить на несколько простых изображений и сделать двуязычный SVG |
| Трёхмерный рендер с разрезом изделия | Текст деформируется по кривой поверхности | Два комплекта растровых изображений, рендер отдельно для каждого языка |
| Изображения для печати | Для печатных материалов SVG не подходит | Два комплекта растровых изображений, исходники в высоком разрешении сохранить |
| Заказчик задаёт макет с текстом и графикой | Макет утверждает заказчик | Два комплекта растровых изображений, чтобы не менять макет |
Логика простая: чем сложнее информация на изображении, чем больше ручной проверки она требует и чем чаще её нужно отдавать за пределы сайта, тем выше смысл делать две версии картинки. И наоборот: структурные схемы, блок-схемы процессов и сравнительные таблицы для внутреннего использования всегда делаем в двуязычном SVG — поддерживать их на порядок дешевле. Изображения и файлы на этапе передачи можно сверить по списку из /site/; если речь о страницах доверия и подтверждении квалификации, о том, как выстраивать доверие через текст и графику, читайте в статье /insight/09-trust-pages-ai-credibility-evidence/, а можно прислать текущий перечень графики на /contact/ и мы проверим его по каждому языку.
FAQ: частые вопросы
В заключение
Локализация графики только кажется задачей дизайнера — на деле это вопрос структуры. В растре текст впаян в пиксели, и с каждым новым языком всё приходится делать заново. Встроенный SVG оставляет текст там, где его можно заменить, поэтому при росте числа языков затраты почти не меняются. Разница между двумя подходами проявится не сейчас, а на третьей переделке.
Заранее решить нужно всего две вещи: будет ли эта графика меняться дальше и насколько английский длиннее китайского. Первое определяет подход, второе — запас. Ответы на оба вопроса есть до начала работы; если обнаружить это после запуска, расплата обычно — полная переделка.
Запомнить можно так: текст на графике должен оставаться там, где его можно заменить, а запас по вёрстке закладывайте исходя из того, что английский длиннее китайского в 1,3–1,5 раза.