Изображения в мобильной версии: сохраняем смысл и доступность

На компьютере схема объясняет весь порядок действий, а на телефоне вместо неё пустое место. Иногда картинку скрывает мобильный стиль, иногда она не загружается без нажатия. В обоих случаях из инструкции пропадает важный шаг. Разберём, как оставить изображение доступным и понятным на узком экране.

Разметка изображения

<figure>
  <img src="/images/backup-flow.png"
       width="960" height="540"
       alt="Схема: исходные файлы, архив и отдельная проверка восстановления">
  <figcaption>После создания архива выполняется пробное восстановление.</figcaption>
</figure>

В src нужно указать адрес своей картинки. Адрес должен вести к настоящему доступному файлу. Размеры описывают соотношение сторон, а внешний вид на узком экране настраивается стилями. Главная задача — оставить важную схему и её контекст в мобильном содержимом. Снижение разрешения не должно делать подписи на изображении нечитаемыми.

Пишем alt под назначение

Описание alt передаёт существенный смысл изображения в данном месте статьи. Для схемы резервирования полезно назвать этапы, а для снимка интерфейса — действие, которое он объясняет. Повторение поисковых фраз через запятую не помогает понять картинку. Если вся важная информация находится внутри сложной схемы, её следует дополнительно объяснить обычным текстом рядом: одно короткое описание не вместит полноценную инструкцию.

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

Отделяем внешний вид от загрузки

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

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

Источники и дальнейшее чтение

• Google: мобильное индексирование
• Google: рекомендации по изображениям