Скриншот сайта нужен для превью в соцсетях, документации, мониторинга изменений, тестирования вёрстки. В этом руководстве разберём способы создания скриншотов: от простых онлайн-инструментов до программных API и headless-браузеров. Быстро сделать скриншот любого сайта можно в Screenshot Tool на reChecker.
Зачем нужны скриншоты сайтов
- Превью в соцсетях — Open Graph и Twitter Card показывают изображение при расшаривании ссылки
- Документация — иллюстрации в руководствах, справках, отчётах
- Мониторинг — визуальная проверка доступности и корректности отображения
- Тестирование — визуальные регрессии, сравнение вёрстки до и после изменений
- Архивирование — сохранение вида страницы на момент времени
Онлайн-инструменты
Screenshot Tool на reChecker
Инструмент скриншотов reChecker позволяет сделать скриншот любого публичного URL. Введите адрес — получите изображение страницы. Удобно для разовых задач без установки софта.
Особенности онлайн-сервисов
- Не требуют установки
- Ограничения по количеству запросов (часто в бесплатных тарифах)
- Зависимость от доступности сервиса
- Для автоматизации нужен API
Проверьте, поддерживает ли сервис нужные опции: полноэкранный скриншот, мобильный viewport, задержку загрузки (для SPA).
API для скриншотов
Платные и бесплатные API предоставляют программный доступ к скриншотам.
Типичные параметры API
| Параметр | Описание |
|---|---|
| url | Адрес страницы |
| width | Ширина viewport (px) |
| height | Высота viewport (px) |
| full_page | Полноэкранный скриншот (true/false) |
| format | PNG, JPEG, WebP |
| delay | Задержка перед скриншотом (мс) — для SPA |
| user_agent | Строка User-Agent |
Пример запроса (гипотетический API)
GET https://api.example.com/screenshot?url=https://example.com&width=1920&full_page=true
Ответ — бинарное изображение или URL на сохранённый файл.
Популярные сервисы
- Screenshotone — API с настройкой viewport, задержки, блокировки рекламы
- Urlbox — скриншоты, превью, PDF
- ApiFlash — на базе headless Chrome
У каждого свой тариф и лимиты. Для высоконагруженных сценариев рассмотрите self-hosted решение.
Headless-браузеры
Полный контроль над процессом — через headless Chrome или аналог. Скриншот делается программно, без внешних сервисов.
Установка Puppeteer
npm install puppeteer
Puppeteer автоматически скачивает Chromium. Для использования системного Chrome установите puppeteer-core и укажите путь к исполняемому файлу.
Puppeteer (Node.js)
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1920, height: 1080 });
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
await page.screenshot({
path: 'screenshot.png',
fullPage: true
});
await browser.close();
})();
Опции screenshot:
path— путь к файлуfullPage— вся страница или только viewporttype— 'png' | 'jpeg' | 'webp'quality— для jpeg/webp (0–100)clip— область{ x, y, width, height }
Playwright (Node.js, Python, др.)
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await browser.close();
})();
Playwright поддерживает несколько браузеров (Chromium, Firefox, WebKit). Удобен для кросс-браузерного тестирования.
Мобильный viewport
Эмуляция мобильного устройства:
await page.setViewport({
width: 375,
height: 812,
isMobile: true,
hasTouch: true,
isLandscape: false
});
Или через эмуляцию конкретного устройства:
const iPhone = puppeteer.devices['iPhone 12'];
await page.emulate(iPhone);
Задержка загрузки
SPA и страницы с отложенным контентом могут не успеть отрисоваться. Добавьте задержку:
await page.goto('https://example.com');
await page.waitForTimeout(3000); // 3 секунды
await page.screenshot({ path: 'screenshot.png' });
Или дождитесь конкретного элемента:
await page.waitForSelector('.main-content', { timeout: 10000 });
await page.screenshot({ path: 'screenshot.png' });
Обработка ленивого контента
Изображения с loading="lazy" и контент ниже fold могут не загрузиться. Прокрутите страницу перед скриншотом:
await page.evaluate(async () => {
await new Promise((resolve) => {
let totalHeight = 0;
const distance = 500;
const timer = setInterval(() => {
window.scrollBy(0, distance);
totalHeight += distance;
if (totalHeight >= document.body.scrollHeight) {
clearInterval(timer);
resolve();
}
}, 100);
});
});
await page.screenshot({ path: 'screenshot.png', fullPage: true });
Форматы вывода
| Формат | Применение |
|---|---|
| PNG | Максимальное качество, прозрачность, больший размер |
| JPEG | Меньший размер, без прозрачности |
| WebP | Компромисс качества и размера |
Для превью в соцсетях обычно достаточно JPEG 80–90% качества. Для документации и тестов — PNG.
Ограничения и подводные камни
- Авторизация — страницы за логином требуют cookies или токенов
- Капча и защита — сервисы могут блокировать автоматизированные запросы
- Таймауты — медленные страницы не успевают загрузиться
- Право на изображение — скриншоты чужих сайтов могут иметь ограничения по использованию
- Ресурсы — headless-браузер потребляет память и CPU
Рекомендации по использованию
- Для разовых скриншотов — Screenshot Tool на reChecker
- Для автоматизации в проекте — Puppeteer или Playwright
- Для продакшен-сервиса с высокой нагрузкой — выделенный пул воркеров с headless-браузерами или платный API
- Для визуальных регрессий — интеграция в CI (Percy, Chromatic, кастомные скрипты)
Сделать скриншот сайта онлайн можно в Screenshot Tool на reChecker.
Сравнение инструментов
| Инструмент | Тип | Плюсы | Минусы |
|---|---|---|---|
| reChecker Screenshot | Онлайн | Бесплатно, без установки | Ограничения по частоте |
| Puppeteer/Playwright | Локально | Полный контроль, бесплатно | Требует Node.js, ресурсы |
| Платный API | Облако | Масштабируемость | Стоимость, лимиты |
Блокировка ресурсов для ускорения
Чтобы ускорить скриншот, можно блокировать изображения, шрифты, рекламу:
await page.route('**/*', (route) => {
const type = route.request().resourceType();
if (['image', 'font', 'media'].includes(type)) {
route.abort();
} else {
route.continue();
}
});
Скриншот будет без картинок — только вёрстка. Используйте для тестов структуры.
Скриншоты с авторизацией
Для страниц за логином передайте cookies:
await page.setCookie({
name: 'session_id',
value: 'xxx',
domain: 'example.com'
});
await page.goto('https://example.com/dashboard');
await page.screenshot({ path: 'dashboard.png' });
Или используйте сохранённое состояние браузера (Puppeteer userDataDir).
Резюме
Для разовых задач — Screenshot Tool. Для автоматизации — Puppeteer или Playwright. Для продакшен-сервиса — платный API или self-hosted пул воркеров. Учитывайте задержки для SPA и необходимость авторизации для закрытых страниц.