Как сделать скриншот сайта целиком: 7 способов для компьютера и телефона

Вы можете создать сайт визитку за 30 минут на платформе Tobiz.

Чтобы сделать скриншот сайта целиком, откройте страницу в Chrome или Edge, нажмите F12, затем Ctrl+Shift+P (на macOS — Cmd+Shift+P), введите screenshot и выберите Capture full size screenshot. Браузер сохранит длинный PNG всей страницы. В Firefox ещё проще: щёлкните правой кнопкой по странице, выберите «Сделать снимок экрана», затем «Сохранить всю страницу».

Если нужен только первый экран, используйте обычный снимок экрана. Для мобильной версии включите режим устройства в инструментах разработчика. Онлайн-сервис подходит для публичной страницы по URL, но обычно не увидит личный кабинет, авторизованный контент и некоторые элементы с защитой.

Какой способ выбрать

Подготовьте страницу перед снимком

1. Откройте именно тот URL и состояние страницы, которое нужно зафиксировать.
2. Дождитесь исчезновения индикатора загрузки и один раз прокрутите страницу до конца: так подгрузятся ленивые изображения.
3. Закройте cookie-баннер, чат и лишние всплывающие окна, если они не являются частью проверки.
4. Скройте персональные данные, номера заказов, телефоны, почту и платёжную информацию.
5. Зафиксируйте ширину окна. Для сравнения «до/после» она должна быть одинаковой.

Скриншот всей страницы в Chrome и Edge

1. Откройте нужную страницу.
2. Нажмите F12 или Ctrl+Shift+I. На macOS используйте Cmd+Option+I.
3. Откройте командное меню сочетанием Ctrl+Shift+P или Cmd+Shift+P.
4. Введите screenshot.
5. Выберите Capture full size screenshot. PNG появится в папке загрузок.

В том же меню доступны снимок видимой области и отдельного HTML-элемента. Это удобно, когда в отчёт нужен не весь сайт, а, например, форма заявки или карточка товара.

Скриншот всей страницы в Firefox

1. Щёлкните правой кнопкой мыши по свободной области страницы.
2. Выберите «Сделать снимок экрана».
3. Нажмите «Сохранить всю страницу» или выделите нужную область.
4. Скопируйте изображение в буфер либо сохраните файл.

Если пункт не показывается, проверьте меню действий страницы и актуальность Firefox. Официальная справка Mozilla описывает встроенный инструмент без установки расширений.

Скриншот в Яндекс Браузере

Яндекс Браузер построен на Chromium, поэтому универсальный способ — инструменты разработчика: F12 → Ctrl+Shift+P → screenshot → Capture full size screenshot. Названия команд могут отображаться на английском даже при русском интерфейсе. Если нужна только видимая область, используйте штатный снимок Windows или macOS.

Как сделать скриншот мобильной версии на компьютере

1. Откройте DevTools и нажмите значок телефона и планшета — Toggle device toolbar.
2. Выберите модель устройства либо задайте ширину вручную, например 390 px.
3. Обновите страницу, чтобы адаптивные стили загрузились заново.
4. Проверьте меню, формы и горизонтальную прокрутку.
5. Запустите Capture full size screenshot.

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

Как сделать длинный скриншот на iPhone, iPad и Android

iPhone и iPad

В Safari сделайте обычный снимок экрана, коснитесь появившейся миниатюры и выберите вкладку «Вся страница». В зависимости от версии iOS результат можно сохранить как PDF либо изображение. Эта функция доступна не во всех приложениях.

Android

Сделайте обычный снимок сочетанием кнопок устройства. Если система поддерживает длинный снимок, нажмите «Увеличить область», «Захватить больше» или похожую команду и задайте границу. Название зависит от версии Android и производителя.

Онлайн-сервисы для скриншота сайта по ссылке

Онлайн-сервис открывает указанный URL на своём сервере и возвращает изображение. Такой вариант удобен, если нужно быстро снять публичный лендинг, выбрать ширину экрана или получить PNG без установки программы.

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

Примеры инструментов: ScreenshotOne, Rechecker Screenshot Tool, ранее использовавшиеся в статье S-shot и Screenshot Machine. Для регулярной автоматизации выбирайте сервис с документированным API, а не имитацией ручного клика.

Три практических примера

Пример 1. Сохранить лендинг целиком перед изменениями

Маркетолог собирается заменить первый экран и порядок блоков. Он открывает лендинг, прокручивает его до конца, закрывает чат и делает полноразмерный PNG через Chrome DevTools. После правок повторяет снимок при той же ширине окна. Два файла позволяют проверить, не исчезли ли форма, отзывы и подвал.

Пример 2. Проверить мобильную версию

Владелец сайта включает viewport 390 px, обновляет страницу и делает длинный снимок. На изображении видно, что заголовок занимает пять строк, а кнопка уходит ниже первого экрана. Он сокращает заголовок, снова снимает страницу и сравнивает результат на реальном смартфоне.

Пример 3. Приложить понятный баг-репорт

Вместо фразы «форма сломалась» пользователь делает снимок отдельного блока, отмечает проблемное поле и записывает URL, браузер, ширину окна и время проверки. Разработчик сразу воспроизводит проблему, потому что видит контекст и параметры.

Почему скриншот получается неполным

PNG, JPEG или PDF

• PNG — лучший вариант для интерфейсов, текста и баг-репортов: линии остаются чёткими.
• JPEG — легче по размеру, но мелкий текст может получить артефакты.
• PDF — удобен для длинной страницы, печати и передачи многостраничного результата.

Чек-лист готового скриншота

• Захвачена нужная область, а не случайная вкладка.
• Все изображения и шрифты успели загрузиться.
• На снимке нет паролей, телефонов, почты и других лишних данных.
• URL, дата и ширина экрана записаны отдельно, если снимок используется для проверки.
• Текст читается без увеличения в несколько раз.
• Имя файла понятно: например, landing-mobile-390-before.png.

Как использовать скриншоты при работе с сайтом TOBIZ

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

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

Как сделать скриншот сайта целиком без программы?

Используйте DevTools в Chrome/Edge или встроенный инструмент Firefox. Оба способа работают без расширения.

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

Да, но делайте это локально в своём браузере. Онлайн-сервис по URL обычно не получает вашу авторизованную сессию.

Почему нижние изображения не попали в файл?

Скорее всего, используется lazy-load. Сначала медленно прокрутите страницу до конца и убедитесь, что картинки появились.

Как сделать скриншот сайта в мобильном размере без телефона?

Включите панель устройств в DevTools, выберите ширину смартфона, обновите страницу и запустите полноразмерный снимок.

Какой формат лучше для отправки разработчику?

Для одного экрана или блока — PNG. Для очень длинной страницы удобнее PDF или несколько подписанных PNG.

Проверенные источники

• Chrome for Developers: режим устройства в DevTools
• Mozilla Support: снимки страниц в Firefox
• Apple Support: снимок экрана на iPhone
• Справка Android: снимок экрана
• Сравнение способов для браузеров и телефонов

Наш конструктор сайтов подойдет для решения любых задач: от простой визитки до мощного интернет-магазина.