Zoom na zdjęciach produktów to jedna z niewielu funkcji, których brak widać natychmiast. Klient, który chce sprawdzić fakturę materiału, wykończenie albo napis i nie może powiększyć zdjęcia, zakłada, że coś się przed nim ukrywa.
Rozdzielczość źródła jako warunek wstępny
Żadna funkcja zoomu nie stworzy szczegółu, którego w pliku nie ma. To pierwsza weryfikacja i często zamyka temat, zanim się zacznie.
Reguła: zdjęcie źródłowe musi mieć dwa do trzech razy więcej niż maksymalny rozmiar wyświetlania. Jeśli galeria pokazuje zdjęcie w szerokości 600 pikseli, źródło powinno mieć od 1200 do 1800 pikseli. Dla wygodnego zoomu na detal celuj w 2000 pikseli na dłuższym boku.
Szybka kontrola: otwórz zdjęcie produktu w nowej karcie i sprawdź jego rzeczywisty rozmiar. W wielu sklepach zdjęcia zostały przeskalowane przy imporcie i kończą się na 800 pikselach, co wyklucza jakikolwiek sensowny zoom.
Ważne: programowe powiększenie zdjęcia 800-pikselowego nie przywraca żadnego szczegółu. Efekt wygląda nieostro i daje skutek odwrotny do zamierzonego. Jeśli źródła są za słabe, praca zaczyna się od fotografii, nie od modułu.
Trzy zachowania
Lupa przy najechaniu kursorem. Kwadrat zoomu podąża za kursorem, powiększenie pojawia się obok albo na wierzchu. Klasyka na komputerze, skuteczna przy szybkim obejrzeniu jednego fragmentu.
Pełny ekran po kliknięciu. Zdjęcie otwiera się na wierzchu, z nawigacją między ujęciami i możliwością dalszego powiększania. To rozwiązanie najpełniejsze i najbardziej uniwersalne.
Gest dwoma palcami na telefonie. Naturalny gest na ekranie dotykowym. Musi działać wewnątrz widoku pełnoekranowego, nigdy na całej stronie.
Kombinacja, która działa: lupa przy najechaniu na komputerze, otwarcie pełnego ekranu po kliknięciu na obu formatach, gest dwoma palcami dostępny w pełnym ekranie.
Galeria Produktu PrestaShop: Zoom HD, Pełny Ekran i Filtr WariantówGaleria produktu nowej generacji: zoom HD, pionowe miniatury, pełny ekran mobile z gestem szczypania i filtrowanie zdjęć według wariantu.€69,00
Punkt krytyczny na telefonie
To najczęstszy i najbardziej dotkliwy błąd wdrożeniowy.
Jeśli komponent zoomu przechwytuje gesty dotykowe na galerii wyświetlanej w toku strony, wchodzi w konflikt z przewijaniem: odwiedzający, który chce przewinąć stronę, zostaje uwięziony na zdjęciu.
Poprawne zachowanie: w toku strony galerię przegląda się przesunięciem poziomym, a przewijanie pionowe pozostaje wolne. Zoom włącza się dopiero po świadomym otwarciu pełnego ekranu, dotknięciem zdjęcia albo osobnej ikony.
Druga rzecz: zamknięcie pełnego ekranu musi być oczywiste, z widocznym krzyżykiem i gestem przesunięcia w dół, który stał się standardem.
Opóźnione ładowanie wersji o wysokiej rozdzielczości
Ładowanie zdjęcia 2000-pikselowego na każdej karcie produktu dla odwiedzającego, który nigdy nie użyje zoomu, to marnowanie transferu i pogorszenie wskaźników wydajności.
Właściwa architektura opiera się na dwóch plikach na ujęcie. Wersja do wyświetlania, dopasowana do galerii, ładowana od razu. I wersja o wysokiej rozdzielczości, ładowana dopiero przy uruchomieniu zoomu.
Dwa środki ostrożności przy wykonaniu. Przewidź wskaźnik ładowania w czasie pobierania wersji HD: przy wolnym łączu dwie sekundy bez informacji zwrotnej sprawiają wrażenie, że nic się nie dzieje. I ładuj z wyprzedzeniem kolejne zdjęcie, gdy odwiedzający jest w pełnym ekranie, żeby przechodzenie między ujęciami było płynne.
Waga i format
Zdjęcie 2000-pikselowe w JPEG o maksymalnej jakości może ważyć kilka megabajtów. Trzy dźwignie, żeby sprowadzić je do rozsądnego rozmiaru.
Nowoczesne formaty, WebP i AVIF, zmniejszają wagę o 30 do 50 % przy tej samej jakości odbieranej okiem. Przewidź wersję zapasową w JPEG dla starszych przeglądarek.
Jakość kompresji w okolicach 80-85 %, gdzie różnica wizualna staje się niezauważalna, a waga wyraźnie spada.
Przeskalowanie u źródła: zdjęcie 6000 pikseli z aparatu profesjonalnego nie ma w sieci żadnego sensu. Ustaw limit 2000 albo 2500 pikseli przy imporcie.
Czego nie robić
Zoom na zbyt małym zdjęciu. Lepiej nie oferować zoomu niż otwierać wersję rozpikselowaną. Przewidź wykrywanie: jeśli rozdzielczość jest za niska, zoom się nie włącza.
Zoom zasłaniający przycisk zakupu. Na komputerze lupa wyświetlana po prawej stronie zdjęcia często przykrywa kolumnę z ceną i przyciskiem dodania do koszyka. Zoom musi zostać w obszarze zdjęcia albo w warstwie modalnej.
Wyłączony prawy przycisk myszy. Niektóre moduły blokują prawy przycisk, żeby chronić zdjęcia. Nikomu to nie przeszkodzi ich pobrać, utrudnia za to zastosowania uprawnione i pogarsza dostępność.
Zdjęcia detalu
W niektórych katalogach zoom nie wystarcza i osobne zdjęcie działa lepiej.
Zbliżenie szwu na ubraniu, złączy w urządzeniu albo struktury materiału daje więcej niż powiększenie zdjęcia ogólnego, bo zostało skadrowane i oświetlone po to, żeby ten detal pokazać.
Sygnał: jeśli klienci regularnie zadają to samo pytanie o szczegół, dodaj zdjęcie zamiast liczyć na to, że zoom odpowie za ciebie.
Moduł Galeria Produktu dla PrestaShop obsługuje ten łańcuch na PrestaShop 8 i 9: zoom o wysokiej rozdzielczości z opóźnionym ładowaniem powiększenia, zachowanie pełnoekranowe dostosowane do dotyku bez konfliktu z przewijaniem oraz automatyczne wyłączenie zoomu, gdy rozdzielczość źródła jest za niska.