Skończona strona potrzebuje własnych zdjęć: do portfolio, do oferty, do case study. Oczywista droga to otworzyć ją, wcisnąć zrzut ekranu i przyciąć wynik. Działa dokładnie raz. Przestaje działać, kiedy strona animuje się przy przewijaniu, kiedy istnieje druga wersja językowa i kiedy klient po trzech tygodniach zmienia akapit, a wszystkie obrazki nagle są nieaktualne. Dlatego fotografuję strony tak samo, jak załatwiam każdą inną powtarzalną robotę: headless przeglądarką i krótkim skryptem.
Obrazki starzeją się szybciej niż projekt
Kiedy trzy strony klientów trafiły do mojego portfolio, zestaw urósł do dwudziestu sześciu zrzutów: hero każdej podstrony, wycinki pojedynczych sekcji, jeden widok mobilny na projekt. Wciśnięcie klawisza dwadzieścia sześć razy nie jest trudne. Trudne jest powtórzenie tego po zmianie tekstu, potem jeszcze raz dla drugiego języka, i utrzymanie identycznego kadru za każdym razem, żeby galeria nie skakała między obrazkami. Skrypt załatwia to jedną komendą, a kadr zostaje identyczny z definicji, bo jest liczbą w skrypcie, a nie moją ręką na gładziku.
Stronę trzeba przewinąć, zanim się ją sfotografuje
Strony marketingowe wprowadzają sekcje animacją: blok jest niewidoczny, dopóki nie wejdzie w pole widzenia, a potem pojawia się z przesunięciem. Przeglądarka, która otwiera stronę i od razu robi zrzut, łapie to, co zobaczyłby użytkownik w trakcie animacji, czyli czarne prostokąty i puste w połowie sekcje. Moja pierwsza partia zrzutów do case study wyszła dokładnie tak, a najgorzej wypadły sekcje, z których byłem najbardziej zadowolony.
Lekarstwo jest nudne i pewne: zanim cokolwiek zostanie sfotografowane, skrypt przewija całą stronę do końca krokami po kilkaset pikseli, pozwala animacjom się dokończyć i dopiero wtedy wraca i robi zdjęcia. To przeglądarkowy odpowiednik przejścia się po pomieszczeniu, zanim zacznie się je fotografować.
Jeden haczyk dotyczy stron, które nie przewijają okna. Jeśli strona przewija się wewnątrz własnego kontenera, pozycja przewinięcia okna zostaje na zerze, a każda sztuczka oparta na tej liczbie po cichu nic nie robi. Działa dopiero przewinięcie konkretnego elementu do widoku.
Ciężkie sceny nie chcą ustać w miejscu
Zrzut pojedynczego elementu to podejście eleganckie: dokładne granice, żadnego przycinania później. To także podejście, które wykłada się na wszystkim, co ciężkie. Na stronie z żywą sceną 3D zrzut elementu kończy się timeoutem, bo przeglądarka twierdzi, że element nie jest stabilny, a scena przerysowuje się bez przerwy i stabilna nie będzie. Zrzut całego okna z prostokątem przycięcia działa za każdym razem. Zajęło mi więcej czasu, niż chciałbym przyznać, zanim uznałem, że prymitywna metoda jest tu tą właściwą.
ffmpeg robi robotę ciemni
Przeglądarka daje tylko surowe piksele. Wszystko dalej to ffmpeg: skalowanie każdego zrzutu do jednego rozmiaru galerii, wycinanie sekcji z jednego wysokiego zrzutu całej strony zamiast fotografowania każdej osobno, i dopełnienie zrzutu z telefonu do tej samej poziomej kanwy co reszta, żeby galeria trzymała jedną proporcję. Dwadzieścia sześć JPEG-ów 1920 na 1200 waży w sumie poniżej czterech megabajtów, a tyle strona uniesie bez osobnego CDN-a do mediów.
Zrzuty i obróbkę trzymam w dwóch osobnych skryptach. Poprawka kadru kosztuje wtedy sekundy i nie wymaga ponownego otwierania przeglądarki. Ta sama para narzędzi nagrywa też wideo, o czym pisałem dłużej we wpisie film produktowy bez kamery.
Ta sama sztuczka do obrazków, które nie są stronami
Kiedy ze strony mojej usługi automatyzacji musiały zniknąć loga klientów, zastąpiłem je zrzutami prawdziwego kodu z automatyzacji działającej na moim serwerze: kod z podświetloną składnią wyrenderowany w ramce okna, sfotografowany tą samą headless przeglądarką przy stałym rozmiarze okna. Wyszły z tego dwie zasady. Zakres linii dobierać tak, żeby zrzut nie kończył się w środku komentarza. I przeczytać każdą widoczną linię, zanim stanie się materiałem marketingowym, bo zrzut kodu wynosi na zewnątrz więcej, niż się wydaje: żadnych nazw klientów, żadnych haseł, niczego, co nie jest moje.
Czego headless nie pokaże
Treści osadzonych z zewnątrz. Mapa w iframie nie renderuje się w headless Chromium, więc zrzut strony kontaktowej ma pustą ramkę w miejscu mapy. Fonty i banery zgód mają ten sam zwyczaj zachowywania się inaczej niż na własnym ekranie. Dlatego ostatni krok jest ręczny i taki zostaje: wszystkie klatki na jednym arkuszu kontaktowym, obejrzane raz, zanim którakolwiek trafi na stronę. Skrypt zdejmuje powtarzalność, nie ocenę.
Kiedy opłaca się pisać skrypt
Zestaw zdjęć robiony raz zrób ręcznie. Skrypt ma sens, gdy spełniony jest choć jeden warunek: dwie wersje językowe, więcej niż kilka klatek albo interfejs, który zmienia się częściej niż obrazki. Moja zasada to drugie uruchomienie. W chwili, w której wiem, że te same zrzuty będą potrzebne znowu, skrypt już się zwrócił.
Case studies stron w moim portfolio są zrobione dokładnie tak, podobnie jak zdjęcia interfejsu na stronie AxisMod. Jeśli Twoja strona potrzebuje obrazków, które zostają aktualne, zamiast takich, które się starzeją, to część tego, czym jest u mnie tworzenie stron.
