Optymalizacja grafik w e-commerce polega na zmniejszaniu wagi obrazów bez niepotrzebnej utraty jakości i poprawnym przygotowaniu ich do wyświetlania. Obejmuje dobór formatu i rozdzielczości, kompresję, tekst alternatywny, nazwy plików, responsywne wersje oraz sposób ładowania. Dobrze przygotowane zdjęcia szybciej się wyświetlają, wspierają dostępność i zwiększają szansę na widoczność produktów w Google Grafika.
Czym jest optymalizacja grafik w sklepie internetowym?
Optymalizacja grafik to przygotowanie obrazów tak, aby zachowały dobrą jakość przy możliwie małej wadze pliku. W sklepie dotyczy zdjęć produktów, banerów, miniaturek kategorii, grafik promocyjnych i innych elementów wizualnych.
Najczęściej obejmuje dobór odpowiedniego formatu, zmianę wymiarów, kompresję oraz przygotowanie wersji dopasowanych do różnych ekranów. Kompresja może być stratna lub bezstratna. Pierwsza zmniejsza wagę pliku kosztem części danych obrazu. Druga pozwala ograniczyć jego wagę bez utraty danych obrazu.
Optymalizacja grafik obejmuje także działania związane z image SEO. Znaczenie mają m.in. nazwa pliku, tekst alternatywny, kontekst obrazu i sposób jego osadzenia na stronie. Dla użytkownika równie ważne są ostrość zdjęcia, czytelność detali i szybkość wyświetlania.
Celem nie jest więc uzyskanie najmniejszego możliwego pliku. Grafika powinna być lekka, ale nadal na tyle dobrej jakości, aby klient mógł swobodnie ocenić produkt.
Dlaczego optymalizacja grafik ma znaczenie w e-commerce?
Optymalizacja grafik wpływa jednocześnie na wygodę zakupów, widoczność strony oraz sposób prezentowania produktów. W e-commerce każdy z tych obszarów może oddziaływać na decyzję klienta.
Duże pliki graficzne zwiększają ilość danych potrzebnych do wyświetlenia strony. Problem jest szczególnie odczuwalny przy wolniejszym internecie i na urządzeniach mobilnych.
Jeśli zdjęcia ładują się z opóźnieniem, użytkownik dłużej czeka na pełną kartę produktu. Może też zobaczyć przesuwające się elementy, gdy nie zarezerwowano miejsca na obraz.
Pomagają odpowiednie wymiary plików, responsywne obrazy oraz określenie szerokości i wysokości elementu. Przeglądarka może wtedy wcześniej zarezerwować potrzebną przestrzeń.
Grafiki mogą pojawiać się w Google Grafika, wynikach tekstowych oraz innych wizualnych powierzchniach wyszukiwarki. Google analizuje między innymi obraz, jego tekst alternatywny, nazwę pliku i kontekst strony.
Wydajność także ma znaczenie, ale nie działa jak prosty bonus rankingowy. Core Web Vitals są używane przez systemy rankingowe Google, lecz nie gwarantują wysokiej pozycji.
Zdjęcia często wpływają na LCP, czyli czas wyrenderowania największego widocznego elementu. Dlatego zbyt ciężki obraz główny może pogorszyć odczuwalną szybkość strony.
W sklepie zdjęcie zastępuje możliwość obejrzenia produktu na żywo. Powinno pokazywać kolor, fakturę, proporcje i cechy ważne przy zakupie.
Zbyt mocna kompresja może zniszczyć detale, które pomagają podjąć decyzję. Z kolei nadmiernie ciężkie pliki mogą opóźniać wyświetlenie galerii.
Nie optymalizuj zdjęć kosztem informacji potrzebnych klientowi. Najlepszy efekt daje równowaga między jakością obrazu a jego wagą.
Jak optymalizować grafiki w sklepie internetowym?
Dobra optymalizacja zdjęć e-commerce obejmuje wydajność, SEO, dostępność i sposób prezentacji produktu. Nie kończy się na jednorazowym zmniejszeniu pliku.
Najlepiej zacząć od największych grafik na kluczowych stronach. W praktyce będą to zwykle zdjęcia główne produktów, banery oraz obrazy widoczne bez przewijania.
Wybierz odpowiedni format i rozmiar grafiki
Format grafiki dobierz do rodzaju obrazu i sposobu, w jaki będzie wyświetlany w sklepie. Nie ma jednego rozwiązania, które sprawdzi się najlepiej w każdym przypadku.
- WebP dobrze sprawdza się przy zdjęciach produktowych i innych grafikach internetowych. Obsługuje kompresję stratną i bezstratną oraz przezroczystość. Pozwala zwykle uzyskać mniejsze pliki niż JPEG lub PNG przy porównywalnej jakości.
- AVIF pozwala osiągnąć bardzo dobrą jakość przy niewielkiej wadze pliku. Dobrze sprawdza się zwłaszcza przy fotografiach i obrazach zawierających dużo szczegółów. Przed wdrożeniem warto sprawdzić jakość generowanych plików i obsługę formatu w swoim sklepie.
- PNG warto stosować przede wszystkim tam, gdzie potrzebujesz bezstratnej jakości lub przezroczystości. W przypadku dużych zdjęć produktowych pliki PNG mogą być znacznie cięższe niż WebP czy AVIF.
- JPEG nadal dobrze sprawdza się w przypadku fotografii, szczególnie gdy korzystasz ze starszego procesu publikacji lub systemu, który nie generuje nowszych formatów. WebP i AVIF często pozwalają jednak uzyskać mniejszy plik przy podobnej jakości.
Sam wybór formatu to dopiero połowa pracy. Grafika powinna mieć również wymiary dopasowane do miejsca, w którym faktycznie będzie wyświetlana.
Google obsługuje między innymi JPEG, PNG, WebP, SVG i AVIF w wynikach graficznych.
Nazwa pliku ma znaczenie
Nazwa pliku może pomóc wyszukiwarce zrozumieć, czego dotyczy obraz. Google zaleca krótkie i opisowe nazwy zamiast przypadkowych ciągów znaków.
IMG_48293.jpg nie przekazuje żadnej informacji o produkcie. buty-do-biegania-meskie-czarne.jpg od razu opisuje zawartość obrazu.
Dobra nazwa pliku powinna być krótka, czytelna i zgodna z tym, co faktycznie widać. Słowa najlepiej rozdzielać myślnikami.
W praktyce często stosuje się nazwy bez polskich znaków, aby uprościć obsługę adresów URL. Nie jest to jednak warunek indeksacji przez Google.
Nie dodawaj serii synonimów i fraz tylko dla SEO. Nazwa ma opisywać obraz, a nie pełnić funkcję listy słów kluczowych.
Atrybut ALT – opis obrazu dla Google i użytkowników
Atrybut alt zawiera tekstową alternatywę obrazu. Pomaga wyszukiwarkom zrozumieć jego temat i wspiera osoby korzystające z technologii asystujących.
Dobry ALT powinien:
- opisywać znaczenie obrazu w kontekście strony, np.
Czarna kurtka zimowa damska z kapturem; - być napisany naturalnym i konkretnym językiem;
- pomijać zwroty typu „zdjęcie przedstawia”, ponieważ czytnik ekranu zwykle informuje już, że element jest obrazem;
- unikać upychania słów kluczowych. Tekst typu
kurtka damska kurtka zimowa sklep kurtki czarnejest nienaturalny i nie pomaga użytkownikowi; - uwzględniać istotne cechy widoczne na konkretnym ujęciu, jeśli przekazują użytkownikowi dodatkową informację.
ALT nie zawsze musi zawierać opis. Jeśli obraz jest wyłącznie dekoracyjny i nie przekazuje istotnej informacji, właściwe może być zastosowanie pustego atrybutu alt="". Nie ma też potrzeby tworzenia na siłę różnych opisów dla kilku zdjęć, jeśli nie przekazują one dodatkowych informacji o produkcie.
Czy warto uzupełniać tytuł grafiki (Title)?
Atrybut title nie zastępuje tekstu alternatywnego i nie powinien być podstawą image SEO. Google znacznie mocniej eksponuje w zaleceniach ALT, nazwę pliku i kontekst obrazu.
Możesz użyć title, gdy rzeczywiście wnosi dodatkową informację dla użytkownika. Nie ma jednak potrzeby uzupełniania go mechanicznie przy każdym zdjęciu produktu.
Nie kopiuj do title tego samego tekstu tylko dlatego, że pole istnieje w CMS. Przy obrazach dekoracyjnych W3C zaleca brak title oraz pusty alt.
Dane strukturalne i mikroformaty związane z grafikami
Dane strukturalne pomagają Google lepiej zrozumieć informacje o produkcie, w tym jego nazwę, cenę, dostępność czy zdjęcia. W e-commerce najważniejszy jest przede wszystkim typ Product.
Właściwość image pozwala wskazać zdjęcie produktu, np. za pomocą adresu URL lub obiektu ImageObject. Samo dodanie tych danych nie gwarantuje jednak, że Google pokaże zdjęcie w rozszerzonym wyniku wyszukiwania.
Poprawnie wdrożone dane produktowe mogą pomóc Google lepiej prezentować ofertę w wynikach wyszukiwania, w tym w powierzchniach związanych z produktami, Grafiką Google czy Google Lens.
Jeśli korzystasz z Google Merchant Center, dane o produktach i zdjęciach możesz dodatkowo przesyłać w feedzie produktowym. Google rekomenduje korzystanie zarówno z danych strukturalnych na stronie, jak i danych przesyłanych do Merchant Center.
Zdjęcie wskazane w danych powinno faktycznie przedstawiać dany produkt i być dostępne dla Google. Jego adres nie powinien być blokowany przed indeksowaniem.
Zadbaj o kontekst grafiki
Google nie ocenia obrazu w oderwaniu od strony. Bierze pod uwagę także teksty, które pomagają określić temat grafiki.
Umieszczaj zdjęcie produktu blisko jego nazwy, opisu i informacji o wariancie. To tworzy czytelny kontekst zarówno dla użytkownika, jak i wyszukiwarki.
Podpis pod zdjęciem ma sens, jeśli wnosi dodatkową informację. Nie trzeba dodawać podpisu do każdej fotografii tylko ze względów SEO.
Spójność jest szczególnie ważna na stronach kategorii i kartach produktów. Obraz, nagłówek oraz treść powinny dotyczyć tego samego produktu lub tematu.
Lazy loading i szybkość ładowania grafik
Lazy loading sprawia, że przeglądarka nie pobiera od razu wszystkich obrazów znajdujących się na stronie. Grafiki są ładowane dopiero wtedy, gdy użytkownik zbliża się do miejsca, w którym mają się pojawić. Dzięki temu strona może szybciej wyświetlić najważniejsze treści.
To rozwiązanie dobrze sprawdza się przy obrazach znajdujących się niżej na stronie, na przykład przy kolejnych produktach, rekomendacjach czy dalszych zdjęciach w galerii.
Nie warto jednak stosować lazy loadingu do głównego zdjęcia widocznego od razu po wejściu na stronę. Jeśli taki obraz wpływa na LCP, czyli czas wyświetlenia największego elementu w widocznym obszarze strony, jego opóźnione pobranie może pogorszyć wynik.
Najważniejsze zdjęcie powinno być szybko wykrywane przez przeglądarkę i pobierane z odpowiednim priorytetem. W wybranych przypadkach można wykorzystać preload lub ustawić wyższy priorytet pobierania.
Nie należy jednak nadawać wysokiego priorytetu wszystkim grafikom. Jeśli przeglądarka zacznie pobierać wiele dużych obrazów jednocześnie, mogą one konkurować o zasoby i spowolnić ładowanie najważniejszych elementów strony.
Mapa witryny obrazów (Image Sitemap)
Mapa witryny obrazów przekazuje Google adresy grafik powiązanych ze stronami sklepu. Może pomóc znaleźć obrazy trudniejsze do odkrycia podczas zwykłego crawlowania.
Możesz utworzyć osobną mapę albo dodać informacje o obrazach do istniejącej mapy witryny. Oba rozwiązania są akceptowane przez Google.
Takie rozwiązanie jest szczególnie przydatne w dużych sklepach oraz przy rozbudowanych katalogach zdjęć. Pomaga także wtedy, gdy obrazy są trudniejsze do odnalezienia.
Image Sitemap nie zastępuje poprawnego osadzenia zdjęć na stronie. Google nadal zaleca standardowe elementy HTML i dostępne adresy plików.
Skalowanie i przycinanie grafiki w sklepie internetowym
Skalowanie zmienia wymiary obrazu, a przycinanie usuwa część kadru. Oba działania pomagają dopasować zdjęcie do miejsca, w którym będzie wyświetlane. Najpierw ustal docelowe proporcje zdjęć w danym module sklepu. Dzięki temu produkty nie będą wyglądały przypadkowo na listach i w galerii.
Przycinanie nie powinno usuwać cech ważnych dla oceny produktu. Dotyczy to szczególnie detali, proporcji oraz elementów pokazujących rzeczywisty rozmiar.
Więcej praktycznych wskazówek znajdziesz w poradniku o skalowaniu i przycinaniu zdjęć.
Narzędzia do zmniejszania i kompresji zdjęć
Do kompresji możesz używać narzędzi graficznych, aplikacji internetowych albo mechanizmów dostępnych w systemie sklepu. Ważniejszy od konkretnego programu jest efekt końcowy. Po kompresji sprawdź obraz na komputerze i telefonie. Przyjrzyj się teksturom, krawędziom, drobnym napisom oraz przejściom tonalnym.
Jeśli zdjęcie wygląda dobrze, porównaj jego wagę z plikiem źródłowym. Przy większej liczbie produktów warto ustandaryzować sposób eksportowania grafik.
Lista przydatnych rozwiązań znajduje się w zestawieniu narzędzi do obróbki grafiki.
FAQ – najczęściej zadawane pytania o optymalizację grafik w e-commerce
Może wpływać, jeśli zmniejszasz rozdzielczość albo stosujesz kompresję stratną. Przy rozsądnych ustawieniach różnica może być niewidoczna dla użytkownika.
Tak, WebP jest dobrym wyborem dla wielu zdjęć produktowych i grafik sklepowych. Zwykle pozwala ograniczyć wagę przy zachowaniu dobrej jakości.
Optymalizuj je przed publikacją oraz po zmianach szablonu, galerii lub sposobu wyświetlania. Starsze zasoby warto przejrzeć podczas audytu wydajności.
Nie zawsze potrzebujesz innego zdjęcia, ale urządzenia nie powinny pobierać niepotrzebnie dużych plików. Responsywne obrazy pozwalają dopasować rozdzielczość do ekranu.
Wybierz darmowy szablon i uruchom sklep bez projektowania od zera. Sprawdź, jak Twój sklep może wyglądać już dziś.
Zobacz szablony