Obrazy to jeden z tych element\u00f3w strony, kt\u00f3re na pierwszy rzut oka wydaj\u0105 si\u0119 proste. Wrzucasz plik, dodajesz alt text i tyle. Tymczasem to w\u0142a\u015bnie one cz\u0119sto s\u0105 najci\u0119\u017cszym sk\u0142adnikiem witryny, odpowiadaj\u0105c nawet za 60\u201370% wagi ca\u0142ej strony. W e-commerce, gdzie szybko\u015b\u0107 \u0142adowania bezpo\u015brednio przek\u0142ada si\u0119 na konwersj\u0119, z\u0142e zarz\u0105dzanie obrazami to drogi b\u0142\u0105d.<\/p>\n
Widzia\u0142em sklepy, kt\u00f3re traci\u0142y kilkana\u015bcie procent przychodu tylko dlatego, \u017ce ich zdj\u0119cia produktowe by\u0142y nieoptymalne. I nie chodzi o to, \u017ce by\u0142y niskiej jako\u015bci \u2013 wr\u0119cz przeciwnie, cz\u0119sto by\u0142y przesadnie dopracowane, wa\u017cy\u0142y po 5 MB i \u0142adowa\u0142y si\u0119 tak d\u0142ugo, \u017ce klient zd\u0105\u017cy\u0142 p\u00f3j\u015b\u0107 do konkurencji.<\/p>\n
Oto trzy b\u0142\u0119dy, kt\u00f3re najcz\u0119\u015bciej pope\u0142niaj\u0105 firmy \u2013 i jak je naprawi\u0107, \u017ceby nie straci\u0107 ani pieni\u0119dzy, ani pozycji w Google.<\/p>\n
Brzmi jak bana\u0142, ale wci\u0105\u017c widz\u0119 to na co drugiej stronie. Kto\u015b przygotowuje zdj\u0119cie produktu z przezroczystym t\u0142em, zapisuje jako JPEG, a przezroczysto\u015b\u0107 znika \u2013 zostaje bia\u0142e t\u0142o, ale wok\u00f3\u0142 produktu pojawiaj\u0105 si\u0119 artefakty. W efekcie zdj\u0119cie wygl\u0105da amatorsko.<\/p>\n
Jeszcze gorzej, gdy obraz z przezroczysto\u015bci\u0105 zapisany jako JPEG jest konwertowany do formatu, kt\u00f3ry tej przezroczysto\u015bci nie obs\u0142uguje \u2013 pojawia si\u0119 czarne t\u0142o. Takie b\u0142\u0119dy obni\u017caj\u0105 zaufanie do sklepu.<\/p>\n
Rozwi\u0105zanie:<\/strong> Je\u015bli potrzebujesz przezroczysto\u015bci, u\u017cywaj WebP z kana\u0142em alfa lub AVIF. Obie formaty s\u0105 nowoczesne, maj\u0105 lepsz\u0105 kompresj\u0119 ni\u017c PNG i s\u0105 obs\u0142ugiwane przez wi\u0119kszo\u015b\u0107 przegl\u0105darek. Dla pozosta\u0142ych mo\u017cesz u\u017cy\u0107 PNG jako fallbacku. Pami\u0119taj te\u017c, \u017ce w 2025 roku WebP to standard \u2013 Google od dawna promuje ten format, a jego wsparcie jest niemal powszechne. Nie ma wi\u0119c wym\u00f3wki, \u017ceby dalej u\u017cywa\u0107 ci\u0119\u017ckich PNG.<\/p>\n To klasyk. Firma wgrywa jeden obraz w wysokiej rozdzielczo\u015bci (np. 1920×1920 px) i ustawia go na stronie jako szeroko\u015b\u0107 300 px. Przegl\u0105darka i tak pobiera ten ogromny plik na smartfonie z ma\u0142ym ekranem. Efekt? Strona \u0142aduje si\u0119 dwa razy d\u0142u\u017cej ni\u017c powinna.<\/p>\n Widzia\u0142em sytuacj\u0119, gdzie po dodaniu srcset i sizes strona zacz\u0119\u0142a \u0142adowa\u0107 si\u0119 w 1,5 sekundy zamiast w 4. To nie magia \u2013 to \u015bwiadome serwowanie odpowiedniego rozmiaru obrazu dla danego viewportu.<\/p>\n Jak to zrobi\u0107?<\/strong> W HTML u\u017cywasz atrybutu Przyk\u0142ad:<\/p>\n Dzi\u0119ki temu przegl\u0105darka pobierze tylko ten plik, kt\u00f3ry jest potrzebny. Ogromna oszcz\u0119dno\u015b\u0107 danych i czasu.<\/p>\n Kolejny powszechny b\u0142\u0105d: \u0142adujesz wszystkie obrazy na stronie od razu, nawet te, kt\u00f3re s\u0105 widoczne dopiero po przewini\u0119ciu. W efekcie na pocz\u0105tkowy rendering czekasz d\u0142u\u017cej, bo przegl\u0105darka musi pobra\u0107 wszystko naraz.<\/p>\n Klient wchodzi na landing page \u2013 widzi puste miejsce na baner, a pod nim powoli pojawiaj\u0105 si\u0119 zdj\u0119cia. Zniecierpliwiony zamyka kart\u0119.<\/p>\n Jak to naprawi\u0107?<\/strong> Wystarczy doda\u0107 atrybut Przyk\u0142ad:<\/p>\n Dla prostoty mo\u017cesz te\u017c u\u017cy\u0107 wbudowanego Obrazy to nie tylko kwestia estetyki \u2013 to fundament wydajno\u015bci i pozycjonowania. Pope\u0142niaj\u0105c te trzy b\u0142\u0119dy, mo\u017cesz traci\u0107 frakcje sekund, kt\u00f3re zsumowane kosztuj\u0105 Ci\u0119 konkretne przychody.<\/p>\n Zadbaj o odpowiedni format (WebP\/AVIF), dostosuj rozmiar do urz\u0105dzenia (srcset) i \u0142aduj obrazy leniwie. To proste zmiany, kt\u00f3re realnie zwi\u0119ksz\u0105 szybko\u015b\u0107 strony i poprawi\u0105 wska\u017aniki Core Web Vitals.<\/p>\n Je\u015bli nie masz czasu na r\u0119czn\u0105 optymalizacj\u0119, istniej\u0105 automatyzacje \u2013 ale to ju\u017c temat na osobny artyku\u0142. Na pocz\u0105tek sprawd\u017a, czy Tw\u00f3j sklep nie pope\u0142nia tych b\u0142\u0119d\u00f3w, bo rozwi\u0105zanie jest cz\u0119sto ta\u0144sze ni\u017c my\u015blisz.<\/p>\n","protected":false},"excerpt":{"rendered":" Obrazy to jeden z tych element\u00f3w strony, kt\u00f3re na pierwszy rzut oka wydaj\u0105 si\u0119 proste. Wrzucasz plik, dodajesz alt text i tyle. Tymczasem to w\u0142a\u015bnie one cz\u0119sto s\u0105 najci\u0119\u017cszym sk\u0142adnikiem witryny, odpowiadaj\u0105c nawet za 60\u201370% wagi ca\u0142ej strony. W e-commerce, gdzie szybko\u015b\u0107 \u0142adowania bezpo\u015brednio przek\u0142ada si\u0119 na konwersj\u0119, z\u0142e zarz\u0105dzanie obrazami to drogi b\u0142\u0105d. Widzia\u0142em<\/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":[776,423,54,439],"class_list":["post-2699","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-ai-e-commerce","tag-optymalizacja-obrazow","tag-seo-techniczne","tag-wydajnosc-strony"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2699","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=2699"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2699\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=2699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=2699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=2699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}2. Zapominanie o srcset i sizes \u2013 ten sam obraz na wszystkie urz\u0105dzenia<\/h2>\n
srcset<\/code>, kt\u00f3ry wskazuje przegl\u0105darce r\u00f3\u017cne wersje tego samego obrazu, oraz sizes<\/code>, kt\u00f3ry m\u00f3wi, jaka przestrze\u0144 zajmie obraz na ekranie.<\/p>\n<img src=\"produkt-800.jpg\"\n srcset=\"produkt-400.jpg 400w,\n produkt-800.jpg 800w,\n produkt-1200.jpg 1200w\"\n sizes=\"(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw\"\n alt=\"Nazwa produktu\">\n<\/code><\/pre>\n3. Brak lazy loadingu dla obraz\u00f3w poni\u017cej folda<\/h2>\n
loading=\"lazy\"<\/code> do znacznik\u00f3w <img><\/code> i <iframe><\/code>. To native HTML, wspierany przez wszystkie nowoczesne przegl\u0105darki od lat. Mo\u017cesz te\u017c u\u017cy\u0107 Intersection Observer do w\u0142asnor\u0119cznej implementacji, ale w wi\u0119kszo\u015bci przypadk\u00f3w native wystarczy.<\/p>\n<img data-src=\"produkt.jpg\" alt=\"Nazwa\" class=\"lazy\" width=\"800\" height=\"800\">\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n var lazyImages = [].slice.call(document.querySelectorAll(\"img.lazy\"));\n if (\"IntersectionObserver\" in window) {\n let lazyImageObserver = new IntersectionObserver(function(entries, observer) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n let lazyImage = entry.target;\n lazyImage.src = lazyImage.dataset.src;\n lazyImage.classList.remove(\"lazy\");\n lazyImageObserver.unobserve(lazyImage);\n }\n });\n });\n lazyImages.forEach(function(lazyImage) {\n lazyImageObserver.observe(lazyImage);\n });\n }\n});\n<\/script>\n<\/code><\/pre>\nloading=\"lazy\"<\/code>, ale pami\u0119taj, \u017ce starsze przegl\u0105darki mog\u0105 go nie obs\u0142ugiwa\u0107 \u2013 warto mie\u0107 polyfill.<\/p>\nPodsumowanie<\/h2>\n