Formaty plików graficznych w e-commerce - JPG, PNG, WebP i SVG, kiedy który

Aleksandra Marecka

Head of Digital Marketing

11.06.2026

Formaty plików graficznych w e‑commerce - JPG, PNG, WebP i SVG, kiedy który

Projektujemy grafiki dla e-commerce

Aleksandra MareckaHead of Digital Marketing

Grafika

Formaty plików graficznych w e-commerce dobiera się do rodzaju obrazu: zdjęcia produktów zapisuj w WebP lub JPG, grafiki z przezroczystością i ostrym tekstem w PNG lub bezstratnym WebP, a logo i ikony w SVG. Najlżejszym uniwersalnym wyborem do sklepu jest dziś WebP - według dokumentacji Google stratny WebP jest o 25-34% mniejszy od porównywalnego pliku JPEG. Gdy platforma lub marketplace nie przyjmuje WebP, bezpiecznym zapasem pozostaje JPG.

Wybór formatu wygląda na techniczny drobiazg, ale wpływa na trzy rzeczy, które sprzedawca widzi na co dzień: ostrość miniatur, szybkość ładowania sklepu i to, czy plik w ogóle przejdzie walidację przy wystawianiu oferty. Ten sam produkt potrzebuje zwykle kilku wersji pliku - innej do galerii w sklepie, innej na marketplace, innej do reklamy i jeszcze innej do druku ulotki. Poniżej porządkujemy, kiedy który format ma sens i jak nie pogubić się w wersjach.

[#wazne] W skrócie: do zdjęć produktów w sklepie używaj WebP (albo AVIF, jeśli platforma go obsługuje) z JPG jako zapasem, do grafik z przezroczystością i drobnym tekstem - PNG lub bezstratnego WebP, a do logo i ikon - SVG. Na marketplace'y i do reklam wysyłaj formaty, które dana platforma wymienia w swoich wytycznych. Zawsze trzymaj oryginał w pełnej jakości i eksportuj z niego wersje do kanałów. W Vinson projektujemy grafiki dla e-commerce i przekazujemy je w formatach dopasowanych do każdego kanału sprzedaży.

Czym są formaty plików graficznych i czym różni się raster od wektora

Format pliku graficznego to sposób zapisu obrazu w pliku: określa, jak przechowywane są piksele lub kształty, czy plik jest kompresowany i czy obsługuje przezroczystość albo animację. Od formatu zależy waga pliku, jakość obrazu po zapisie i to, gdzie plik można wykorzystać.

Najważniejszy podział to grafika rastrowa i wektorowa. Grafika rastrowa składa się z siatki pikseli - tak zapisane są zdjęcia produktów, czyli pliki JPG, PNG, WebP i AVIF. Web.dev zwraca uwagę, że raster nie jest niezależny od rozdzielczości: po powiększeniu traci ostrość. Grafika wektorowa opisuje kształty matematycznie, więc wygląda ostro w każdym rozmiarze. Według web.dev formaty wektorowe najlepiej sprawdzają się przy prostych kształtach geometrycznych, takich jak logo, tekst czy ikony. Typowy format wektorowy w sieci to SVG.

Drugi podział dotyczy kompresji. Kompresja stratna usuwa część informacji o obrazie, których oko zwykle nie zauważa, i daje małe pliki - tak działa JPG i stratny WebP. Kompresja bezstratna zmniejsza plik bez utraty danych - tak działa PNG i bezstratny WebP. Do zdjęć produktów zwykle wystarcza kompresja stratna, a bezstratną zostawia się dla grafik z ostrymi krawędziami, tekstem i przezroczystym tłem.

W praktyce sklepu internetowego wystarczy znać cztery formaty i wiedzieć, do czego służy każdy z nich:

[#chart:pgr58a]

JPG, PNG, WebP i SVG - porównanie formatów plików graficznych

Poniższa tabela zbiera cechy formatów na podstawie przewodnika MDN po typach plików graficznych i dokumentacji Google. Ostatnia kolumna to nasze praktyczne zastosowanie w sklepie i na marketplace'ach.

Format	Rodzaj	Kompresja	Przezroczystość	Zastosowanie w e-commerce
JPG (JPEG)	raster	stratna	nie	zdjęcia produktów, gdy kanał nie przyjmuje WebP; zapasowa wersja zdjęć
PNG	raster	bezstratna	tak	grafiki z tekstem, ikony rastrowe, elementy z przezroczystym tłem
WebP	raster	stratna i bezstratna	tak	domyślny format zdjęć i banerów w sklepie
AVIF	raster	stratna i bezstratna	tak	zdjęcia w sklepie, gdy platforma go obsługuje, z zapasowym formatem
SVG	wektor	nie dotyczy	tak	logo, ikony, proste ilustracje i elementy interfejsu
GIF	raster	bezstratna, paleta kolorów	tylko pełna lub brak	proste animacje; dziś zwykle lepiej WebP lub wideo

Kilka uwag z dokumentacji, które warto znać. MDN przypomina, że JPEG nie obsługuje kanału alfa, więc nie zapiszesz w nim produktu na przezroczystym tle. AVIF według MDN nie obsługuje renderowania progresywnego - plik musi zostać pobrany w całości, zanim się wyświetli - i warto podawać dla niego zapasowy format. Przy GIF-ach MDN radzi, by do statycznych grafik wybierać PNG, a do animacji rozważyć WebP, AVIF lub APNG, a web.dev zaleca zamiast animowanego GIF-a użycie elementu wideo.

Kiedy JPG nadal wystarczy

JPG to najpopularniejszy format zdjęć i według MDN wciąż dobry zapasowy format dla fotografii. Sprawdza się tam, gdzie liczy się zgodność: przy wysyłce zdjęć do hurtowni, w plikach dla partnerów, w kanałach, które nie przyjmują nowszych formatów. Słabością JPG jest wielokrotne zapisywanie - każdy kolejny zapis pliku, który już był skompresowany stratnie, pogarsza jakość. Dlatego wersje JPG zawsze eksportuj z oryginału, a nie z poprzedniego JPG.

Kiedy potrzebny jest PNG

MDN wskazuje PNG tam, gdzie liczy się wierne odwzorowanie źródła albo potrzebna jest przezroczystość. W sklepie to grafiki z drobnym tekstem, tabele rozmiarów, ikony cech produktu i elementy, które mają leżeć na kolorowym tle. PNG nie nadaje się natomiast do zdjęć: kompresja bezstratna daje przy fotografii bardzo ciężkie pliki. Częsty błąd to zapis wszystkich zdjęć produktów z usuniętym tłem jako PNG - w sklepie lepiej sprawdzi się WebP z przezroczystością.

Bezpłatna wycena grafiki

Potrzebujesz grafik, które sprzedają?

Grafiki ofertowe, banery i miniatury
Projekty pod marketplace’y i sklep
Szybka wycena bez zobowiązań

Wycenę przygotuje Aleksandra Marecka, Head of Digital Marketing

Zobacz szczegóły usługi →

WebP w sklepie internetowym - kiedy warto przejść na nowszy format

WebP to format Google, który łączy zalety JPG i PNG: obsługuje kompresję stratną i bezstratną, przezroczystość i animację. Według dokumentacji Google stratny WebP jest o 25-34% mniejszy od porównywalnego JPEG, a bezstratny o 26% mniejszy od PNG. Bezstratny WebP z przezroczystością potrzebuje według Google tylko ok. 22% dodatkowych bajtów, a stratny WebP z przezroczystością bywa ok. 3 razy mniejszy od PNG. MDN podaje podobny rząd wielkości: stratne pliki WebP są średnio o 25-35% mniejsze od JPEG o podobnej jakości.

Google wymienia natywną obsługę WebP w przeglądarkach Chrome, Safari, Firefox, Edge i Opera. Google Search obsługuje w wynikach grafiki w formatach BMP, GIF, JPEG, PNG, WebP, SVG i AVIF i zaleca, by rozszerzenie pliku zgadzało się z jego rzeczywistym typem (sprawdź aktualne wytyczne). Zmiana formatu na WebP nie odbiera więc zdjęciom widoczności w Grafice Google.

Trzeba jednak pamiętać o narzędziach. Na przykład w artykule pomocy Figmy o eksporcie wymienione są formaty PNG, JPG, SVG i PDF - grafikę do WebP trzeba wtedy przekonwertować osobno albo zostawić to platformie sklepowej, jeśli sama zamienia pliki przy wgrywaniu. Zanim przestawisz cały proces, sprawdź, co faktycznie robi Twój sklep: otwórz kartę produktu i w narzędziach deweloperskich przeglądarki zobacz, w jakim formacie pobierane są zdjęcia.

Jeśli wahasz się, czy w ogóle zmieniać obecny sposób pracy, pomoże proste porównanie:

[#chart:pgr58b]

Sam format to tylko część pracy. Równie ważne są wymiary pliku i poziom kompresji - szerzej opisujemy to w tekście o tym, jak przeprowadzić optymalizację zdjęć w sklepie internetowym.

AVIF i zapasowe formaty - jak podać kilka wersji jednego obrazu

AVIF to kolejny nowoczesny format, który według MDN dobrze sprawdza się zarówno przy obrazach statycznych, jak i animowanych. MDN zaleca jednak, by przy AVIF podawać zapasowe formaty o szerszej obsłudze. Służy do tego element picture w kodzie strony: przeglądarka wybiera pierwszy obsługiwany format z listy, a jeśli nie obsługuje żadnego, wyświetla obraz ze zwykłego znacznika img. MDN zauważa, że zwykle wystarczą dwa lub trzy źródła, na przykład AVIF, WebP i JPG.

W praktyce większość sprzedawców nie musi tego kodować ręcznie. Wiele platform sklepowych i wtyczek generuje wersje zdjęć w nowszych formatach automatycznie, a w szablonie podaje je przeglądarce w odpowiedniej kolejności. Twoim zadaniem jest wgrywać dobre oryginały w rozsądnych wymiarach i sprawdzić, czy funkcja konwersji jest włączona. Grafik powinien natomiast wiedzieć, które pliki platforma przerobi sama, a które musi przygotować w gotowym formacie - na przykład grafiki do opisu produktu wgrywane przez edytor.

SVG - format plików graficznych do logo i ikon

MDN opisuje SVG jako format wektorowy idealny dla elementów interfejsu, ikon i diagramów, które muszą wyglądać dokładnie w różnych rozmiarach, i zaznacza, że nie nadaje się do zdjęć. Dla ikon MDN zaleca wybierać wersję SVG, jeśli tylko istnieje. Jeśli logo musi być rastrem, MDN radzi kompresję bezstratną, bo rozmycia i barwne obwódki wokół tekstu i ostrych krawędzi są bardzo widoczne.

W sklepie SVG to przede wszystkim logo w nagłówku, ikony dostawy i płatności, ikony cech produktu i proste elementy graficzne. Plik wektorowy zostaje ostry także na ekranach o dużej gęstości pikseli, gdzie raster wymaga wielokrotnie większej liczby pikseli. Pamiętaj tylko, że nie każde pole w panelu sklepu czy marketplace przyjmuje SVG - wtedy przygotuj wersję PNG. Jakie pliki logo warto mieć w komplecie, opisaliśmy w tekście o tym, jak zaprojektować logo dla sklepu internetowego.

Formaty plików graficznych w ofertach, reklamach i sklepie - co gdzie wysłać

Każdy kanał sprzedaży ma własną listę akceptowanych formatów, wymiarów i zasad treści. Nie ma jednego pliku, który pasuje wszędzie, dlatego warto podzielić eksport na kanały:

Sklep internetowy. WebP lub AVIF do zdjęć i banerów, z JPG lub PNG jako zapasem, jeśli szablon tego wymaga. Logo i ikony w SVG.
Marketplace'y. Formaty z listy w pomocy danej platformy - najczęściej JPG i PNG, czasem także WebP. Każda platforma ma też własne minimalne wymiary i zasady tła (sprawdź aktualne wytyczne).
Google Merchant Center. Pomoc Google wymienia JPEG, WebP, PNG, nieanimowany GIF, BMP i TIFF. Zdjęcie nie może zawierać tekstu promocyjnego, znaków wodnych ani ramek (sprawdź aktualne wytyczne). Powiększanie małego zdjęcia nie poprawia jakości - lepiej użyć większego oryginału.
Reklamy. Formaty i limity wagi z dokumentacji systemu reklamowego; dla każdej platformy osobny zestaw plików.
Druk. Zwykle PDF przygotowany według wymagań drukarni, w innym profilu kolorów niż grafiki na ekran.

[#tip] Trzymaj jeden folder z oryginałami w pełnej jakości (zdjęcia z sesji, pliki projektowe, logo w wektorze) i osobne foldery eksportów dla każdego kanału. Nazwij je tak, żeby było wiadomo, skąd pochodzi plik, np. sklep-webp, marketplace-jpg, reklamy. Gdy zmienią się wymagania platformy, wygenerujesz nowe wersje z oryginałów zamiast przerabiać skompresowane pliki.

Jak przygotować komplet plików jednego produktu

Zapisz oryginały z sesji lub projektu w najwyższej dostępnej jakości i nie nadpisuj ich.
Wyeksportuj zdjęcia do sklepu w WebP, w wymiarach dopasowanych do galerii i powiększenia.
Przygotuj wersje JPG lub PNG dla kanałów, które nie przyjmują WebP, zgodnie z ich wytycznymi.
Grafiki z tekstem i ikonami zapisz bezstratnie (PNG lub bezstratny WebP), a logo w SVG.
Sprawdź na telefonie i komputerze, czy pliki wyglądają ostro i czy rozszerzenia zgadzają się z formatem.

Najczęstsze błędy przy wyborze formatu pliku graficznego

Większość problemów z grafikami w sklepach nie wynika ze złego projektu, tylko ze złego zapisu. Najczęściej spotykamy te sytuacje:

[#chart:pgr58c]

Warto też uważać na pliki, które tylko udają nowy format. Zmiana rozszerzenia z .png na .webp nie konwertuje obrazu - plik dalej jest PNG, a niezgodność rozszerzenia z typem pliku może powodować błędy przy wgrywaniu. Google wprost zaleca, by rozszerzenie odpowiadało typowi pliku. Konwersję zawsze wykonuj w programie graficznym, narzędziu do kompresji albo przez platformę sklepu.

Ostatnia pułapka to eksport grafik z narzędzi projektowych z ustawieniami domyślnymi. Przy zdjęciach dobrze sprawdza się wygładzające próbkowanie obrazu, a przy ikonach i logo rastrowych - takie, które zachowuje ostre krawędzie. Figma opisuje w pomocy dwa tryby: szczegółowy, odpowiedni do zdjęć i gradientów, oraz podstawowy, przeznaczony do ikon, logo i pixel artu.

Jak Vinson pomaga dobrać formaty plików graficznych

Projektujemy grafiki dla e-commerce: miniatury i galerie ofert, banery, identyfikację sklepu i materiały reklamowe. Każdy projekt przekazujemy w formatach dopasowanych do kanału - inne pliki trafiają do sklepu, inne na marketplace'y, a inne do kampanii reklamowych - a logo i ikony także w wersji wektorowej. Szczegóły znajdziesz na stronie projektowanie graficzne dla e-commerce.

Vinson to agencja e-commerce z Bochni, działająca od 2021 roku. Jesteśmy Allegro Ads Partner+, Google Partner, Meta Business Partner, certyfikowanym partnerem Base, partnerem Empik Place i autoryzowanym partnerem Shoper. Klienci oceniają nas na 4,9/5 ze 171 opinii, a współpracowaliśmy z ponad 500 firmami.

Najczęściej zadawane pytania

Jaki format zdjęć jest najlepszy do sklepu internetowego?

Do zdjęć produktów w sklepie najlepiej sprawdza się WebP, a tam, gdzie platforma go obsługuje, także AVIF. Według Google stratny WebP jest o 25-34% mniejszy od porównywalnego JPEG. Jako zapasowy format warto mieć JPG, bo przyjmuje go niemal każdy kanał sprzedaży.

JPG czy PNG - który format wybrać do zdjęć produktów?

Do zdjęć produktów zwykle JPG albo WebP, bo kompresja stratna daje dużo mniejsze pliki przy niewidocznej różnicy jakości. PNG wybierz dla grafik z drobnym tekstem, ikon i elementów z przezroczystym tłem. Zdjęcie zapisane jako PNG zwykle waży wielokrotnie więcej bez widocznej korzyści.

Czy marketplace'y przyjmują pliki WebP?

To zależy od platformy i sposobu wystawiania ofert. Część kanałów przyjmuje WebP, inne wymagają JPG lub PNG - na przykład Google Merchant Center wymienia WebP na liście obsługiwanych formatów. Przed eksportem sprawdź aktualne wytyczne każdej platformy, na której sprzedajesz.

W jakim formacie zapisać logo sklepu?

Podstawą jest wersja wektorowa SVG, która zostaje ostra w każdym rozmiarze i na każdym ekranie. Do miejsc, które nie przyjmują SVG, przygotuj PNG z przezroczystym tłem. Do druku logo przekazuje się zwykle w PDF lub innym formacie wektorowym wskazanym przez drukarnię.

Czy zmiana rozszerzenia pliku zmienia jego format?

Nie. Zmiana nazwy z .jpg na .webp nie konwertuje obrazu, a plik zachowuje swój rzeczywisty format. Google zaleca, by rozszerzenie odpowiadało typowi pliku. Konwersję wykonuj w programie graficznym, narzędziu do kompresji lub przez platformę sklepu.

Dobrze dobrane formaty plików graficznych w e-commerce to ostre miniatury, szybszy sklep i mniej odrzuconych zdjęć na marketplace'ach. Jeśli chcesz dostać komplet grafik gotowych do każdego kanału sprzedaży, zajrzyj na stronę projektowania graficznego dla e-commerce.