Если при появлении баннера текст страницы внезапно уезжает вниз, сначала проверьте, было ли заранее оставлено место под рекламный блок. Быстрая загрузка картинки помогает посетителю, но не заменяет правильно заданные размеры. Для баннера-картинки важны пропорции изображения, для рекламы через iframe или скрипт — ещё и размеры внешнего контейнера.
Такие неожиданные перемещения называют сдвигами макета. Они мешают чтению и могут переместить ссылку прямо перед нажатием. Ниже — порядок проверки, который поможет найти причину сдвига.
Отделите картинку от рекламного места
В простом размещении баннер — это изображение внутри ссылки. В другом варианте страница сначала создаёт пустой блок, а рекламная система позже вставляет туда объявление. Размер файла и размер места на странице — разные параметры. Небольшая картинка тоже сдвинет текст, если браузер не знает, сколько высоты ей понадобится.
Запишите, что именно меняется: появляется весь рекламный блок, увеличивается его высота или меняются пропорции картинки. Это поможет передать задачу нужному специалисту. Например, у статичного изображения можно проверить HTML, а у сетевого объявления потребуется согласовать контейнер и разрешённые форматы с площадкой.
Для изображения задайте правильные пропорции
Атрибуты width и height у тега img помогают браузеру вычислить соотношение сторон ещё до загрузки картинки. В них указывают целые числа без единиц измерения. Это позволяет зарезервировать место, пока файл загружается.
Для условного изображения размером 1200 на 400 пикселей основа может выглядеть так:
<img src="/images/banner.jpg"
width="1200" height="400"
alt="Летние курсы: программа и запись"
style="max-width:100%;height:auto">Числа здесь относятся к примеру. Подставьте размеры своего файла. CSS ограничивает отображаемую ширину, а автоматическая высота сохраняет пропорции. Не задавайте случайную пару чисел только ради заполненных атрибутов: если пропорции окажутся неверными, место под картинку будет рассчитано неправильно.
Если для телефона изображение обрезано по-другому или используется отдельный макет, проверьте его пропорции отдельно. Одинаковые размеры в настройках настольного варианта не подтверждают правильность мобильного. Разработчику нужно согласовать размеры выбранного изображения и правила адаптивной вёрстки.
Для сетевой рекламы проверьте контейнер
Размеры картинки внутри объявления не решают задачу, если внешний рекламный блок появляется позднее и расталкивает соседние элементы. Место под него должно быть предусмотрено в исходной вёрстке. Для этого могут использоваться минимальная высота контейнера или заранее заданное соотношение сторон.
Не копируйте одно значение высоты на все экраны. Если слот допускает объявления разных размеров, уточните набор форматов для каждого диапазона ширины. Большой резерв уменьшает риск сдвига, но может оставлять пустое пространство. Маленький резерв не вместит более высокое объявление без изменения страницы. Этот выбор нужно согласовать с размещением, а не угадывать по одному показу.
Проверьте и ситуацию, когда объявление не пришло. Резкое удаление уже зарезервированного места тоже способно сдвинуть контент. Поведение пустого слота стоит определить заранее вместе с площадкой.
Как проверить исправление
- Откройте страницу заново и проследите за текстом непосредственно под баннером до и после загрузки рекламы.
- Повторите проверку на узком экране. Смена пропорций и переносы внутри блока могут проявиться только в мобильном варианте.
- Попросите разработчика записать загрузку в инструментах браузера и проверить сдвиги макета. Переместившийся абзац не всегда является причиной: его мог вытолкнуть блок выше.
- Проверьте несколько показов, а не только удачный первый. Сетевые объявления могут приходить разного размера; причина может проявляться после первоначальной загрузки.
- Сверьте результат с исходной задачей: текст не смещается при появлении баннера, изображение не искажено, объявление не обрезано, ссылка работает.
Если сдвиг остался, не продолжайте менять только баннер. Поздно появившийся виджет, загрузка шрифта или другой блок тоже могут перестроить страницу. Поиск причины должен опираться на наблюдаемую загрузку.
Уменьшение файла — отдельная задача: о нём есть материал как сократить вес баннера. А для самого перехода проверьте понятный alt-текст ссылки-картинки. Ни одно из этих улучшений само по себе не гарантирует стабильную высоту рекламного места.
Видео: размеры изображения в HTML
В уроке показана работа с img в настоящем редакторе кода и браузере. С 01:56 разбираются width и height. Это основа для баннера-картинки; размеры внешнего рекламного контейнера проверяются отдельно.
