Galerie fotograficzne z lightboxem i lazy loading — technika szybkiego portfolio
Portfolio fotografa może ważyć kilkanaście megabajtów bez optymalizacji. Jak technicznie budować galerie, które ładują się błyskawicznie?
Portfolio fotografa to przede wszystkim wyzwanie techniczne
Kiedy projektuję stronę dla fotografa, pierwsze pytanie nie brzmi »jak to ma wyglądać«, tylko »ile zdjęć chcesz pokazać i w jakim czasie mają się załadować«. Galeria z setką zdjęć bez optymalizacji potrafi ważyć kilkanaście megabajtów i skutecznie zablokować odwiedzającego jeszcze zanim zobaczy choć jedno ujęcie. Dobra fotografia zasługuje na szybką stronę — jedno nie istnieje bez drugiego.
Czym jest lazy loading i dlaczego stosuję go zawsze
Lazy loading to technika polegająca na ładowaniu obrazów dopiero wtedy, gdy wchodzą w pole widzenia użytkownika. Zamiast pobierać wszystkie 80 zdjęć z galerii na start, przeglądarka wczytuje tylko te, które są aktualnie widoczne, oraz kilka kolejnych w kolejce. W praktyce oznacza to, że strona otwiera się błyskawicznie, a reszta zdjęć dogania użytkownika w miarę jak scrolluje. W HTML wystarczy atrybut loading='lazy' na tagu img — ale implementacja w Next.js idzie o krok dalej dzięki automatycznej optymalizacji przez komponent Image.
Lightbox — galeria, która nie wypycha ze strony
Lightbox to widok pełnoekranowy otwierający się bez przeładowania strony. Użytkownik klika miniaturę, zdjęcie otwiera się w nakładce i może przechodzić dalej strzałkami lub gestem swipe. Kluczowe jest zachowanie kontekstu — po zamknięciu lightboxa wraca dokładnie w to samo miejsce w galerii. Każda inna implementacja frustruje odwiedzających i skraca czas spędzony na portfolio. Dbam też o to, żeby lightbox działał sprawnie na ekranie dotykowym — pinch-to-zoom i swipe powinny być natywnie obsługiwane.
- Miniaturki serwuj w rozdzielczości 400–600px, nie w full-res
- Używaj formatu WebP z fallbackiem do JPEG dla starszych przeglądarek
- Ustaw atrybut loading='lazy' na wszystkich obrazach poniżej the fold
- Generuj blurred placeholder (LQIP) — użytkownik widzi zarys zdjęcia podczas ładowania
- Przytnij nadmiarowe metadane EXIF — mogą dokładać 50–100 KB na plik
- Definiuj width i height każdego obrazu, żeby uniknąć layout shift
WebP i AVIF — nowoczesne formaty obrazów
Konwersja zdjęć z JPEG do WebP daje zazwyczaj 25–35% redukcji rozmiaru pliku przy tej samej jakości wizualnej. AVIF idzie jeszcze dalej — oszczędności sięgają 50% w porównaniu do JPEG. W Next.js, którego używam do budowy portfolio, optymalizacja obrazów jest wbudowana w framework — komponent Image automatycznie serwuje właściwy format w zależności od przeglądarki odwiedzającego. Nie musisz ręcznie konwertować każdego pliku.
LCP i Core Web Vitals — co mierzy Google
Google ocenia stronę według wskaźnika LCP (Largest Contentful Paint) — czasu, w którym główny element wizualny strony jest widoczny. W portfolio fotograficznym tym elementem jest zwykle pierwsze zdjęcie z galerii. Jeśli ładuje się dłużej niż 2,5 sekundy, Google klasyfikuje stronę jako wolną i obniża jej pozycję w wynikach wyszukiwania. Stąd bierze się moja obsesja na punkcie optymalizacji obrazów — to nie estetyka, to matematyka SEO.
- LCP poniżej 2,5s — użyj preload na pierwszym zdjęciu w galerii
- CLS równy zero — zawsze definiuj width i height obrazów w kodzie
- FID poniżej 100ms — nie blokuj wątku JS ciężkimi bibliotekami galerii
- Testuj Lighthouse dla mobile — większość odwiedzin portfela fotografa pochodzi z telefonów
- CDN dla obrazów to nie luksus, to konieczność przy globalnych odwiedzających
Przykład z mojej własnej strony
Na niewart.pl galeria ładuje natywnie obrazy w odpowiedniej rozdzielczości dla ekranu użytkownika, stosuje blur placeholder podczas pobierania i obsługuje nawigację klawiaturą w lightboxie. Wynik w PageSpeed Insights dla mobile oscyluje wokół 90–95 punktów. To nie przypadek — to suma dziesiątek małych decyzji technicznych, które razem dają odwiedzającemu płynne doświadczenie obcowania z fotografią.
