Що губиться, коли сторінка стає картинкою: шар, який малює скрипт
Що губиться, коли сторінка стає картинкою, залежить від того, наскільки сторінка тримається на скрипті. У Сторінка в картинку читається розмітка, і за нею малюється зображення. У цьому браузері скрипти не виконуються. Усе, що скрипт додав після завантаження, до картинки не потрапляє.
Усе, що записано в розмітці, на місці: заголовки, абзаци, таблиці, рамки, колір тла, розмір шрифту, міжрядковий інтервал, зображення, що входять до документа. Усе, що скрипт зробив потім, зникає: другий слайд, коментарі, що розкриваються на натиск, список, який наповнюється при прокручуванні, повідомлення після надсилання. Це не питання якості. Цього блоку ніколи не було в розмітці.
Сторінка в картинку бере тільки статичний вміст. Скрипти не виконуються, сторінки після входу не з’являються, зображення з іншого домену теж.
Без скрипта сторінка застигає на першому малюнку
Карусель, яку гортає скрипт, виходить першим слайдом. Зображення, що підвантажується при прокручуванні, виходить порожнім місцем. Панель, що відкривається кнопкою, до картинки не потрапляє взагалі. Якщо потрібна фраза живе лише в цій панелі, інструмент її не дістане.
Сторінка після входу теж не з’являється. Попросіть вміст, видимий лише після входу, і отримаєте форму входу або порожнечу. У ReadyIMG немає ні входу, ні сервера акаунтів, що приймає зображення, і він не входитиме на жоден сайт за вас. Тут читається лише відкрита розмітка, до якої дістає цей браузер.
Зображення з іншого домену лишаються порожніми
Якщо картинка на сторінці віддається з іншого домену, під час малювання ці пікселі прочитати не можна, і місце лишається порожнім. Зображення з того самого сайту виходять нормально. Біла прогалина, зламана рамка, контур без вмісту: найчастіше це воно, а не зіпсований файл.
- Вміст зі скриптів: другий слайд, коментарі на натиск, списки при прокручуванні.
- Сторінки після входу: ви отримуєте форму входу або порожнечу.
- Зображення з іншого домену: місце порожнє, лише рамка або біла пляма.
Адреса не читається — вставте HTML
Бувають сторінки без читабельної адреси в браузері: файл ще на диску, сторінка, що відкривається лише у внутрішній мережі, фрагмент, зібраний на місці. Тоді вставте вихідний HTML. Це та сама статична розмітка, і губиться те саме.
Ширина вікна рахується від 320. Вузька й широка — дві різні верстки, та сама сторінка вийде по-різному. Спершу вирішіть, для кого картинка. Для телефона беріть вузьку ширину.
Три формати на виході, оберіть один
Можна отримати JPG, PNG або SVG, у який загорнуто растрове зображення. Для знімків екрана, сторінок з великою кількістю тексту й вставок у документ лишайте PNG: краї літер чистіші. Де приймають лише JPG, вибирайте JPG. Той SVG — обгортка навколо пікселів, а не вектор, що масштабується безкінечно. Збільшений, він розмивається, як будь-який растр.
Якщо результат заважкий для надсилання, проганьте його через Стисни файл. Стискається копія, яку ви щойно завантажили. Знята сторінка лишається як була.
Сторінка в картинку робить одну сторінку за раз. Сорок файлів одразу вона не бере. Сторінка готова, завантажили, перейшли до наступної.
Для чого ця картинка годиться
Зафіксувати верстку для того, хто не відкриє посилання. Зберегти слід того, як сторінка виглядала, якщо завтра вона зміниться. Вкласти сторінку в документ, щоб читачеві не виходити. Усе це працює.
Для зйомки процесу не годиться: проміжні кадри анімації при прокручуванні, скелетони завантаження, вигляд при наведенні. Для цього потрібні працюючі скрипти, а тут вони не працюють.
З мережею стикаються лише дві речі
Коли сторінка відкривається, цей візит рахує 51.LA. Рахується те, що хтось відкрив сторінку, а не ваші файли зображень. Як обробляються файли позначає цю межу: зображення не йдуть у ReadyIMG, входу й реєстрації тут немає.
Друге — перший запуск вирізання об’єкта, який завантажує модель розпізнавання в кеш цього пристрою. Це інший інструмент і до зйомки сторінки не має відношення. Обчислення лишаються на цьому пристрої, а завантажуєте ви новий файл, зроблений тут.
Три погляди перед надсиланням
- Чи не обрізано текст. Широка верстка у вузькому вікні ламає заголовки на три рядки.
- Чи не зникло зображення. Якщо зникло, зніміть ще раз із картинкою з того самого сайту.
- Збережене — новий файл. Сторінка й початкові зображення лишилися на своїх місцях.
Черга живе лише всередині цього візиту. Оновите або закриєте сторінку, і все, що не завантажено, зникне. Заберіть потрібну картинку до того, як перейдете до наступної сторінки.
Якщо ще не починали, поверніться на Верстат, вставте адресу або HTML і відкрийте Сторінка в картинку. Чого бракує вашій картинці, ви тепер назвете.