При адаптации изображений для мобильных устройств обработка текста на них — распространённая, но часто упускаемая из виду проблема. Если текст на изображении отображается нечётко, слишком мелко или искажается на телефоне, это напрямую влияет на пользовательский опыт и имидж компании. Ниже приведены несколько практических подходов, которые можно использовать при создании корпоративного сайта.
1. Контроль фактического размера текста на изображении
При создании изображения для ПК, если текст на нём задан в пикселях, при масштабировании изображения под экран телефона текст может стать очень мелким. Рекомендуется при создании изображения устанавливать размер шрифта больше обычного, например, основной текст не менее 24px, заголовки не менее 36px. Также желательно, чтобы ширина изображения соответствовала типичной ширине мобильных устройств (например, 750px), чтобы текст оставался читаемым после масштабирования. Можно также использовать векторную графику (например, SVG), чтобы избежать искажений при масштабировании.
2. Использование SVG или иконочных шрифтов вместо текста на изображении
Для иконок, кнопок или небольшого объёма текста лучше использовать SVG или иконочные шрифты. SVG — это векторный формат, который не размывается при масштабировании и поддерживает адаптивность. Иконочные шрифты также масштабируются вместе с текстом и позволяют менять цвет. Таким образом, не нужно встраивать текст в изображение, что делает адаптацию более гибкой. Например, навигационные иконки, кнопки «Поделиться» и т.п. подходят для такого подхода.
3. Замена текста на изображении с помощью CSS
Если текст на изображении носит декоративный характер, можно написать его непосредственно в HTML, а с помощью CSS управлять его положением и стилем, накладывая на изображение. Тогда текст будет изменяться в соответствии с настройками шрифта устройства и станет более доступным для поисковых систем. Например, заголовок на баннере можно разместить с помощью тега <h1>, а затем позиционировать его поверх изображения через CSS.
4. Использование адаптивных изображений
В случаях, когда использование изображения неизбежно, можно применить технологию адаптивных изображений. С помощью атрибутов srcset и sizes в HTML5 можно предоставлять изображения разного разрешения для разных ширин экрана. Или использовать элемент <picture>, чтобы загружать изображения с разной обрезкой или текстом в зависимости от устройства. Это позволит показывать на телефоне версию изображения, оптимизированную для маленького экрана.
5. Избегание текста на изображениях в ключевых местах
Если текст является основным содержимым (например, заголовки, описания), лучше использовать HTML-текст, а не изображение. Текст на изображении не способствует SEO и не распознаётся программами чтения с экрана. Только в случаях, когда требуется особый шрифт или строгие требования к вёрстке, стоит размещать текст в виде изображения. Взвешивая все за и против, лучше использовать веб-шрифты для достижения специальных эффектов.
Напоминание: При создании корпоративного сайта текст на изображениях обычно подходит для создания атмосферы или декора, а ключевую информацию рекомендуется выводить в виде реального текста. Это упрощает адаптацию для мобильных устройств и улучшает оптимизацию контента.
6. Тестирование на разных устройствах
Независимо от выбранного метода, перед запуском необходимо протестировать на реальных телефонах. Проверьте, чётко ли отображается текст на изображении, подходит ли размер шрифта, нужно ли вносить корректировки. Составьте список тестов, включающий разные размеры экранов, разные браузеры и поведение при масштабировании. Своевременно выявляйте проблемы и исправляйте их.
Заключение
Ключ к адаптации текста на изображениях для мобильных устройств — планирование на ранних этапах. Учитывайте отображение на мобильных устройствах ещё на стадии дизайна и разумно выбирайте технические решения. Обычно предпочтение отдаётся реальному тексту, затем SVG или иконочным шрифтам, и только в последнюю очередь — встроенному в изображение тексту. Это обеспечит хороший мобильный опыт, а также упростит обслуживание и оптимизацию сайта.
