Wszystko czego nie wiesz o wielkości zdjęć w sklepie

Ostatnie zmiany jakie pojawiają się w oprogramowaniu zebrały mnie do tego, by opisać może i mało istotną sprawę dla wielu sprzedawców – ale dość ważną zmianę dla większości sklepów z branży odzieżowej, gdzie wielkość zdjęcia ma znaczenie.

Jedno zdjęcie wyraża więcej niż tysiąc słów – znane i wiecznie powtarzane powiedzenie sprawdza się idealnie w sklepach odzieżowych gdzie chcemy przedstawić produkt w możliwie największym rozmiarze i by klient zobaczył go w miarę dobrze bez powiększania produktu. Prezentacja samego produktu jest bardzo ważna dla wielu branż w ecommerce, dlatego w sklepie KQS.store jest możliwość wyświetlania zdjęcia w różnych wielkościach w zależności od miejsca…czy to strona produktowa, czy strona główna lub strona katalogu w danej kategorii.

To administrator sklepu decyduje o tym, jakiej wielkości zdjęcia będzie wgrywał do swojego sklepu i choć na przestrzeni lat, wielkość monitorów i rozdzielczości ekranu wciąż rośnie, tak optymalne dobranie wielkości zdjęcia ma bardzo ważne znaczenie ( nie tylko jeśli chodzi o optymalizację zasobów serwera ).

Dlatego nie warto wgrywać zdjęć w oryginalnych rozmiarach prosto z aparatu fotograficznego gdzie w zależności od modelu czy wielkości matrycy uzyskujemy zdjęcia w rozmiarach np. 4288 x 2848 px.

Takie zdjęcia możemy poddać obróbce w programie graficznym gdzie w efekcie finalnym będziemy mogli zmienić także wielkość takiego zdjęcia do mniejszych rozmiarów. Tutaj optymalnym rozmiarem będzie szerokość zdjęcia w granicach 1500px – gdyż musimy pamiętać o użytkownikach którzy posiadają ekrany w wielkości fullHD a takie zdjęcie po powiększeniu wypełni prawie w całości ekran monitora. Dla mniejszych ekranów, wbudowana galeria zdjęć powinna automatycznie dopasować wielkość zdjęcia do wielkości monitora, lecz wszystko zależy od sklepu i funkcji działania galerii gdyż możemy też wyświetlić zdjęcie w pełnym rozmiarze. Samego mechanizmu galerii oraz możliwości stosowania innych, ciekawych skryptów nie będę opisywał gdyż jest tego spora ilość – podkreślę tylko fakt, że domyślny moduł galerii zdjęć znajdujący się w sklepie KQS można zastąpić innym systemem galerii.

Optymalizacja wielkości zdjęcia ( jeśli chodzi o jego wagę ) to temat bardzo rozległy, gdyż musimy pamiętać o kilku najważniejszych rzeczach jak np.: czas ładowania się sklepu, ilość miejsca na serwerze oraz miesięczny limit transferu danych. Stosowanie różnego rodzaju programów do optymalizacji wielkości i wagi zdjęcia jest jak najbardziej wskazane i polecam ich używanie. Temat optymalizacji zdjęć jest dość rozległy więc zostawiam to na osobny wpis, a dalej zajmę się samymi zdjęciami w sklepie.

Zdjęcia produktów jakie mogą występować w sklepie KQS.store, znajdują się m.in. na stronie głównej:

• Najnowsze produkty
• Promocje
• Bestsellery
• Wyprzedaże

w katalogu produktów oraz na karcie produktowej ( jako zdjęcie główne oraz galeria zdjęć ). Oprócz tego, w zależności od wykorzystywanych modułów w sklepie, zdjęcia produktów pojawiają się także w takich działach jak :

• Towar dnia
• Najczęściej oglądane
• Najczęściej kupowane
• Ostatnio oglądane
• oraz moduł porównywarki produktów

Miniatura zdjęcia w sklepie KQS generuje się automatycznie wg. rozmiarów podanych w konfiguracji:

Podanie odpowiedniej wielkości w pixelach dla szerokości oraz wysokości zdjęcia, spowoduje, że automatycznie będą one posiadały maksymalne rozmiary jakie ustawimy ( tutaj jest ograniczenie co do wielkości zdjęcia, gdyż miniatury mogą posiadać maksymalne rozmiary 500x500px )

Dodatkowo istnieje możliwość wyłączenia dopełnienia miniatury kolorem tła i w tym momencie zachowane są proporcje boków załadowanego zdjęcia.

Znajdujący się w konfiguracji sklepu dział dotyczący miniatur posiada też kilka innych opcji np.:

• Limit znaków w nazwach plików – czyli długość nazwy pliku zdjęcia… ale o tym pisałem TUTAJ
• Wyłącz obramowanie miniatur – powoduje usunięcie domyślnego obramowania miniatury
• Wyświetl miniatury w koszyku – ta opcja spowoduje, że w koszyku klienta oprócz nazwy produktu i ceny, pojawi się też zdjęcie o wymiarach jakie ustawimy w polu “Rozmiar miniatury w koszyku” – choć i tak domyślnie maksymalny rozmiar jaki się tam może pojawić to 150x150px
• Kliknięcie przenosi na stronę produktu – dość ciekawa opcja, gdyż domyślnie po kliknięciu w zdjęcie produktu ( na stronie głównej czy w katalogu produktów ), otworzy się galeria zdjęć danego produktu bez konieczności wchodzenia w ten produkt. Opcję tą możemy włączyć i domyślne kliknięcie w zdjęcie spowoduje przejście do danego produktu.
• Generuj miniatury w formacie dużego zdjęcia – chodzi tutaj o rozszerzenie wgrywanego pliku zdjęcia ( jpg, png ), gdzie podczas tworzenia miniatury zdjęcia będzie ono posiadało takie samo rozszerzenie w jakim go wgrywamy ( wcześniej w poprzednich wersjach sklepu KQS wszystkie miniatury zdjęć były w formacie jpg niezależnie od tego czy wgraliśmy plik w formacie png czy jpg )
• Znak wodny (ścieżka) – umieszczenie odnośnika do zdjęcia znaku wodnego, spowoduje nałożenie go na zdjęcie podczas wgrywania zdjęcia do produktu. Nie zalecam stosowania tej opcji z wielu względów.

To nie wszystko co można ustawić w sklepie KQS.store, bo szablony graficzne oferują więcej możliwości niż do tej pory.

Zacznę od strony głównej sklepu – a konkretnie od produktów wyświetlanych w działach:

• Najnowsze produkty
• Promocje
• Bestsellery
• Wyprzedaże

Aktualnie w tych miejscach mamy wiele zmiennych:

{SZEROKOSC_KOMORKI_ZDJECIA}, {ZDJECIE}, {SRC_OBRAZ},  {SRC_OBRAZ_K}, {SRC_OBRAZ_M}, {GALERIA_BOX}

{SZEROKOSC_KOMORKI_ZDJECIA} – zmienna nadająca szerokość komórki w której znajduje się zdjęcie…bardzo rzadko stosowany gdyż możliwości jakie stosuje się w pliku styli css dają o wiele większe pole manewru.

{ZDJECIE} – powoduje pojawienie się zdjęcia z odnośnikiem do produktu ( lub jak pisałem wyżej – w zależności od ustawień w konfiguracji, może to powodować otwarcie galerii zdjęć bez wejścia w produkt )

{SRC_OBRAZ} – nowa zmienna, która wygeneruje sam adres do zdjęcia produktu w oryginalnej wielkości jaką wgraliśmy w sklep

{SRC_OBRAZ_K} – nowa zmienna, która wygeneruje sam adres do zdjęcia produktu w przeformatowanej wielkości o maksymalnych rozmiarach jakie mamy ustawione w konfiguracji sklepu. Takie zdjęcie wtedy posiada suffix z końcówką _k

{SRC_OBRAZ_M} – nowa zmienna, która wygeneruje sam adres do zdjęcia produktu w rozmiarze 100x100px. Takie zdjęcie wtedy posiada suffix z końcówką _m

{GALERIA_BOX} – znacznik ten możemy dodać do kodu html odnośnika do zdjęcia, dzięki czemu uruchamiana będzie galeria zdjęć bez potrzeby wejścia w produkt.

Nowe zmienne dają teraz możliwość ustawienia dużego zdjęcia na stronie głównej w wielkości większej niż 500x500px ( ograniczenie o którym pisałem wyżej ) dzięki czemu, można stosować jeszcze bardziej ciekawsze projekty sklepów. Wystarczy odpowiednio użyć zmiennej {SRC_OBRAZ} i mamy generowane zdjęcie w oryginalnej wielkości – tutaj należy dodatkowo jeszcze osadzić zdjęcie w odpowiednim bloku dzięki czemu będziemy mogli go ostylować przez plik styli css w którym nadamy odpowiednie rozmiary jakie nam pasują.

Oprócz ww. miejsc, także w katalogu produktów mamy możliwość ustawienia większego zdjęcia niż miniatura. W szablonach graficznych dla odpowiedniego trybu wyświetlania produktów, mamy dostępne takie same zmienne.

Kolejnym miejscem gdzie możemy ustawić zdjęcia jest karta produktowa, a konkretnie zdjęcie główne produktu oraz galeria zdjęć.

Mamy tutaj podobne zmienne które możemy odpowiednio osadzić w kodzie html, dzięki czemu mamy możliwość stosowania o wiele większego zdjęcia głównego niż zdjęcia miniatur.

A poniżej przykład zastosowania większego zdjęcia głównego w jednym z Naszych sklepów:

Rzadziej stosowany element w sklepach jak np. Towar dnia, już od dawna posiadał możliwość wyświetlania większego zdjęcia niż miniatura. Dzięki znacznikowi {OBRAZ}  było generowane zdjęcie miniatury, ale stosując kolejną zmienną {NAZWA_OBRAZ} – można było uzyskać oryginalną nazwę zdjęcia, przy czym wystarczyło odpowiednio znać strukturę generowania miniatur i można było samemu stworzyć kawałek kodu w postaci :

<img src=”galerie/{NAZWA_OBRAZ}.jpg”>

Minusem tego rozwiązania były rozszerzenia plików, gdzie na sztywno musieliśmy podać rozszerzenie .jpg – a w przypadku gdy sklep posiadał rozszerzenie pliku zdjęcia raz w .png  a raz w .jpg, to takie rozwiązanie się nie sprawdzało.

Aktualnie element Towar dnia posiada także nowe zmienne {SRC_OBRAZ}, {SRC_OBRAZ_K}, {SRC_OBRAZ_M}, {GALERIA_BOX} – i choć w spisie dostępnych zmiennych one nie widnieją ( zapewne KQS to przeoczył ), to jednak można je tam wykorzystać.

Wielkości zdjęć można też ustawić dla pozostałych działów w sklepie takich jak :

• Menu Najczęściej Oglądane – Produkt
• Menu Najczęściej Kupowane – Produkt
• Menu Ostatnio Oglądane – Produkt

o ile wykorzystujemy w szablonie graficznym te elementy. Jeśli chodzi o element Menu Porównywarki – Produkt – to niestety nie miałem jeszcze okazji sprawdzić czy w tym module można użyć nowych zmiennych ( też nie widnieją w spisie dostępnych zmiennych, ale osoby korzystające z tego modułu mogą sobie we własnym zakresie sprawdzić ).

Ostatnimi elementami w sklepie KQS.store które także uległy modyfikacji to działy znajdujące się na stronie produktu :

• Zakupione Razem – Produkt
• Produkty Pokrewne – Produkt
• Produkty z jednakowej kategorii – Produkt
• Akcesoria – Grupa – Produkt

Osoby korzystające z modułu podpowiedzi w wyszukiwarce nie zostały pominięte…w tym elemencie Wyszukiwarka – Podpowiedzi – Produkt – Obraz też znalazły się nowe zmienne – niestety na dzień dzisiejszy nie widzę sensu stosowania tam dużych zdjęć ( tak jak dla modułu Akcesoria – Grupa – Produkt ), więc zapewne jest to jeden swego rodzaju standaryzacja jaką KQS zastosował dla wszystkich zdjęć produktów w sklepie.