[{"data":1,"prerenderedAt":704},["ShallowReactive",2],{"post-optymalizacja-obrazow-na-stronie":3,"rel-optymalizacja-obrazow-na-stronie":635},{"id":4,"title":5,"author":6,"body":7,"category":603,"cover":604,"date":605,"description":606,"draft":607,"extension":608,"faq":609,"meta":610,"navigation":611,"path":612,"readingTime":613,"seo":614,"sources":616,"stem":625,"subcategory":626,"tags":627,"takeaways":633,"updated":604,"__hash__":634},"blog/blog/optymalizacja-obrazow-na-stronie.md","Optymalizacja obrazów na stronie","Piotr Stankiewicz",{"type":8,"value":9,"toc":580},"minimark",[10,15,19,22,26,30,33,36,39,48,52,55,60,63,71,75,78,81,85,88,92,95,98,101,123,129,146,150,153,162,230,240,250,254,268,271,308,311,314,318,324,327,345,355,362,366,372,418,421,432,439,443,446,449,452,459,463,466,470,474,477,487,490,493,500,504,507,514,520,526,532,539,543,548,555,559,562,566,569,573,576],[11,12,14],"h2",{"id":13},"optymalizacja-obrazów-na-stronie-czyli-o-co-tu-chodzi","Optymalizacja obrazów na stronie, czyli o co tu chodzi",[16,17,18],"p",{},"Obrazy to najczęściej największy składnik wagi strony internetowej. Nieoptymalizowane zdjęcia odpowiadają za wolne ładowanie, słaby wynik LCP w Core Web Vitals i wyższy wskaźnik porzucania strony przez użytkowników. Dobra wiadomość jest taka, że optymalizacja obrazów to obszar, w którym można uzyskać duże efekty bez gruntownego przebudowywania witryny.",[16,20,21],{},"Ten artykuł wyjaśnia, co konkretnie należy zrobić z obrazami na stronie firmowej, jakich formatów używać, jak kompresować pliki bez straty widocznej jakości i jak skonfigurować ładowanie, żeby Google i użytkownicy byli zadowoleni.",[23,24],"stat-row",{":items":25},"[{\"value\":\"60-70%\",\"label\":\"typowy udział obrazów w łącznej wadze strony\",\"sub\":\"Google Developers\"},{\"value\":\"25-35%\",\"label\":\"mniejsze pliki WebP vs JPEG przy tej samej jakości\",\"sub\":\"Google Developers\"},{\"value\":\"27,6%\",\"label\":\"średni CTR pierwszej pozycji organicznej w Google\",\"sub\":\"Backlinko, Google CTR Stats\"}]",[11,27,29],{"id":28},"dlaczego-obrazy-mają-tak-duży-wpływ-na-szybkość-strony","Dlaczego obrazy mają tak duży wpływ na szybkość strony",[16,31,32],{},"Przeglądarka ładuje wszystkie zasoby strony od góry do dołu: HTML, CSS, JavaScript, a w tym też obrazy. Jeśli zdjęcie w nagłówku waży 3 MB i nie jest skompresowane, przeglądarka musi je w całości pobrać, zanim wyświetli tę część strony użytkownikowi. To bezpośrednio psuje wskaźnik LCP, czyli czas do wyrenderowania największego widocznego elementu.",[16,34,35],{},"Google włączył Core Web Vitals jako czynnik rankingowy w 2021 roku. Wskaźnik LCP powinien wynosić poniżej 2,5 sekundy, żeby Google uznał stronę za dobrą. Większość stron firmowych z nieoptymalizowanymi obrazami nie spełnia tego kryterium.",[16,37,38],{},"Drugi skutek to zachowanie użytkowników. Strona ładująca się ponad trzy sekundy notuje wyraźnie wyższy wskaźnik porzuceń, co oznacza, że ludzie zamykają kartę, zanim zobaczą treść. To problem zarówno dla konwersji, jak i dla sygnałów behawioralnych, które pośrednio wpływają na pozycje.",[16,40,41,42,47],{},"Więcej o tym, jak szybkość ładowania łączy się z pozycjami w Google, opisujemy w artykule ",[43,44,46],"a",{"href":45},"/blog/jak-zmniejszyc-czas-ladowania-strony-i-poprawic-pozycje","jak zmniejszyć czas ładowania strony i poprawić pozycje",".",[11,49,51],{"id":50},"format-pliku-webp-avif-jpeg-i-png","Format pliku: WebP, AVIF, JPEG i PNG",[16,53,54],{},"Wybór formatu to pierwszy krok optymalizacji. Każdy format ma inne zastosowanie i inny stosunek jakości do rozmiaru pliku.",[56,57],"compare-cols",{":a":58,":b":59},"{\"title\":\"Formaty nowoczesne (zalecane)\",\"items\":[\"WebP: o 25-35% mniejszy niż JPEG, obsługiwany przez wszystkie nowoczesne przeglądarki\",\"AVIF: o 40-50% mniejszy niż JPEG, lepsza jakość, ale wolniejsze kodowanie\",\"WebP to dziś standard dla zdjęć i grafik na stronach\",\"AVIF warto stosować przy nowych projektach z obsługą nowoczesnych przeglądarek\"]}","{\"title\":\"Formaty starsze (do zastąpienia)\",\"items\":[\"JPEG: dobry do zdjęć, ale WebP jest lepszy w każdym aspekcie\",\"PNG: dobry do grafik z przezroczystością, ale duże pliki dla zdjęć\",\"GIF: tylko do prostych animacji, WebP animowany jest mniejszy\",\"BMP, TIFF: nigdy nie powinny trafiać na stronę internetową\"]}",[16,61,62],{},"Dla większości stron firmowych optymalna strategia to: WebP dla zdjęć i fotografii, SVG dla ikon i logotypów, PNG wyłącznie tam, gdzie potrzebna jest przezroczystość i WebP nie wystarczy.",[64,65,68],"callout",{"title":66,"type":67},"Jak sprawdzić, czy strona używa WebP?","tip",[16,69,70],{},"W narzędziach DevTools przeglądarki Chrome naciśnij F12, przejdź do zakładki Network i zaznacz filtr Img. Odśwież stronę. W kolumnie Type zobaczysz format każdego obrazka. Jeśli większość to jpeg lub png, a nie webp, masz pole do optymalizacji.",[11,72,74],{"id":73},"kompresja-obrazów-stratna-i-bezstratna","Kompresja obrazów: stratna i bezstratna",[16,76,77],{},"Kompresja to zmniejszenie rozmiaru pliku bez zmiany jego wymiarów. Istnieją dwa podejścia: bezstratne (lossless), gdzie nie traci się żadnej informacji, i stratne (lossy), gdzie celowo usuwa się dane, których ludzkie oko i tak nie rozróżni.",[16,79,80],{},"W praktyce dla stron internetowych kompresja stratna na poziomie 80-85 procent jakości jest zazwyczaj niewidoczna dla użytkownika, a zmniejsza rozmiar pliku o 50 do 80 procent.",[82,83],"feature-cards",{":items":84},"[{\"icon\":\"ph:image-duotone\",\"title\":\"Squoosh\",\"value\":\"bezpłatne\",\"desc\":\"Narzędzie online od Google. Konwertuje i kompresuje obrazy w przeglądarce. Pozwala porównać oryginał z wynikiem na żywo. Idealne do ręcznej optymalizacji.\"},{\"icon\":\"ph:cloud-arrow-up-duotone\",\"title\":\"TinyPNG / TinyJPEG\",\"value\":\"bezpłatne do limitu\",\"desc\":\"Proste narzędzie online do kompresji bezstratnej PNG i JPEG. Szybkie i wygodne dla jednorazowych operacji.\"},{\"icon\":\"ph:lightning-duotone\",\"title\":\"Imagify / ShortPixel\",\"value\":\"wtyczki WordPress\",\"desc\":\"Automatyczna kompresja i konwersja do WebP przy każdym wgranym obrazku. Działają w tle bez konieczności ręcznego przetwarzania.\"},{\"icon\":\"ph:terminal-duotone\",\"title\":\"ImageMagick / cwebp\",\"value\":\"narzędzia CLI\",\"desc\":\"Dla deweloperów, przetwarzanie wsadowe setek plików jednym poleceniem. Wbudowane w pipeline CI/CD lub skrypty buildowania.\"}]",[16,86,87],{},"Przy kompresji warto zachować oryginalny plik w wyższej rozdzielczości poza serwerem. Skompresowanego pliku nie da się przywrócić do oryginału, a może się zdarzyć, że będziesz potrzebować wersji do druku lub innych zastosowań.",[11,89,91],{"id":90},"wymiary-obrazu-dopasowanie-do-miejsca-wyświetlania","Wymiary obrazu: dopasowanie do miejsca wyświetlania",[16,93,94],{},"Kompresja to połowa sukcesu. Druga połowa to dopasowanie rozmiaru w pikselach do miejsca, w którym obraz faktycznie się wyświetla.",[16,96,97],{},"Jeśli na stronie masz sekcję z zdjęciem wyświetlanym w kolumnie szerokiej na 600 pikseli, a wgrywasz plik o szerokości 3000 pikseli, przeglądarka i tak go pobiera w całości, a potem zmniejsza przez CSS. Użytkownik płaci za pobieranie 5-krotnie większego pliku niż potrzebuje.",[16,99,100],{},"Zasady dopasowania wymiarów:",[102,103,104,108,111],"ul",{},[105,106,107],"li",{},"Ustal maksymalną szerokość wyświetlania dla każdego miejsca na stronie (sekcja hero, kafelka w siatce, miniaturka artykułu).",[105,109,110],{},"Na wyświetlacze Retina (2x) wgraj wersję o podwojonej szerokości pikseli, ale skompresowaną mocniej niż wersję standardową.",[105,112,113,114,118,119,122],{},"Używaj atrybutu ",[115,116,117],"code",{},"srcset"," w tagu ",[115,120,121],{},"\u003Cimg>",", żeby serwować różne rozmiary w zależności od rozdzielczości ekranu i rozmiaru okna przeglądarki.",[16,124,125,126,128],{},"WordPress automatycznie generuje kilka rozmiarów obrazka przy wgraniu (thumbnail, medium, large). Upewnij się, że motyw używa atrybutu ",[115,127,117],{},", żeby przeglądarka mogła wybrać optymalny rozmiar.",[64,130,133],{"title":131,"type":132},"Atrybut srcset i sizes","info",[16,134,135,136,138,139,142,143,47],{},"Atrybut ",[115,137,117],{}," to lista kilku wersji obrazka z podanymi szerokościami. Atrybut ",[115,140,141],{},"sizes"," mówi przeglądarce, jak szeroki będzie obraz na różnych ekranach. Razem pozwalają na dokładne dopasowanie pobieranego pliku do urządzenia użytkownika. Przykład: ",[115,144,145],{},"\u003Cimg src=\"foto-800.webp\" srcset=\"foto-400.webp 400w, foto-800.webp 800w, foto-1600.webp 1600w\" sizes=\"(max-width: 600px) 400px, 800px\">",[11,147,149],{"id":148},"lazy-loading-ładuj-obrazy-wtedy-gdy-są-potrzebne","Lazy loading: ładuj obrazy wtedy, gdy są potrzebne",[16,151,152],{},"Strona z galerią 20 zdjęć nie powinna ładować wszystkich naraz. Użytkownik widzi tylko to, co mieści się na ekranie, a reszta czeka poniżej. Lazy loading sprawia, że przeglądarka pobiera obraz dopiero wtedy, gdy użytkownik przewija stronę w jego kierunku.",[16,154,155,156,159,160,47],{},"Wdrożenie jest proste, bo lazy loading to dziś standard HTML5. Wystarczy dodać atrybut ",[115,157,158],{},"loading=\"lazy\""," do tagu ",[115,161,121],{},[163,164,169],"pre",{"className":165,"code":166,"language":167,"meta":168,"style":168},"language-html shiki shiki-themes github-light github-dark","\u003Cimg src=\"zdjecie.webp\" loading=\"lazy\" alt=\"Opis zdjęcia\" width=\"800\" height=\"600\">\n","html","",[115,170,171],{"__ignoreMap":168},[172,173,176,180,184,188,191,195,198,200,203,206,208,211,214,216,219,222,224,227],"span",{"class":174,"line":175},"line",1,[172,177,179],{"class":178},"sVt8B","\u003C",[172,181,183],{"class":182},"s9eBZ","img",[172,185,187],{"class":186},"sScJk"," src",[172,189,190],{"class":178},"=",[172,192,194],{"class":193},"sZZnC","\"zdjecie.webp\"",[172,196,197],{"class":186}," loading",[172,199,190],{"class":178},[172,201,202],{"class":193},"\"lazy\"",[172,204,205],{"class":186}," alt",[172,207,190],{"class":178},[172,209,210],{"class":193},"\"Opis zdjęcia\"",[172,212,213],{"class":186}," width",[172,215,190],{"class":178},[172,217,218],{"class":193},"\"800\"",[172,220,221],{"class":186}," height",[172,223,190],{"class":178},[172,225,226],{"class":193},"\"600\"",[172,228,229],{"class":178},">\n",[16,231,232,233,235,236,239],{},"Ważna zasada: nie stosuj ",[115,234,158],{}," dla obrazu, który jest widoczny od razu po otwarciu strony, szczególnie dla elementu LCP. Dla niego należy użyć atrybutu ",[115,237,238],{},"fetchpriority=\"high\"",", który mówi przeglądarce, żeby pobrała go priorytetowo.",[64,241,244],{"title":242,"type":243},"Nie opóźniaj elementu LCP","warning",[16,245,246,247,249],{},"Element LCP to zazwyczaj główny obraz na stronie, baner lub zdjęcie w sekcji hero. Dodanie do niego ",[115,248,158],{}," opóźni jego ładowanie i pogorszy wynik LCP. Stosuj lazy loading tylko dla obrazów poniżej widocznego obszaru strony.",[11,251,253],{"id":252},"atrybuty-width-i-height-rezerwuj-miejsce-przed-załadowaniem","Atrybuty width i height: rezerwuj miejsce przed załadowaniem",[16,255,256,257,259,260,263,264,267],{},"Gdy przeglądarka buduje stronę, musi wiedzieć, ile miejsca zarezerwować na każdy element. Jeśli tag ",[115,258,121],{}," nie ma podanych atrybutów ",[115,261,262],{},"width"," i ",[115,265,266],{},"height",", przeglądarka nie wie, ile miejsca zająć. Po załadowaniu obrazka inne elementy przeskakują, co zwiększa wskaźnik CLS (Cumulative Layout Shift) i psuje stabilność układu strony.",[16,269,270],{},"Podawanie wymiarów to obowiązek, nie opcja:",[163,272,274],{"className":165,"code":273,"language":167,"meta":168,"style":168},"\u003Cimg src=\"zdjecie.webp\" width=\"800\" height=\"600\" alt=\"Opis zdjęcia\">\n",[115,275,276],{"__ignoreMap":168},[172,277,278,280,282,284,286,288,290,292,294,296,298,300,302,304,306],{"class":174,"line":175},[172,279,179],{"class":178},[172,281,183],{"class":182},[172,283,187],{"class":186},[172,285,190],{"class":178},[172,287,194],{"class":193},[172,289,213],{"class":186},[172,291,190],{"class":178},[172,293,218],{"class":193},[172,295,221],{"class":186},[172,297,190],{"class":178},[172,299,226],{"class":193},[172,301,205],{"class":186},[172,303,190],{"class":178},[172,305,210],{"class":193},[172,307,229],{"class":178},[16,309,310],{},"Proporcja podanych wymiarów wystarczy, żeby przeglądarka zarezerwowała miejsce o odpowiednim stosunku szerokości do wysokości. CSS może potem skalować obraz do potrzebnego rozmiaru, ale CLS będzie niski.",[16,312,313],{},"WordPress od wersji 5.5 dodaje atrybuty width i height automatycznie. Starsze motywy lub niestandardowe implementacje galerii mogą tego nie robić. Sprawdź w PageSpeed Insights, czy pojawia się ostrzeżenie \"Image elements do not have explicit width and height\".",[11,315,317],{"id":316},"tekst-alternatywny-alt-seo-i-dostępność","Tekst alternatywny (alt): SEO i dostępność",[16,319,135,320,323],{},[115,321,322],{},"alt"," to tekstowy opis obrazka. Pełni dwie funkcje: dostępnościową (czytniki ekranu dla osób niewidomych odczytują ten tekst) i SEO (Google indeksuje tekst alt jako opis obrazka, co pomaga w widoczności w Google Grafika).",[16,325,326],{},"Zasady pisania dobrego atrybutu alt:",[102,328,329,332,339,342],{},[105,330,331],{},"Opisuj, co faktycznie widać na zdjęciu, konkretnie i zwięźle.",[105,333,334,335,338],{},"Jeśli obraz pełni funkcję dekoracyjną i nie wnosi informacji, zostaw alt pusty (",[115,336,337],{},"alt=\"\"","), ale nie pomijaj atrybutu.",[105,340,341],{},"Nie upychaj w alt fraz kluczowych na siłę. To nie pomaga i może być odebrane jako spam.",[105,343,344],{},"Dla zdjęć produktów lub usług uwzględnij nazwę, kontekst i lokalizację, jeśli to naturalne.",[16,346,347,348,351,352,47],{},"Przykład dobrego alt: ",[115,349,350],{},"alt=\"Gabinet stomatologiczny w centrum Wrocławia, fotel dentystyczny i sprzęt do leczenia\"",". Przykład złego: ",[115,353,354],{},"alt=\"dentysta wrocław najtaniej najlepszy gabinet stomatologiczny\"",[16,356,357,358,47],{},"Więcej o tym, jak treść strony wpływa na widoczność lokalną, opisujemy w artykule ",[43,359,361],{"href":360},"/blog/jak-pisac-tresci-na-strone-lokalna-zeby-rankowac","jak pisać treści na stronę lokalną, żeby rankować",[11,363,365],{"id":364},"preload-elementu-lcp-priorytet-dla-kluczowego-obrazu","Preload elementu LCP: priorytet dla kluczowego obrazu",[16,367,368,369,47],{},"Jeśli element LCP to obraz wczytywany przez CSS (background-image) lub ładowany przez JavaScript, przeglądarka odkrywa go późno w procesie ładowania strony. Można to naprawić przez deklarację preload w sekcji ",[115,370,371],{},"\u003Chead>",[163,373,375],{"className":165,"code":374,"language":167,"meta":168,"style":168},"\u003Clink rel=\"preload\" as=\"image\" href=\"/images/hero.webp\" fetchpriority=\"high\">\n",[115,376,377],{"__ignoreMap":168},[172,378,379,381,384,387,389,392,395,397,400,403,405,408,411,413,416],{"class":174,"line":175},[172,380,179],{"class":178},[172,382,383],{"class":182},"link",[172,385,386],{"class":186}," rel",[172,388,190],{"class":178},[172,390,391],{"class":193},"\"preload\"",[172,393,394],{"class":186}," as",[172,396,190],{"class":178},[172,398,399],{"class":193},"\"image\"",[172,401,402],{"class":186}," href",[172,404,190],{"class":178},[172,406,407],{"class":193},"\"/images/hero.webp\"",[172,409,410],{"class":186}," fetchpriority",[172,412,190],{"class":178},[172,414,415],{"class":193},"\"high\"",[172,417,229],{"class":178},[16,419,420],{},"To instruuje przeglądarkę, żeby zaczęła pobierać ten plik jak najwcześniej, jeszcze zanim przetworzy CSS lub skrypty. Efekt jest widoczny w wynikach LCP, szczególnie na urządzeniach mobilnych z wolniejszym połączeniem.",[16,422,423,424,427,428,431],{},"W WordPress preload można dodać przez funkcję ",[115,425,426],{},"wp_head"," w pliku ",[115,429,430],{},"functions.php"," lub przez opcję w wtyczkach do optymalizacji szybkości takich jak WP Rocket.",[64,433,436],{"title":434,"type":435},"Efekt preload na LCP","success",[16,437,438],{},"Na typowej stronie firmowej z dużym zdjęciem w sekcji hero, dodanie preload do elementu LCP potrafi skrócić wynik LCP o 0,3 do 0,8 sekundy. To zmiana często wystarczająca do przejścia z wyniku \"wymaga poprawy\" do \"dobry\".",[11,440,442],{"id":441},"cdn-dla-obrazów-szybsze-pobieranie-z-bliskiego-serwera","CDN dla obrazów: szybsze pobieranie z bliskiego serwera",[16,444,445],{},"CDN (Content Delivery Network) to sieć serwerów rozmieszczonych geograficznie, które przechowują kopie zasobów strony bliżej użytkownika. Obrazy pobrane z serwera w Niemczech docierają do użytkownika w Polsce szybciej niż z serwera w USA.",[16,447,448],{},"Cloudflare w bezpłatnym planie daje podstawowy CDN i automatycznie serwuje zasoby przez swoje węzły. Dla większości stron firmowych jest to wystarczające rozwiązanie bez dodatkowych kosztów.",[16,450,451],{},"Bardziej zaawansowane opcje to Cloudflare Images, Imgix lub Cloudinary, które oferują transformację obrazów na żądanie, czyli automatyczną zmianę rozmiaru, kompresję i konwersję formatu na podstawie parametrów URL. Są przydatne przy dużych serwisach z setkami zdjęć, ale dla typowej strony firmowej bezpłatny CDN w zupełności wystarcza.",[453,454],"bars-chart",{":items":455,"caption":456,"title":457,"unit":458},"[{\"label\":\"Konwersja JPEG na WebP\",\"value\":35,\"display\":\"do 35%\",\"highlight\":true},{\"label\":\"Kompresja stratna 80-85%\",\"value\":55,\"display\":\"do 55%\",\"highlight\":true},{\"label\":\"Lazy loading poniżej fold\",\"value\":20,\"display\":\"do 20%\",\"highlight\":false},{\"label\":\"Dopasowanie wymiarów do wyświetlania\",\"value\":40,\"display\":\"do 40%\",\"highlight\":false},{\"label\":\"CDN dla obrazów\",\"value\":15,\"display\":\"do 15%\",\"highlight\":false}]","Dane szacunkowe na podstawie typowych przypadków. Efekty zależą od stanu wyjściowego strony.","Szacowany zysk z poszczególnych działań optymalizacji obrazów","%",[11,460,462],{"id":461},"kolejność-działań-jak-zoptymalizować-obrazy-krok-po-kroku","Kolejność działań: jak zoptymalizować obrazy krok po kroku",[16,464,465],{},"Jeśli zaczynasz od zera, poniższa kolejność daje największy efekt przy najmniejszym nakładzie pracy.",[467,468],"steps",{":items":469},"[{\"title\":\"Zmierz aktualny stan\",\"text\":\"Wejdź na pagespeed.web.dev i wpisz adres strony. Sprawdź, jakie ostrzeżenia dotyczą obrazów: 'Properly size images', 'Serve images in next-gen formats', 'Efficiently encode images'. Zapisz wyniki.\"},{\"title\":\"Skompresuj i przekonwertuj istniejące obrazy\",\"text\":\"Pobierz istniejące obrazy ze strony, przekonwertuj je do WebP w Squoosh lub TinyPNG i wgraj z powrotem. Na WordPress zainstaluj Imagify lub ShortPixel i uruchom kompresję całej biblioteki mediów.\"},{\"title\":\"Dopasuj wymiary do miejsca wyświetlania\",\"text\":\"Dla każdego miejsca na stronie ustal maksymalną potrzebną szerokość w pikselach. Przytnij i przeskaluj obrazy przed wgraniem. Nie wgrywaj zdjęć o szerokości powyżej 2000 pikseli, chyba że naprawdę zajmują pełną szerokość ekranu.\"},{\"title\":\"Dodaj atrybuty width i height\",\"text\":\"Sprawdź, czy każdy tag img ma podane wymiary. W nowoczesnym WordPress dzieje się to automatycznie, ale sprawdź w DevTools, czy nie ma obrazków bez tych atrybutów.\"},{\"title\":\"Ustaw lazy loading dla obrazów poniżej fold\",\"text\":\"Dodaj loading='lazy' do obrazów, które nie są widoczne od razu po otwarciu strony. Element LCP powinien mieć fetchpriority='high', a nie lazy.\"},{\"title\":\"Dodaj preload dla elementu LCP\",\"text\":\"Zidentyfikuj element LCP strony w PageSpeed Insights. Jeśli to obraz, dodaj do nagłówka strony tag link rel='preload' as='image' z jego adresem URL.\"},{\"title\":\"Zmierz wyniki po zmianach\",\"text\":\"Ponownie uruchom PageSpeed Insights. Sprawdź, czy ostrzeżenia dotyczące obrazów zniknęły lub zmniejszyły szacowany koszt czasowy. Dane terenowe w Google Search Console aktualizują się przez 28 dni.\"}]",[11,471,473],{"id":472},"optymalizacja-obrazów-a-pozycje-lokalne","Optymalizacja obrazów a pozycje lokalne",[16,475,476],{},"Szybkość strony ma szczególne znaczenie dla firm lokalnych, bo większość wyszukiwań lokalnych odbywa się na smartfonach. Użytkownik szuka usługi w Warszawie, Krakowie lub Wrocławiu na telefonie z mobilnym połączeniem, a powolna strona traci go na rzecz szybszego konkurenta.",[16,478,479,480,486],{},"Według danych Backlinko, 46 procent wszystkich wyszukiwań w Google ma intencję lokalną. Pierwsze wyniki organiczne zbierają zdecydowanie większość kliknięć. Firma na pozycji 1 zbiera średnio 27,6 procent kliknięć, na pozycji 10 poniżej 3 procent (",[43,481,485],{"href":482,"rel":483},"https://backlinko.com/google-ctr-stats",[484],"nofollow","Backlinko, Google CTR Stats",").",[16,488,489],{},"Szybka strona z dobrze zoptymalizowanymi obrazami to jeden z elementów budowania widoczności lokalnej. Szczegóły dotyczące pozycjonowania w konkretnych miastach znajdziesz na stronach dla Warszawy, Krakowa, Wrocławia i Gdańska.",[16,491,492],{},"Całościowe podejście do technicznego SEO opisujemy na stronie pozycjonowanie stron.",[494,495],"trend-chart",{":series":496,":xLabels":497,"caption":498,"title":499},"[{\"label\":\"Wynik PageSpeed Mobile\",\"color\":\"#22c55e\",\"values\":[34,52,68,79,87]},{\"label\":\"Wynik PageSpeed Desktop\",\"color\":\"#3b82f6\",\"values\":[55,70,82,90,94]}]","[\"tydzień 1\",\"tydzień 2\",\"tydzień 3\",\"tydzień 4\",\"tydzień 6\"]","Dane poglądowe.","Przykładowy wzrost wyniku PageSpeed po optymalizacji obrazów",[11,501,503],{"id":502},"narzędzia-do-audytu-obrazów","Narzędzia do audytu obrazów",[16,505,506],{},"Przed przystąpieniem do optymalizacji warto wiedzieć, co konkretnie wymaga poprawy. Kilka narzędzi, które pomagają to ustalić.",[16,508,509,513],{},[510,511,512],"strong",{},"PageSpeed Insights"," wskazuje konkretne obrazy z szacowanymi oszczędnościami w sekundach. Sekcja \"Możliwości\" zawiera trzy pozycje dotyczące obrazów: rozmiar pliku, format i dopasowanie wymiarów.",[16,515,516,519],{},[510,517,518],{},"Screaming Frog"," to narzędzie do audytu SEO, które w wersji bezpłatnej pozwala przeskanować do 500 URL-i i wyciągnąć listę wszystkich obrazów na stronie z ich rozmiarami, atrybutami alt i adresami URL.",[16,521,522,525],{},[510,523,524],{},"Google Search Console"," w raporcie Core Web Vitals wskazuje podstrony ze słabym wynikiem LCP, co często jest bezpośrednio powiązane z problemem z obrazami.",[16,527,528,531],{},[510,529,530],{},"Chrome DevTools",", zakładka Lighthouse, generuje szczegółowy audyt z rekomendacjami dotyczącymi obrazów, cache, JavaScriptu i innych zasobów.",[16,533,534,535,47],{},"Więcej o konfiguracji i korzystaniu z Google Search Console opisujemy w artykule ",[43,536,538],{"href":537},"/blog/jak-skonfigurowac-google-search-console","jak skonfigurować Google Search Console",[11,540,542],{"id":541},"najczęstsze-pytania","Najczęstsze pytania",[544,545,547],"h3",{"id":546},"czy-format-webp-jest-bezpieczny-do-stosowania-na-stronie","Czy format WebP jest bezpieczny do stosowania na stronie?",[16,549,550,551,554],{},"Tak. WebP jest obsługiwany przez wszystkie nowoczesne przeglądarki, w tym Chrome, Firefox, Safari (od wersji 14), Edge i Opera. Obsługa przekracza 95 procent użytkowników globalnie. Jeśli potrzebujesz obsługi starszych przeglądarek, można użyć znacznika ",[115,552,553],{},"\u003Cpicture>"," z WebP jako głównym formatem i JPEG jako fallbackiem, ale dla większości stron firmowych sam WebP jest wystarczający.",[544,556,558],{"id":557},"o-ile-optymalizacja-obrazów-poprawia-wynik-pagespeed","O ile optymalizacja obrazów poprawia wynik PageSpeed?",[16,560,561],{},"Efekt zależy od stanu wyjściowego. Strona z nieoptymalizowanymi zdjęciami z aparatu fotograficznego może poprawić wynik z 30 do 80 punktów wyłącznie przez kompresję i konwersję do WebP. Na stronach, które miały już częściową optymalizację, wzrost będzie mniejszy. W praktyce optymalizacja obrazów jest najczęściej najważniejszym pojedynczym działaniem dla poprawy wyniku PageSpeed.",[544,563,565],{"id":564},"czy-warto-używać-avif-zamiast-webp","Czy warto używać AVIF zamiast WebP?",[16,567,568],{},"AVIF jest nowszym formatem i oferuje lepszą kompresję niż WebP, szczególnie przy niskich nastawach jakości. Jednak kodowanie plików AVIF jest wolniejsze, a wsparcie w starszych przeglądarkach nieco węższe niż WebP. Dla nowych projektów z nowoczesnym stackiem (Nuxt, Next.js) AVIF jest dobrym wyborem. Dla WordPress z typową konfiguracją WebP jest prostszym i wystarczającym rozwiązaniem.",[544,570,572],{"id":571},"jak-sprawdzić-który-obraz-jest-elementem-lcp","Jak sprawdzić, który obraz jest elementem LCP?",[16,574,575],{},"Otwórz PageSpeed Insights lub Lighthouse w Chrome DevTools i uruchom analizę. W sekcji Diagnostics znajdź wpis \"Largest Contentful Paint element\". Narzędzie wskaże konkretny element HTML, który jest mierzony jako LCP. Najczęściej jest to obrazek w sekcji hero albo zdjęcie w nagłówku strony.",[577,578,579],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":168,"searchDepth":581,"depth":581,"links":582},2,[583,584,585,586,587,588,589,590,591,592,593,594,595,596],{"id":13,"depth":581,"text":14},{"id":28,"depth":581,"text":29},{"id":50,"depth":581,"text":51},{"id":73,"depth":581,"text":74},{"id":90,"depth":581,"text":91},{"id":148,"depth":581,"text":149},{"id":252,"depth":581,"text":253},{"id":316,"depth":581,"text":317},{"id":364,"depth":581,"text":365},{"id":441,"depth":581,"text":442},{"id":461,"depth":581,"text":462},{"id":472,"depth":581,"text":473},{"id":502,"depth":581,"text":503},{"id":541,"depth":581,"text":542,"children":597},[598,600,601,602],{"id":546,"depth":599,"text":547},3,{"id":557,"depth":599,"text":558},{"id":564,"depth":599,"text":565},{"id":571,"depth":599,"text":572},"strony-internetowe",null,"2026-06-02","Optymalizacja obrazów na stronie to jeden z najszybszych sposobów na przyspieszenie ładowania, poprawę Core Web Vitals i lepsze pozycje w Google.",false,"md",[],{},true,"/blog/optymalizacja-obrazow-na-stronie",12,{"title":5,"description":615},"Optymalizacja obrazów na stronie to jeden z najszybszych sposobów na przyspieszenie ładowania, poprawę Core Web Vitals i lepsze pozycje w Google.",[617,620,622],{"label":618,"url":619},"Google Search Central - Search Documentation","https://developers.google.com/search/docs",{"label":621,"url":482},"Backlinko - Google CTR Stats",{"label":623,"url":624},"Backlinko - Local SEO Stats","https://backlinko.com/local-seo-stats","blog/optymalizacja-obrazow-na-stronie","wydajnosc-cwv",[628,629,630,631,632],"optymalizacja obrazów","szybkość strony","core web vitals","WebP","wydajność",[],"uVlrOsZmdjZkXFvrGQxZAGRykQYRJKQPjZ8bUm3_YqQ",[636,643,649,655,660,665,671,676,681,687,694,699],{"path":637,"title":638,"description":639,"date":640,"readingTime":641,"subcategory":642},"/blog/strona-wizytowka-a-rozbudowany-serwis-co-wybrac","Strona wizytówka a rozbudowany serwis, co wybrać","Strona wizytówka a serwis, która opcja jest lepsza dla Twojej firmy? Porównujemy zakres, koszt i wpływ na SEO, żebyś podjął decyzję na podstawie liczb.","2026-09-19",10,"koszt-wycena",{"path":644,"title":645,"description":646,"date":647,"readingTime":613,"subcategory":648},"/blog/migracja-strony-na-nowy-hosting-bez-przestojow","Migracja strony na nowy hosting bez przestojów","Migracja strony na hosting krok po kroku. Jak przenieść stronę bez przestoju, co zrobić z DNS i jak uniknąć błędów przy przeprowadzce serwera.","2026-09-11","domeny-hosting-bezpieczenstwo",{"path":650,"title":651,"description":652,"date":653,"readingTime":654,"subcategory":642},"/blog/strona-internetowa-dla-uslugodawcy-co-zawierac-i-ile-kosztuje","Strona internetowa dla usługodawcy, co zawierać i ile kosztuje","Sprawdź, co powinna zawierać strona dla usługodawcy, ile kosztuje jej wykonanie i czego unikać przy zamawianiu. Praktyczny przewodnik dla firm usługowych.","2026-09-10",11,{"path":656,"title":657,"description":658,"date":659,"readingTime":613,"subcategory":626},"/blog/ekologiczny-hosting-czy-szybszy-i-zielony-serwer-ma-sens","Ekologiczny hosting, czy szybszy i zielony serwer ma sens","Ekologiczny hosting to serwer zasilany energią odnawialną. Sprawdź, czy zielony hosting jest szybszy, co daje certyfikat węglowy i kiedy warto go wybrać.","2026-09-09",{"path":661,"title":662,"description":663,"date":664,"readingTime":654,"subcategory":642},"/blog/kiedy-warto-zaplacic-wiecej-za-strone-internetowa","Kiedy warto zapłacić więcej za stronę internetową","Droższa strona internetowa się opłaca, gdy chcesz klientów z Google. Sprawdź, w jakich sytuacjach wyższy budżet daje realny zwrot i kiedy tańsza opcja wystarczy.","2026-09-03",{"path":666,"title":667,"description":668,"date":669,"readingTime":654,"subcategory":670},"/blog/no-code-dla-firm-kiedy-wystarcza-a-kiedy-zawodzi","No-code dla firm, kiedy wystarcza a kiedy zawodzi","No-code dla firm: kiedy narzędzia bez kodu wystarczą, a kiedy zablokują rozwój. Konkretne przykłady, porównanie kosztów i prosta lista do podjęcia decyzji.","2026-08-29","technologie-cms",{"path":672,"title":673,"description":674,"date":675,"readingTime":654,"subcategory":648},"/blog/strona-na-wordpressie-zaatakowana-co-robic-i-jak-zapobiegac","Strona na WordPressie zaatakowana, co robić i jak zapobiegać","Strona na WordPressie zaatakowana? Dowiedz się, co robić krok po kroku i jak wdrożyć bezpieczeństwo WordPress, żeby atak się nie powtórzył.","2026-08-28",{"path":677,"title":678,"description":679,"date":680,"readingTime":613,"subcategory":626},"/blog/jak-zbyt-wiele-wtyczek-zabija-wydajnosc-strony","Jak zbyt wiele wtyczek zabija wydajność strony","Wtyczki a wydajność strony: jak nadmiar dodatków WordPress spowalnia ładowanie, obniża wyniki Core Web Vitals i psuje pozycje w Google. Praktyczny poradnik.","2026-08-25",{"path":682,"title":683,"description":684,"date":685,"readingTime":654,"subcategory":686},"/blog/przycisk-cta-gdzie-go-umiescic-i-jak-sformulowac","Przycisk CTA, gdzie go umieścić i jak sformułować","Przycisk CTA decyduje, czy odwiedzający zostanie klientem. Dowiedz się, gdzie go umieścić na stronie i jak go sformułować, żeby generował kontakty.","2026-08-23","ux-design-konwersja",{"path":688,"title":689,"description":690,"date":691,"readingTime":692,"subcategory":693},"/blog/strona-dla-biura-rachunkowego-jak-sie-wyroznic-lokalnie","Strona dla biura rachunkowego, jak się wyróżnić lokalnie","Strona dla biura rachunkowego, która przyciąga klientów z Google: struktura, treści, SEO lokalne i elementy budujące zaufanie do firmy księgowej.","2026-08-19",13,"strony-pod-seo",{"path":695,"title":696,"description":697,"date":698,"readingTime":613,"subcategory":642},"/blog/dlaczego-dwie-oferty-na-strone-roznia-sie-o-kilka-tysiecy","Dlaczego dwie oferty na stronę różnią się o kilka tysięcy","Różnice w ofertach na stronę potrafią sięgać kilku tysięcy złotych. Wyjaśniamy, co konkretnie stoi za tą rozpiętością i jak porównywać wyceny uczciwie.","2026-08-18",{"path":700,"title":701,"description":702,"date":703,"readingTime":654,"subcategory":670},"/blog/strona-kodowana-od-zera-co-zyskujesz","Strona kodowana od zera, co zyskujesz","Strona kodowana od zera daje maksymalną szybkość, pełną kontrolę nad kodem i czysty fundament pod SEO. Kiedy warto wybrać to rozwiązanie zamiast gotowego CMS?","2026-08-05",1791500710924]