У полного скриншота страницы три ловушки: ленивая загрузка, прилипающее меню и бесконечная лента

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

Полный скриншот снимает страницу целиком, обычный — один экран

Полноту длинного скриншота определяет вьюпорт: окно, которым браузер показывает страницу, а снимок всей страницы должен шагнуть за него и забрать весь вертикальный контент. Нажмите Print Screen или сделайте системный снимок — получите ровно то, что во вьюпорте. Товарная страница легко уходит на семь-восемь экранов; снимать по экрану и склеивать вручную долго и чревато сдвигами. Чтобы забрать всё за один раз, поручите инструменту прокрутить до конца и собрать. В Chrome DevTools есть официальная команда Capture full size screenshot, и документация уточняет, что она снимает и то, что «не видно во вьюпорте». Инструмент полного скриншота VidBrowser идёт по той же логике, заменяя командную строку одним полем адреса.

Где длинный скриншот ломается: пустые блоки, повторяющееся меню и страницы без конца

Почти любой неполный длинный скриншот сводится к этим трём причинам. Каждая рождается самой конструкцией страницы; зная их, вы не примете сбой страницы за ошибку инструмента:

- Пустые блоки: многие страницы используют ленивую загрузку — картинка запрашивается, только когда прокрутка подходит близко. Инструмент проходит сверху вниз, и всё незатронутое остаётся пустым.

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

- Страницы без конца: бесконечные ленты не имеют дна, и инструменту неизвестно, где остановиться; сверхдлинные страницы упираются ещё и в лимиты высоты картинки, памяти и выходного формата.

Вьюпорт устройства решает, как выглядит длинный скриншот: десктоп, планшет и телефон

Тот же адрес при другом вьюпорте устройства даёт другую картинку. Страница переключает адаптивную вёрстку по ширине вьюпорта: десктоп — широкие многоколоночные макеты, телефон — узкую одну колонку. Нужна страница такой, какой её видит пользователь компьютера, — берите десктоп; интересно, что видит мобильный посетитель, — берите телефонный профиль. Это выбор вёрстки, а не качества — решите до съёмки.

Четыре шага, чтобы сохранить страницу целиком одной длинной картинкой

Вход находится в наборе инструментов VidBrowser, всего четыре шага:

Шаг 1: Скачайте и установите VidBrowser

Точка установки — страница загрузчика видео VidBrowser. Это настольный видеобраузер для Windows и Mac: смотрит видео, вырезает фрагменты и сохраняет локально, со встроенными загрузкой и записью.

Шаг 2: Откройте инструмент полного скриншота

Откройте «Инструменты» в меню слева, найдите пункт полного скриншота или зайдите прямо на страницу инструмента.

Шаг 3: Введите адрес и выберите настройки

Вставьте адрес публичной страницы, которую вам разрешено снимать, выберите вьюпорт устройства (десктоп, планшет, телефон), диапазон (вся страница или видимая область) и выходной формат (PNG, JPG, WebP).

Шаг 4: Сгенерируйте и скачайте

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

Три типа контента, которые стоит снимать длинной картинкой: переписки, товарные страницы и профили

Настоящая ценность длинного скриншота — приколоть страницу, которая меняется или исчезает, к версии, которая не меняется. Чаще всего встречаются три сценария:

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

- Товарные страницы для сравнения и архива: цены, характеристики и наличие меняются постоянно. Длинная картинка хранит вёрстку вместе с цифрами, и будущее сравнение опирается на факты.

- Снимки профилей и главных страниц: соцсети обновляются и удаляют. Снимайте регулярно — изменения видны сразу; полный снимок страницы ещё и готовый материал для веб-дизайна.

Хранение и разбор длинных скриншотов: формат, вес и другой путь

Длинные скриншоты от природы длинные и тяжёлые; два коротких дела после сохранения окупятся позже. По формату: PNG без потерь и лучше подходит тексту и деталям интерфейса, JPG легче и уместен на страницах с фотографиями, WebP ещё легче, но старый софт может не открыть его — если так, конвертируйте по материалу перевода WebP в JPG. По весу: сверхдлинные страницы легко стартуют с нескольких мегабайт, и если вложение отклонили — сначала сожмите; в материале о сжатии изображений разобран баланс качества и размера. А если со страницы вам на самом деле нужен набор картинок, а не вёрстка целиком, вместо гигантского длинного кадра возьмите оригиналы напрямую через массовую загрузку изображений — длинный скриншот хранит панораму, массовая загрузка забирает оригиналы, и каждый путь занят своим делом.

Итог

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

Частые вопросы

Можно ли доложить пустые блоки в длинном скриншоте?

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

Можно ли снимать страницы, куда пускают только после входа?

Нет. Инструмент работает с публичными страницами: он не читает куки входа браузера и не заходит за авторизацию, пейволлы и ограничения доступа. Контент, видимый только после входа, вне его зоны — это граница инструмента, а не вопрос настроек.

Почему меню встречается на моём длинном скриншоте несколько раз?

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