У повному скриншоті сторінки три пастки: ледиме завантаження, прилипле меню й нескінченна стрічка

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

Повний скриншот знімає сторінку цілком, звичайний - один екран

Повноту довгого скриншоту визначає вьюпорт: вікно, яким браузер показує сторінку, а знімок усієї сторінки має крокнути за нього й забрати весь вертикальний вміст. Натисніть 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. За вагою: наддовгі сторінки легко стартують із кількох мегабайтів, і якщо вкладення відхилили - спершу стисніть; у матеріалі про стискання зображень розібрано баланс якості й розміру. А якщо зі сторінки вам насправді потрібен набір картинок, а не верстка цілком, замість гігантського довгого кадру візьміть оригінали напряму через масове завантаження зображень - довгий скриншот зберігає панораму, масове завантаження забирає оригінали, і кожен шлях зайнятий своєю справою.

Підсумок

Повнота довгого скриншоту вирішується до зйомки: спершу оберіть вьюпорт пристрою, потім перевірте сторінку на ледиме завантаження, прилипле меню й нескінченну стрічку. Публічні сторінки проходять чотири кроки; після зйомки формат обирається під задачу, а важкий файл стискається. Для листувань з підтримкою, товарних сторінок і знімків профілів одна довга картинка - найпростіший спосіб зберегти копію.

Поширені питання

Чи можна долати порожні блоки в довгому скриншоті?

Так, але змінивши порядок. Порожній блок означає, що картинку взагалі не запитували. Прокрутіть сторінку зверху вниз один раз, щоб усі зображення завантажилися, і зніміть заново. Інструмент не запускає завантаження сторінки за вас; порожнє не повернути.

Чи можна знімати сторінки, куди пускають лише після входу?

Ні. Інструмент працює з публічними сторінками: він не читає куки входу браузера і не заходить за авторизацію, пейволли й обмеження доступу. Контент, видимий лише після входу, поза його зоною - це межа інструмента, а не питання налаштувань.

Чому меню трапляється на моєму довгому скриншоті кілька разів?

Прилипла навігація і плавучі кнопки прибиті до вьюпорта, і кожен склеєний кусок несе їх. Перевірте сторінку на такі елементи до зйомки; якщо вони є, повтори у довгій картинці - норма. На окремих сторінках вимикання прилиплого стилю і пересйомка дають чистіший результат.