Jak optymalizowac obrazy
pod web i SEO

Format, ktory wybierzesz, ma najwiekszy wplyw na rozmiar pliku i jakosc. Nowoczesne formaty dostarczaja dramatycznie mniejsze pliki przy tej samej jakosci wizualnej w porownaniu ze starszymi standardami. Oto co uzywac i kiedy.

Idealnym podejsciem jest serwowanie wielu formatow za pomoca elementu HTML <picture>. Oferuj AVIF jako pierwszy, WebP jako zapasowy i JPEG jako ostatni. Przegladarka automatycznie wybierze najlepszy obslugiwany format.

Kompresja zmniejsza rozmiar pliku usuwajac dane, ktorych ludzkie oko nie jest w stanie latwo dostrzec. Kluczem jest znalezienie punktu rownowagi, w ktorym rozmiar pliku znaczaco spada, ale jakosc wizualna pozostaje identyczna z oryginalem.

Istnieja dwa typy kompresji. Kompresja stratna (JPEG, WebP, AVIF) trwale usuwa dane, aby osiagnac mniejsze pliki - to wlasnie chcesz dla fotografii w internecie. Kompresja bezstratna (PNG, WebP bezstratny) zachowuje kazdy piksel, ale osiaga mniejsze redukcje - lepsza dla grafik i zrzutow ekranu.

Narzedzia takie jak Squoosh, ImageOptim czy Sharp (Node.js) pozwalaja podgladac roznice w jakosci przed zatwierdzeniem. Zawsze porownaj skompresowana wersje z oryginalem w pelnym rozmiarze przed wdrozeniem.

Tekst alt (atrybut alt w tagach <img>) sluzy dwom celom: opisuje obraz dla czytnikow ekranowych i osob niedowidzacych oraz informuje wyszukiwarki o zawartosci obrazu. Google wykorzystuje tekst alt jako glowny sygnal do pozycjonowania w wyszukiwarce obrazow.

Dobry tekst alt jest opisowy, zwiezly i naturalnie zawiera odpowiednie slowa kluczowe bez ich upychania. Zamiast "foto.jpg" lub "obrazek1", napisz cos w stylu "golden retriever biegajacy przez jesienne liscie w parku". Opisz co jest na obrazie, nie czym jest (unikaj zaczynania od "obraz" lub "zdjecie").

Dla obrazow dekoracyjnych, ktore nie dodaja wartosci informacyjnej (obramowania, odstepy, wzory tla), uzyj pustego atrybutu alt (alt=""), aby czytniki ekranowe je calkowicie pomijaly.

Leniwe ladowanie opoznia ladowanie obrazow do momentu, az maja pojawic sie w widocznym obszarze. Oznacza to, ze strona z 50 obrazami nie pobiera wszystkich 50 przy poczatkowym zaladowaniu - tylko te widoczne na ekranie. Reszta laduje sie, gdy uzytkownik przewija. To dramatycznie zmniejsza poczatkowy czas ladowania strony i zuzycie pasma.

W nowoczesnym HTML, leniwe ladowanie jest tak proste jak dodanie loading="lazy" do tagow <img>. Nie stosuj leniwego ladowania dla obrazow widocznych powyzej zgiecia (pierwszy ekran) - te powinny ladowac sie natychmiast, aby uniknac przesuniec ukladu i slabych wynikow Largest Contentful Paint (LCP).

Responsywne obrazy dostosowuja sie do roznych rozmiarow ekranu, aby uzytkownicy mobilni nie pobierali obrazu o szerokosci 4000px, gdy ich ekran ma tylko 400px. Uzyj atrybutow srcset i sizes, aby dostarczyc wiele rozdzielczosci. Przegladarka wybierze najmniejsza wersje pasujacc do ekranu uzytkownika, oszczedzajac pasmo i poprawiajac czas ladowania.

Zawsze okreslaj atrybuty width i height na kazdym obrazie, aby zapobiec Cumulative Layout Shift (CLS) - metryce Core Web Vitals, ktora karze strony, na ktorych tresc przeskakuje podczas ladowania.

Nazwy plikow obrazow to kolejny sygnal SEO, ktory wiele osob pomija. Wyszukiwarki czytaja nazwy plikow, aby zrozumiec zawartosc obrazu. Plik o nazwie zachod-slonca-nad-jeziorem-genewskim.webp mowi Google znacznie wiecej niz IMG_4829.webp.

Dla zaawansowanego SEO dodaj dane strukturalne (schema.org ImageObject) do swoich stron. Ten znacznik informuje wyszukiwarki o podpisie obrazu, tworcy, licencji i adresie URL tresci. Strony z danymi strukturalnymi maja wieksze szanse na pojawienie sie w wynikach wyszukiwania obrazow Google z rozszerzonymi fragmentami.

Jesli dodajesz znaki wodne do obrazow przed publikacja, sam znak wodny staje sie czescia pliku. Po wskazowki dotyczace znakowania wodnego bez pogarszania jakosci obrazu, zobacz nasz poradnik najlepszych praktyk znakow wodnych.

Fotografowie i tworcy stoja przed wyjatkowym wyzwaniem: chca obrazow, ktore wygladaja zachwycajaco w internecie, laduja sie szybko dla SEO i pozostaja chronione przed kradzieza. Te cele moga wydawac sie sprzeczne, ale nie sa - potrzebujesz jedynie jasnego procesu pracy.

Przechowuj oryginalne pliki w wysokiej rozdzielczosci bezpiecznie offline - to Twoje pliki glowne i dowod autorstwa. Dla internetu eksportuj przeskalowane wersje (zazwyczaj 1200-2000px na dluzszym boku) w formacie WebP o jakosci 80. Daje to doskonala jakosc wizualna przy ulamku oryginalnego rozmiaru pliku.

Przed przeslaniem dodaj znak wodny do wersji webowych. Polprzezroczysty znak wodny o przezroczystosci 30-40% nie wplynie istotnie na rozmiar pliku ani predkosc ladowania, ale zapewnia wizualna ochrone odstraszajaca przypadkowa kradziez. Po dodaniu znaku wodnego przepusc obraz przez narzedzie kompresji dla ostatecznej redukcji rozmiaru.

Po pelny poradnik zabezpieczania obrazow poza optymalizacja, zobacz nasz artykul o ochronie zdjecen przed kradzieza online i nasz poradnik znakow wodnych.