Gdy otwieram stron\u0119 sklepu internetowego, pierwsze co rzuca mi si\u0119 w oczy to nie design, ale czas \u0142adowania. Albo raczej jego brak. Siedz\u0119, patrz\u0119 w bia\u0142\u0105 kart\u0119, czekam. Produkty, kt\u00f3re mia\u0142y sprzedawa\u0107, staj\u0105 si\u0119 powodem frustracji. Znasz to? W mojej codziennej pracy widz\u0119, \u017ce jeden z najcz\u0119stszych powod\u00f3w spadku konwersji w e-commerce to w\u0142a\u015bnie \u017ale zoptymalizowane obrazy. To nie jest wina skomplikowanego backendu czy wolnego hostingu \u2013 cz\u0119sto problem le\u017cy w tym, jak zarz\u0105dzamy grafikami.<\/p>\n
Pierwszy b\u0142\u0105d to przywi\u0105zanie do tradycyjnych format\u00f3w. JPEG i PNG s\u0105 jak stare kombi \u2013 wo\u017c\u0105, ale robi\u0105 to nieefektywnie. Nowoczesne formaty jak WebP czy AVIF oferuj\u0105 kompresj\u0119 nawet o 30-50% lepsz\u0105 przy tej samej jako\u015bci wizualnej. Przyk\u0142ad? Klient z bran\u017cy odzie\u017cowej \u2013 sklep z 10 000 produkt\u00f3w, ka\u017cde zdj\u0119cie w JPEG \u015brednio 500 KB. Po konwersji na WebP waga spad\u0142a do 250 KB. Mniej danych do przes\u0142ania to szybsze \u0142adowanie strony na urz\u0105dzeniach mobilnych, gdzie zasi\u0119g cz\u0119sto jest ograniczony. Google w swoich Core Web Vitals nagradza szybkie strony. Je\u015bli u\u017cywasz JPEG bez refleksji, tracisz szans\u0119 na lepsze pozycjonowanie.<\/p>\n
Powody s\u0105 dwa: przyzwyczajenie i obawa przed utrat\u0105 jako\u015bci. Tymczasem WebP i AVIF oferuj\u0105 jako\u015b\u0107 por\u00f3wnywaln\u0105 z JPEG przy znacznie mniejszym rozmiarze. Wsparcie przegl\u0105darek? WebP dzia\u0142a we wszystkich nowoczesnych przegl\u0105darkach od lat. AVIF jest wspierany przez Chromium i Firefox, a Safari dopiero nadrabia zaleg\u0142o\u015bci. Rozwi\u0105zanie? U\u017cyj elementu Drugi b\u0142\u0105d to serwowanie tych samych obraz\u00f3w na ka\u017cdym urz\u0105dzeniu. Klient z biurem stacjonarnym mo\u017ce mie\u0107 27-calowy monitor, ale u\u017cytkownik mobilny ogl\u0105da produkt na 6-calowym ekranie. Dlaczego wi\u0119c obaj pobieraj\u0105 to samo zdj\u0119cie w pe\u0142nej rozdzielczo\u015bci? To marnotrawstwo. W projektach, kt\u00f3re prowadz\u0119, widz\u0119 sklepy \u0142aduj\u0105ce obrazy 2000×2000 px na smartfony. Efekt? D\u0142ugie czasy wczytywania i wysokie wsp\u00f3\u0142czynniki odrzuce\u0144.<\/p>\n U\u017cyj atrybut\u00f3w LCP (Largest Contentful Paint) to jedna z metryk Core Web Vitals, kt\u00f3ra mierzy czas \u0142adowania najwi\u0119kszego elementu w widocznym obszarze. W e-commerce najcz\u0119\u015bciej jest to obraz bohatera lub pierwsze zdj\u0119cie produktu. Problem: je\u015bli ten obraz wa\u017cy 2 MB, LCP b\u0119dzie katastrofalne. \u017baden sklep nie sprzeda produktu, je\u015bli klient czeka d\u0142u\u017cej ni\u017c 2,5 sekundy na wy\u015bwietlenie pierwszego zdj\u0119cia.<\/p>\n Przede wszystkim skompresuj obraz LCP oddzielnie \u2013 niech b\u0119dzie w formacie WebP lub AVIF, w rozmiarze dopasowanym do wy\u015bwietlacza. U\u017cyj atrybutu Pracowa\u0142em z klientem \u2013 sklep z elektronik\u0105. LCP wynosi\u0142o 4,2 sekundy. Winowajc\u0105 by\u0142o zdj\u0119cie g\u0142\u00f3wne produktu w formacie JPEG, 2,5 MB, bez kompresji. Po konwersji na WebP (300 KB) i ustawieniu fetchpriority LCP spad\u0142o do 1,8 sekundy. Konwersja wzros\u0142a o 12% w ci\u0105gu miesi\u0105ca. Nie by\u0142o to efektem magii, tylko usuni\u0119ciem technicznego blokera.<\/p>\n Optymalizacja obraz\u00f3w to nie fanaberia, a konieczno\u015b\u0107 w e-commerce. Trzy opisane b\u0142\u0119dy \u2013 u\u017cywanie przestarza\u0142ych format\u00f3w, brak responsywno\u015bci i pomijanie LCP \u2013 s\u0105 proste do poprawienia, ale kosztowne w skutkach. Klienci nie czekaj\u0105. Google nie wybacza. Je\u015bli Tw\u00f3j sklep nie jest zoptymalizowany, konkurencja ju\u017c to robi. Przejd\u017a na WebP\/AVIF, wdr\u00f3\u017c srcset, zadbaj o LCP. Ka\u017cdy z tych krok\u00f3w to realna przewaga w szybko\u015bci i konwersji. A je\u015bli potrzebujesz wsparcia \u2013 w JurskiTech wiemy, jak to zrobi\u0107 bez zb\u0119dnych komplikacji.<\/p>\n","protected":false},"excerpt":{"rendered":" 3 b\u0142\u0119dy w optymalizacji obraz\u00f3w, kt\u00f3re rujnuj\u0105 szybko\u015b\u0107 e-commerce Gdy otwieram stron\u0119 sklepu internetowego, pierwsze co rzuca mi si\u0119 w oczy to nie design, ale czas \u0142adowania. Albo raczej jego brak. Siedz\u0119, patrz\u0119 w bia\u0142\u0105 kart\u0119, czekam. Produkty, kt\u00f3re mia\u0142y sprzedawa\u0107, staj\u0105 si\u0119 powodem frustracji. Znasz to? W mojej codziennej pracy widz\u0119, \u017ce jeden z<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[44,604,423,54,603],"class_list":["post-1860","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-core-web-vitals","tag-formaty-obrazow","tag-optymalizacja-obrazow","tag-seo-techniczne","tag-wydajnosc-e-commerce"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=1860"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1860\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=1860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=1860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=1860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<picture><\/code> z fallbackiem do JPEG. W ten spos\u00f3b serwujesz WebP\/AVIF tam, gdzie to mo\u017cliwe, a reszcie dajesz JPEG. To prosta zmiana, kt\u00f3ra mo\u017ce skr\u00f3ci\u0107 czas \u0142adowania o sekundy.<\/p>\n2. Brak responsywnych obraz\u00f3w \u2013 serwujesz wszystko do wszystkiego<\/h2>\n
Jak to naprawi\u0107?<\/h3>\n
srcset<\/code> i sizes<\/code>. Przyk\u0142adowo: masz zdj\u0119cie produktu. Dla urz\u0105dze\u0144 mobilnych wystarczy wersja 800×800 px, dla tablet\u00f3w 1200×1200, a dla desktop\u00f3w 2000×2000. Dodatkowo, u\u017cyj loading=\"lazy\"<\/code> dla obraz\u00f3w poni\u017cej linii ci\u0119cia. To nie tylko przyspiesza pierwsze renderowanie, ale te\u017c oszcz\u0119dza przepustowo\u015b\u0107. Google Lighthouse wyra\u017anie wskazuje brak responsywnych obraz\u00f3w jako problem. W praktyce, wdro\u017cenie srcset to kilka godzin pracy front-end developera, a korzy\u015bci s\u0105 wymierne \u2013 szybsze \u0142adowanie, ni\u017csze koszty transferu, lepszy SEO.<\/p>\n3. Zapominanie o optymalizacji LCP \u2013 gdy g\u0142\u00f3wny obraz jest ci\u0119\u017cki<\/h2>\n
Co robi\u0107?<\/h3>\n
fetchpriority=\"high\"<\/code>, aby przegl\u0105darka priorytetowo potraktowa\u0142a ten zas\u00f3b. Unikaj lazy loadingu dla obrazu LCP \u2013 to cz\u0119sty b\u0142\u0105d. Je\u015bli obraz LCP jest \u0142adowany z op\u00f3\u017anieniem, ca\u0142a strona wydaje si\u0119 wolna. Kolejna kwestia: hostuj obrazy na CDN z szybkim czasem odpowiedzi. Cloudflare, Fastly czy inne sieci dostarczania tre\u015bci skracaj\u0105 czas podr\u00f3\u017cy danych.<\/p>\nPrzyk\u0142ad z \u017cycia<\/h3>\n
Podsumowanie<\/h2>\n