Снимка на цялата страница във Firefox и рамка, с която тя пасва на страница в магазин или преглед на връзка

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

#Три начина да снимате цялата страница

От менюто. Щракнете с десния бутон върху празно място на страницата и изберете Снимка на екрана (Take Screenshot) или натиснете Ctrl+Shift+S (Cmd+Shift+S на Mac). Firefox предлага да запази цялата страница или видимата част или да изберете област с мишката. Това е най-бързият начин за една снимка.

От уеб конзолата. Отворете инструментите за разработчици (F12), отидете в конзолата и напишете :screenshot --fullpage. Конзолата приема настройки, които менюто няма: --dpr 2 снима с двойна плътност на пикселите, за да остане текстът остър, когато снимката се смали; --file с име избира името на файла; --clipboard копира снимката, вместо да я запише.

От командния ред. Firefox може да работи без прозорец и да запише страница направо във файл, което е удобно, когато снимате много страници или една и съща страница всяка седмица:

mkdir -p ~/shots/profile
firefox --headless --profile ~/shots/profile --screenshot ~/shots/page.png --window-size=1280 https://example.com/

Ширината е по-важна, отколкото изглежда. Само с --window-size=1280 Firefox подрежда страницата в 1280 пиксела ширина и записва цялата ѝ дължина; с --window-size=1280,800 записва само първите 800 пиксела, като при снимка на видимата част; без размер изобщо ползва ширина 1366. Отделната папка за профил позволява командата да работи, докато обичайният ви Firefox е отворен. В Ubuntu, където Firefox идва като snap пакет, дръжте профила и снимката в домашната си папка: когато пробвахме, snap пакетът не можа да ползва папка за профил в /tmp.

#Какво се чупи при дълги страници

• Картинки, които се зареждат късно. Много сайтове зареждат картинките едва когато превъртите близо до тях, така че снимка на цялата страница веднага след отварянето има празни полета отдолу. Превъртете до края и обратно, преди да снимате, или изчакайте няколко секунди.
• Неща, които ви следват. Заглавна лента, залепена горе, и бутон за чат, залепен в ъгъла, се появяват веднъж, там където са в момента на снимката. Инструментите, които превъртат и слепват няколко снимки, ги повтарят на всеки екран; Firefox рисува страницата наведнъж и избягва това.
• Банери и изскачащи прозорци. Първо приемете или затворете банера за бисквитки и всеки прозорец за бюлетин. Снимка за портфолио трябва да показва сайта, а не диалога за съгласие.
• Лентата за превъртане. Снимка без прозорец на страница, която се превърта, пази празна ивица около 12 пиксела вдясно, където би била лентата. Отрежете я, преди да използвате снимката.
• Много дълги страници. Страница от десетки хиляди пиксела става огромна картинка, която никой не може да прочете, когато се смали за слайд. За портфолио горната част на страницата плюс една-две избрани секции обикновено казват повече от цялата.

#Изберете размера преди рамката

Снимката ще се покаже в определена форма и е по-добре да я направите за нея, отколкото да оставите сайтът да я изреже вместо вас:

• 1200 × 630 за преглед на връзка, когато страницата се сподели в чат или социална мрежа (картинката в тага og:image на страницата);
• 1080 × 1080 или 1080 × 1350 за публикация;
• 1920 × 1080 за слайд или видео;
• 1600 × 900 като общ размер 16:9 за страница в магазин или блог, освен ако магазинът не посочва свой размер; тогава ползвайте неговия.

Текстът трябва да се чете в размера, в който снимката реално се показва. Цяла страница, събрана в 1200 × 630, е текстура, а не екранна снимка; горната част на страницата в пълна ширина е нещо, което хората разпознават.

#Рамка с няколко реда Python

Проста рамка на прозорец върху мек фон прави снимката да изглежда завършена и я отделя от страницата около нея. Този скрипт с библиотеката Pillow взема снимката, отрязва ивицата на лентата за превъртане, ако дадете ширината ѝ, мащабира страницата към рамката, пази горната ѝ част и рисува светла заглавна лента, заоблени ъгли и сянка върху преливащ се фон, в 1200 × 630:

import sys
from PIL import Image, ImageDraw, ImageFilter

W, H = 1200, 630            # a link preview; 1600x900 for a store page
PAD, BAR, RADIUS = 60, 36, 14

shot = Image.open(sys.argv[1]).convert("RGB")
cut = int(sys.argv[3]) if len(sys.argv) > 3 else 0   # the scroll bar strip a headless capture keeps
shot = shot.crop((0, 0, shot.width - cut, shot.height))
inner_w = W - 2 * PAD
inner_h = H - 2 * PAD - BAR
# Scale to the frame's width and keep the top of the page: that is what people recognise.
shot = shot.resize((inner_w, round(shot.height * inner_w / shot.width)), Image.LANCZOS)
shot = shot.crop((0, 0, inner_w, min(inner_h, shot.height)))

# Background: a vertical gradient between two colours.
top, bottom = (31, 41, 79), (22, 120, 118)
bg = Image.new("RGB", (W, H))
draw = ImageDraw.Draw(bg)
for y in range(H):
    k = y / (H - 1)
    draw.line([(0, y), (W, y)], fill=tuple(round(a + (b - a) * k) for a, b in zip(top, bottom)))

# The window: a light title bar with three dots, the page under it, round corners.
win = Image.new("RGB", (inner_w, BAR + shot.height), (236, 238, 242))
win.paste(shot, (0, BAR))
wd = ImageDraw.Draw(win)
for i, colour in enumerate([(237, 106, 94), (245, 191, 79), (98, 197, 84)]):
    cx = 22 + i * 20
    wd.ellipse([cx - 6, BAR // 2 - 6, cx + 6, BAR // 2 + 6], fill=colour)
mask = Image.new("L", win.size, 0)
ImageDraw.Draw(mask).rounded_rectangle([0, 0, win.width - 1, win.height - 1], RADIUS, fill=255)

# A soft shadow under the window, then the window itself.
shadow = Image.new("L", (W, H), 0)
ImageDraw.Draw(shadow).rounded_rectangle([PAD, PAD + 12, PAD + win.width, PAD + 12 + win.height], RADIUS, fill=110)
bg.paste((0, 0, 0), (0, 0), shadow.filter(ImageFilter.GaussianBlur(18)))
bg.paste(win, (PAD, PAD), mask)
bg.save(sys.argv[2], quality=90)
print(bg.size, "window", win.size)

Пуснете го като python frame.py page.png framed.jpg 12. Сменете W и H за другите размери и двата цвята според марката си. Запазвайте като PNG, когато снимката е главно текст и плътни цветове, и като JPEG или WebP, когато съдържа снимки; JPEG на страница с много текст показва размазани ръбове около буквите.

#Рамки на устройства

Телефон или лаптоп около снимката казват „работи и на телефон“ по-бързо от думите, но рисувайте обикновени устройства. Снимки на конкретен марков телефон или лаптоп повдигат въпроси за търговските марки в рекламата и бързо остаряват. Рамката на телефон изисква и страницата да е снимана в ширина на телефон (около 390 пиксела, със съответната плътност на пикселите), а не страница за компютър, натъпкана във формата на телефон.

#Разширение, което прави всичко това

Направихме Ramka, разширение за Firefox, което снима видимата част или цялата страница и я отваря в редактор с рамка на прозорец на браузър, обикновен телефон, таблет или лаптоп или без рамка, върху преливащ се фон, цвят, размазано копие на снимката или прозрачен фон. Подготвя размера за преглед на връзка, публикации, слайдове и страници в магазини, запазва PNG, JPEG или WebP, копира в клипборда и слага в рамка и снимки, които вече имате. Рисува цялата страница наведнъж, остра и на екрани с висока плътност, до 16384 CSS пиксела височина; по-дългите страници се отрязват и редакторът казва това. Firefox не позволява снимки на собствените си страници, като страниците about: и сайта за добавки. Ramka иска Firefox 142 или по-нов, не събира данни и не прави мрежови заявки. Проверено е с автоматични тестове, линтера за добавки на Mozilla и пускане в истински Firefox без прозорец; още не е подписано от Mozilla, затова засега се инсталира като временна добавка. Обявено е като „Очаквайте скоро“.

#Често задавани въпроси

Как да снимам цялата страница във Firefox без разширение?

Щракнете с десния бутон върху страницата, изберете Снимка на екрана и после запазване на цялата страница или напишете :screenshot --fullpage в уеб конзолата на инструментите за разработчици.

Защо липсват картинки в долната част на снимката на цялата страница?

Сайтът зарежда картинките едва когато превъртите близо до тях. Превъртете до края на страницата и обратно, изчакайте малко и тогава снимайте.

Какъв размер трябва да е картинката за преглед на връзка?

1200 × 630 пиксела е размерът, който ползват повечето прегледи на връзки. Дръжте важното далеч от краищата, защото някои приложения изрязват картинката до квадрат или по-тясна форма.

Мога ли да снимам много страници автоматично?

Да. Пускайте Firefox без прозорец от командния ред с --screenshot за всеки адрес, с отделна папка за профил, и после сложете файловете в рамка със скрипт.

#Източници

• Документация на Firefox DevTools: екранни снимки
• Протоколът Open Graph
• Документация на Pillow