Скриншот всей веб-страницы: как сохранить любой сайт как изображение

Последнее обновление: 13 сентября 2026 г. Измерения ниже получены в headless Chromium 151 на общедоступных статьях Википедии.

Клавиша скриншота сохраняет то, что помещается на мониторе. Веб-страница обычно гораздо длиннее, на телефоне выглядит иначе, а часть изображений загружает, только когда вы прокручиваете к ним. Эти три факта объясняют почти любой неудачный снимок сайта: страница обрывается на первом экране, «мобильная» версия на деле оказывается десктопной, или нижняя половина заполнена серыми заглушками.

Краткий ответ: как сделать скриншот всей веб-страницы?

Используйте встроенный в браузер снимок всей страницы для страниц, где вы вошли в аккаунт, и онлайн-сервис «HTML в изображение» для публичных страниц с нужной шириной устройства. В Firefox щёлкните по странице правой кнопкой, выберите «Сделать скриншот», затем «Сохранить всю страницу». В Chrome откройте DevTools, вызовите меню команд и выберите Capture full size screenshot.

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

Какой способ снимка подходит для вашей задачи?

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

Руководство Chrome по скриншотам в DevTools рассказывает и о снимке области или отдельного элемента, это удобно, когда нужен только один блок страницы. Mozilla описывает возможности скриншотов в Firefox, включая сохранение всей страницы.

Что на самом деле снимают «первый экран» и «вся страница»?

Снимок первого экрана — это ровно одна область просмотра: 1280 на 800 пикселей при типичной настройке компьютера. Снимок всей страницы отрисовывает весь прокручиваемый документ в одно высокое изображение. Разница больше, чем ожидает большинство.

Мы измерили статью Википедии «Cat» при ширине 1280 пикселей: высота прокрутки составила 42 077 пикселей, больше 52 первых экранов подряд. Наш инструмент ограничивает снимок всей страницы 12 000 пикселями: такое высокое изображение и так трудно смотреть и пересылать, а страницы с бесконечной прокруткой иначе не закончились бы никогда. Если нужна страница длиннее, снимайте её частями.

Высота влияет и на формат. WebP не может хранить изображения выше или шире 16 383 пикселей, поэтому очень длинный снимок может не сохраниться в WebP, хотя в PNG и JPG всё получится.

Какой формат выбрать для снимка веб-страницы?

Выбирайте PNG для страниц с текстом и интерфейсом, WebP для публикации в интернете, а JPG — только если получатель не принимает ни то, ни другое. Мы сохранили один и тот же снимок статьи «Cat» с большим числом фотографий, размером 1280 на 12 000 пикселей, тремя способами:

Страница из однотонного текста и интерфейса обычно сжимается в PNG гораздо лучше этой, насыщенной фотографиями, поэтому PNG остаётся стандартом для снимков интерфейса. Почему JPEG размывает мелкий текст, объясняет наше руководство по форматам скриншотов, а сравнение WebP, JPEG и PNG подробно разбирает компромиссы. Чтобы уменьшить снимок, не меняя формат, пропустите его через компрессор изображений.

Почему на скриншоте всей страницы пропадают изображения?

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

Наш тест показал эффект наглядно. В статье «Cat» 55 из 58 изображений помечены для ленивой загрузки. При мгновенном снимке 44 из 45 изображений ниже первых двух экранов были ещё пустыми. После прокрутки страницы до конца и возврата наверх пустых не осталось.

• Прокрутите страницу до конца и обратно перед снимком в DevTools или Firefox.
• Подождите секунду-другую после прокрутки, пока догрузятся последние изображения.
• Проверяйте готовый снимок с нижней трети — пропуски появляются именно там.

Наш инструмент «HTML в изображение» теперь сам выполняет такую прокрутку при снимке всей страницы. Мы добавили это после того, как получили цифры выше.

Почему мобильный скриншот показывает десктопную версию сайта?

Узкое окно — это не телефон. Многие сайты выбирают, какую вёрстку отдать, по строке user agent браузера, а не по ширине окна. MDN описывает такое определение браузера по user agent и объясняет, почему оно до сих пор распространено.

Мы дважды открыли статью Википедии «Screenshot» в области просмотра шириной 390 пикселей. С десктопным user agent сайт отдал десктопную вёрстку, втиснутую в узкое окно, высотой 7 544 пикселя. С user agent телефона он отдал настоящую мобильную версию высотой 2 299 пикселей.

Поэтому суженное окно десктопного браузера мало говорит о том, что видят посетители с телефонов. Режим устройства в Chrome меняет не только ширину, но и user agent; так же работают наши режимы телефона и планшета.

Почему онлайн-сервисы не снимают localhost, интранет и страницы за входом?

Онлайн-сервис загружает страницу на своём сервере, в новом браузере без cookie. Он никогда не видит ваших сохранённых входов, поэтому страница за авторизацией снимается как форма входа.

Кроме того, он отклоняет адреса частных сетей, например localhost, 192.168.x.x или корпоративный интранет. Позволять анонимным посетителям заставлять сервер запрашивать произвольные адреса — известная уязвимость, подделка серверных запросов (SSRF), описанная в обзоре SSRF от OWASP. Аккуратный сервис проверяет каждое соединение страницы, включая перенаправления, а не только введённый адрес.

Такие страницы снимайте встроенным снимком всей страницы в своём браузере. Он работает на вашем компьютере и в вашей сессии, поэтому видит ровно то же, что и вы.

Решение проблем со снимком сайта

Баннер или закреплённую шапку, закрывающую содержимое, проще убрать потом: обрежьте её инструментом обрезки, а не переснимайте страницу.

Чек-лист перед тем, как делиться снимком

1. Проверьте, что ширина соответствует устройству.
2. Осмотрите нижнюю треть на пустые изображения.
3. Убедитесь, что страница заканчивается где нужно.
4. Проверьте, не закрывают ли баннеры важное.
5. Уберите личные данные, скрытые от посетителей.
6. Для страниц с текстом оставьте PNG.
7. Запишите дату снимка.

Веб-страница постоянно меняется. Если снимок служит доказательством, образцом дизайна или отчётом об ошибке, дата — часть того, что он фиксирует.

Часто задаваемые вопросы

Можно ли сделать скриншот страницы, для которой нужен вход?

Не с помощью онлайн-сервиса, у которого нет доступа к вашему аккаунту; используйте снимок всей страницы в браузере, войдя в аккаунт.

Почему скриншот всей страницы получился обрезанным?

Многие сервисы ограничивают высоту; наш останавливается на 12 000 пикселях, а у страниц, подгружающих контент при прокрутке, нет естественного конца.

«HTML в изображение» — это то же самое, что скриншот сайта?

В обычном понимании да: оба способа отрисовывают страницу в браузере и сохраняют результат в файл изображения.

Какую ширину выбрать для мобильного снимка?

Возьмите 390 пикселей — CSS-ширину многих современных iPhone — вместе с user agent телефона, чтобы сайт отдал настоящую мобильную вёрстку.

Почему некоторые изображения выглядят как пустые рамки?

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

Можно ли снять только часть страницы?

Да; Chrome DevTools умеют снимать отдельный элемент, а ещё можно снять всю страницу и обрезать нужный фрагмент.

Хранит ли онлайн-сервис копию страницы?

Он загружает страницу во временном браузере, чтобы создать изображение; сколько хранится результат, смотрите в сведениях о конфиденциальности каждого сервиса.