Звичайний скріншот і скріншот усієї сторінки
Звичайний скріншот — це рівно те, що зараз на моніторі: видима частина сторінки, панель браузера, можливо, шматок панелі задач. Скріншот усієї сторінки знімає весь документ від верху до футера, разом з усім, до чого зазвичай треба прокручувати, одним високим зображенням.
Повна версія потрібна, коли контекст важить не менше за деталі:
- Аудит лендингів і PPC — надіслати клієнту коментарі до кожного блоку, а не лише до першого екрана.
- Аналіз конкурентів — зберегти сторінку конкурента такою, якою вона була в конкретну дату.
- Перегляд дизайну й контенту — читати довгу сторінку згори донизу одним зображенням, а не десятьма окремими шматками.
- Документування й докази — зафіксувати умови, ціни чи рекламний лендинг, поки їх не змінили.
Склеювати десять звичайних скріншотів вручну можна, але це повільно, і шви ніколи не збігаються ідеально. Кожен спосіб нижче прокручує й склеює за вас.
Спосіб 1: вбудована команда Chrome «Capture full size screenshot» (без розширення)
У Chrome є функція скріншота всієї сторінки, схована в інструментах розробника. Щоб нею скористатися, нічого знати про розробку не треба:
- Відкрийте потрібну сторінку й дочекайтеся повного завантаження. Один раз прокрутіть донизу, щоб підвантажилися ледачі картинки, і поверніться нагору.
- Відкрийте DevTools: Ctrl+Shift+I на Windows, Cmd+Option+I на Mac (або F12).
- Відкрийте меню команд: Ctrl+Shift+P на Windows, Cmd+Shift+P на Mac.
- Введіть screenshot і оберіть Capture full size screenshot (якщо DevTools українською — команда називатиметься інакше, шукайте за словом «знімок»).
- Chrome збереже PNG усієї сторінки в папку «Завантаження».
У тому самому меню є Capture node screenshot (спершу виберіть елемент на панелі Elements, щоб зняти лише цей блок) і Capture area screenshot. Щоб отримати мобільну версію сторінки, натисніть іконку пристрою в DevTools (Ctrl+Shift+M / Cmd+Shift+M), оберіть розмір телефона й запустіть «Capture full size screenshot» — отримаєте всю мобільну верстку одним зображенням. Зручно, щоб перевірити, як лендинг виглядає на телефоні.
Де слабке місце: щоразу п'ять кроків, редактора немає (стрілки чи розмиття доведеться додавати в іншій програмі), і файл однаково треба кудись завантажити, щоб поділитися. До того ж знімається лише основна прокрутка сторінки — вебзастосунки, де контент прокручується всередині панелі (Gmail, Notion, дашборди, багато адмінок), виходять одним екраном, а решта обрізається.
Спосіб 2: розширення для Chrome (в один клік)
Розширення робить те саме прокручування й склеювання з кнопки на панелі й зазвичай відкриває результат у редакторі. З розширенням DashShot це виглядає так:
- Натисніть іконку DashShot на панелі Chrome.
- Оберіть Уся сторінка. Розширення прокрутить сторінку й склеїть усі частини в одне зображення.
- Знімок відкриється в редакторі в новій вкладці — додайте стрілки, нумеровані виноски, текст або пікселізуйте персональні дані.
- Скопіюйте посилання й надішліть. Отримувач відкриє його в будь-якому браузері без реєстрації.
На реальних сторінках важать дві деталі. По-перше, якщо сторінка прокручується всередині контейнера, а не всього вікна, розширення знаходить цю панель і знімає її, а не повертає один екран, — саме там, де спосіб із DevTools не працює. По-друге, воно працює на будь-якій сторінці, яку ви можете відкрити в Chrome, зокрема за логіном, бо знімок робиться у вашій власній сесії браузера. Є й знімок із затримкою — для сторінок, де на момент захоплення має бути відкрите меню чи стан при наведенні.
Знімок усієї сторінки й саме розширення безкоштовні. Інші популярні розширення — найвідоміше GoFullPage — теж добре прокручують і склеюють; різниця переважно в тому, що відбувається після знімка: редактор, посилання, історія.
Спосіб 3: «Знімок вебсторінки» в Microsoft Edge
Якщо у вас є Edge (він постачається з Windows), натисніть Ctrl+Shift+S на будь-якій сторінці, оберіть Захопити всю сторінку — Edge відкриє результат у простому режимі розмітки, де можна малювати, копіювати й зберігати. Швидко й надійно на звичайних сторінках, а з вебзастосунками з внутрішньою прокруткою — ті самі обмеження.
Спосіб 4: вбудований скріншотер Firefox
У Firefox знімок усієї сторінки вбудований уже багато років. Клацніть правою кнопкою будь-де на сторінці, оберіть Зробити знімок (або Ctrl+Shift+S / Cmd+Shift+S) і натисніть Зберегти всю сторінку. Зображення можна скопіювати або завантажити. Якщо скріншот усієї сторінки потрібен зрідка, відкрити сторінку у Firefox часто швидше, ніж будь-які обхідні шляхи в Chrome.
| Спосіб | Кроків | Редактор | Посилання | Сторінки з внутрішньою прокруткою |
|---|---|---|---|---|
| Chrome DevTools | 5 | Ні | Ні, лише файл | Ні |
| Розширення DashShot | 2 | Так | Так, одразу | Так |
| Edge | 2 | Проста розмітка | Ні | Ні |
| Firefox | 2 | Ні | Ні | Ні |
А вбудовані інструменти Windows і Mac?
Ні «Ножиці» Windows (Win+Shift+S), ні Cmd+Shift+4 / Cmd+Shift+5 на macOS не вміють знімати сторінку з прокручуванням — вони бачать лише те, що зараз на екрані. Коли вас просять «просто зробити скрін усієї сторінки», мають на увазі один зі способів у браузері вище. Окремий лайфхак для Mac: Safari вміє експортувати сторінку в PDF через Файл → Експортувати як PDF — зручно для архіву текстових сторінок, але анотувати такий файл незручно.
Коли скріншот усієї сторінки виходить кривим — і як це виправити
Липка шапка повторюється по всій сторінці. Шапки й чат-віджети з фіксованим положенням лишаються на екрані під час прокручування, і деякі інструменти вклеюють їх у кожен фрагмент. Що робити: перед знімком прокрутіть на самий верх, закрийте чат-віджети й банери cookie, а якщо шапка все одно повторюється — скористайтеся способом через DevTools: він рендерить сторінку як одне високе вікно й зазвичай цієї проблеми не має.
Картинки порожні або сірі. Багато сайтів завантажують зображення лише тоді, коли ви до них докручуєте. Що робити: перед знімком один раз повільно прокрутіть сторінку донизу, потім поверніться нагору.
Знімається лише один екран. Найімовірніше, сторінка прокручується всередині контейнера (типово для вебзастосунків і дашбордів), а не всього вікна. Що робити: беріть розширення, яке розпізнає контейнери з прокруткою, або знімайте панель частинами.
Нескінченна стрічка ніколи не закінчується. Стрічки, які довантажують контент під час прокручування, не мають справжнього низу. Що робити: прокрутіть до потрібного місця й зробіть скріншот області або знімайте частинами.
Зображення величезне або обрізається. Дуже довгі сторінки дають зображення заввишки в десятки тисяч пікселів, які деякі програми відмовляються відкривати, а браузери можуть обмежувати. Що робити: знімайте лише потрібну частину або розбийте дуже довгу сторінку на два-три знімки.
Анімації й поп-апи потрапляють посеред зображення. Що робити: дочекайтеся кінця анімацій, закрийте поп-апи й зніміть ще раз.
Поради для скріншотів усієї сторінки, які ви комусь надсилаєте
- Позначте головне. Зображення на 9 000 пікселів без позначок змушує читача шукати. Дві-три нумеровані виноски підкажуть, куди дивитися й у якому порядку.
- Розмийте персональні дані. На сторінках за логіном часто видно імена, email чи деталі замовлень. Пікселізуйте їх перед відправкою.
- Надсилайте посилання, а не вкладення на 15 МБ. PNG усієї сторінки важкі; посилання відкривається миттєво й працює на телефоні.
- Фіксуйте дату. Для аудиту конкурентів чи реклами дата знімка важить не менше за зміст — сторінки змінюються щотижня.