/ Niezbędnik

Optymalizacja zdjęć do sklepu internetowego w programie Gimp

Zdjęcia w sklepie internetowym pełnią nie tylko funkcję sprzedażową. Oprócz prezentacji produktu służą także jako narzędzie do poprawy pozycjonowania. W tym artykule dowiesz się w jaki sposób poprawnie przygotować zdjęcia do swojego sklepu internetowego za pomocą darmowego programu Gimp.

Ten artykuł dostępny jest także w wersji video.

Odpowiednia kompresja pliku graficznego i jego przeskalowanie pomoże usprawnić szybkość działania Twojego sklepu, a także zachować spójność wyglądu wszystkich kart produktowych. Natomiast dobrze przygotowane zdjęcie, czyli odpowiednia nazwa, atrybuty alt i title pomogą Ci w pozycjonowaniu. O tym pisałam w poprzednim artykule link. Ale to lektura dla chętnych. ;) Tymczasem...

Oto jak krok po kroku przeskalować zdjęcie

Zainstaluj program Gimp pobierając go z oficjalnej strony producenta. Jest on darmowy.

Następnie, po zainstalowaniu programu otwórz go i zacznij tworzyć swój projekt:

Otwórz zdjęcie, które chcesz skompresować, aby to zrobić najprościej będzie je po prostu przeciągnąć i upuścić w programie. Twoje zdjęcie zostanie potraktowane jako warstwa. Jeżeli dodasz więcej niż jedno zdjęcie zostanie stworzone wiele warstw, które potem możesz swobodnie ze sobą mieszać i łączyć.

Będzie to wyglądało tak:

Aby skompresować zdjęcie należy najechać na jedną z warstw, wybrać ją prawym przyciskiem myszy i gdy pojawi się menu wyboru, kliknąć opcję: skaluj warstwę.

Po wybraniu tego przycisku pojawi się następujące okno zmiany wymiarów warstwy:

Po wybraniu przycisku: skalowanie warstwa zostanie zeskalowana odpowiednio do wprowadzonych wartości.

Kolejno należy dopasować obraz do warstwy tak, aby po wyeksportowaniu osiągnąć zamierzony rozmiar. Aby to zrobić należy wybrać przycisk: obraz i wybrać opcję: dopasuj płótno do warstwy. Uzyskasz wtedy właściwy docelowy rozmiar zdjęcia.

Popularnym błędem jest wgrywanie na sklep zdjęcia bez przeskalowania go. Pamiętaj, że fotografia powinna mieć taki rozmiar jaki docelowo ma się ładować na stronie. Nie potrzebne jest wygrywanie obrazka, który ma np. wielkość 3000 pikseli x 3000 pikseli, gdy będzie on i tak wyświetlany jako mały. Traci na tym szybkość ładowania się strony.

Zalecam nie przekraczać wartości 1080 pikseli x 1080 pikseli.

Warto zaznaczyć, że wysokość czy szerokość mogą mieć różne wartości. Nie chodzi tutaj o trzymanie się sztywno wyznaczonych rozmiarów. Chodzi o to, by nie przekraczać zalecanej wielkości. Może więc to być np. 1000 x 1160, 800 x 1360, 1160 x 1000 pikseli.

Przykładowo skalując obraz z iphona otrzymujemy przy szerokości 810 pikseli wysokość 1080 pikseli i takie zdjęcie jest całkowicie wystarczające na stronę sklepu. Nie przejmuj się, że jest ono mniejsze od zalecanego, to jeszcze lepiej.

Widok programu z już przygotowanym projektem możliwym do eksportu, po wykonaniu prac na wgranych wcześniej grafikach, powinien prezentować się tak:

Na tym etapie należy kliknąć przycisk: plik i wybrać opcję: wyeksportuj jako

Pojawi się wtedy następujące okno eksportowania obrazów, w którym należy wybrać rozszerzenie .png lub .jpg w zależności od potrzeb:

i wybrać przycisk: wyeksportuj

okno dla rozszerzenia .png wygląda następująco:

okno dla rozszerzenia .jpg prezentuje się tak (możesz teraz za pomocą suwaka wybrać stopień kompresji zdjęcia):

Domyślnie ustawiony poziom to 90, polecam jednak mieścić się w widełkach 75-85. Tak ustawiony poziom kompresji znacząco zmniejsza wielkość pliku przy praktycznie niezauważalnej utracie jakości obrazka.

Po wybraniu przycisku wyeksportuj obraz jest zapisywany w docelowej lokalizacji w odpowiednim rozmiarze i rozszerzeniu.

Przykład gotowego wyeksportowanego projektu slidera stworzonego przez jednego z naszych Klientów:

Tak gotowe zdjęcie możesz wgrać na stronę.



Kamila Wieczorek

Kamila Wieczorek

Marketing Manager w Selesto Ceni sobie dobry content marketing, umiejętności analizy i wyciągania wniosków. Poza branżą interesuje się marketingiem sportu i fotografią.

Przeczytaj więcej
Optymalizacja zdjęć do sklepu internetowego w programie Gimp
Share this
MENU