Optymalizacja obrazów (alt text, rozmiar)

Optymalizacja obrazów – formaty, wymiary, ładowanie, teksty alternatywne i widoczność w Google Grafika

Lżejsze obrazy, szybsza strona i opisy, które rozumieją ludzie oraz wyszukiwarki

Na wielu stronach to właśnie obrazy stanowią największą część danych pobieranych przy pierwszym wejściu. Zdjęcie w nagłówku decyduje o tym, jak szybko użytkownik zobaczy treść, obrazy bez wymiarów przesuwają układ podczas ładowania, a brak tekstów alternatywnych utrudnia korzystanie ze strony osobom niewidomym i odbiera szansę na ruch z wyszukiwarki grafik. Poniżej obszerne kompendium o podstawach: znaczeniu obrazów w SEO, tekście alternatywnym, rozmiarze plików i narzędziach. W sekcjach obok opisujemy, jak sami przeprowadzamy audyt i optymalizację obrazów – od formatów i wymiarów po Core Web Vitals i dostępność.

Optymalizację obrazów prowadzimy jako część optymalizacji technicznej albo jako osobne zlecenie. Zaczynamy od pełnego spisu grafik na stronie, a kończymy na wdrożeniu zmian w szablonie, w procesie dodawania nowych zdjęć i w treściach. Gdy problem wykracza poza obrazy, łączymy tę pracę z audytem wydajności i pozycjonowaniem całej witryny.

Zamów optymalizację obrazów Czytaj kompendium

0,5 sto próg dobrego wyniku LCP według Google; na wielu stronach elementem LCP jest właśnie obraz

0,1to próg dobrego wyniku CLS; obrazy bez zadeklarowanych wymiarów są częstą przyczyną przesunięć układu

0rodzajów obrazów, dla których stosujemy różne zasady tekstu alternatywnego: od zdjęć produktów po grafiki dekoracyjne

0etapów naszego wdrożenia: od spisu grafik i pomiaru po automatyzację, która pilnuje nowych zdjęć

Optymalizacja obrazów obejmuje nie tylko dobór odpowiedniego formatu czy rozmiaru pliku, ale także takie elementy jak alt text, czyli tekst alternatywny, który umożliwia wyszukiwarkom zrozumienie zawartości obrazu. Odpowiednio przygotowane obrazy mogą przyczynić się do lepszych wyników SEO, zwiększając tym samym szansę na wyższą pozycję w wynikach wyszukiwania. Co więcej, optymalizacja obrazów ma ogromne znaczenie w kontekście dostępności strony, szczególnie dla osób z ograniczeniami wzrokowymi, które korzystają z czytników ekranowych.

Ponadto obrazy mają bezpośredni wpływ na wydajność strony. Zbyt duże pliki graficzne mogą obciążać serwery, spowalniając czas ładowania strony, co w dzisiejszych czasach jest nie do zaakceptowania. Wysoka jakość zdjęć może być istotna, ale równie ważne jest ich odpowiednie skompresowanie i dopasowanie do faktycznych potrzeb witryny, by zminimalizować wpływ na szybkość ładowania.

W tym artykule omówimy, jak skutecznie zoptymalizować obrazy pod kątem SEO, jak wykorzystać alt text, jakie formaty obrazów wybrać, aby osiągnąć najlepsze wyniki, oraz jakie narzędzia mogą pomóc w procesie kompresji plików. Dzięki właściwej optymalizacji obrazów Twoja strona nie tylko będzie lepiej postrzegana przez wyszukiwarki, ale również zapewni użytkownikom lepsze i szybsze doświadczenia, co może prowadzić do większego zaangażowania i wyższej konwersji.

Dlaczego optymalizacja obrazów jest ważna?

Obrazy w kontekście SEO pełnią kilka funkcji. Po pierwsze, przyciągają uwagę użytkowników i poprawiają estetykę witryny. Wzbogacają treść wizualnie, sprawiając, że strona staje się bardziej interesująca i angażująca. Przemyślane użycie grafik pozwala przekazać informacje, które w przeciwnym razie byłyby trudne do wyrażenia wyłącznie za pomocą słów. Dobrze dobrane obrazy mogą również wpływać na lepsze zrozumienie treści przez odbiorców, co może prowadzić do wyższego współczynnika konwersji.

Jednak obrazy mają także swoje wyzwania. Właściwa optymalizacja obrazów wpływa na wydajność witryny, w tym na szybkość jej ładowania. Wysoka jakość zdjęć może znacznie zwiększyć rozmiar pliku, co obciąża serwery i wydłuża czas ładowania strony. Zbyt wolne ładowanie strony nie tylko negatywnie wpływa na doświadczenia użytkowników, ale również może zniechęcić ich do dalszego korzystania z witryny. Ponadto wolniejsze strony są gorzej oceniane przez algorytmy wyszukiwarek, co może negatywnie wpłynąć na pozycję w wynikach wyszukiwania. Dlatego też optymalizacja obrazów ma bezpośredni wpływ na sukces SEO.

Również w kontekście dostosowywania treści strony do potrzeb osób z niepełnosprawnościami, odpowiednia optymalizacja obrazów ma ogromne znaczenie. Dodanie tekstów alternatywnych (alt text) pozwala na lepszą dostępność strony dla osób korzystających z czytników ekranowych. Co więcej, obrazki odpowiednio zoptymalizowane pod kątem SEO mogą zostać uwzględnione w wyszukiwaniu grafiki Google, co stanowi dodatkową szansę na zwiększenie ruchu na stronie.

Czym jest alt text i dlaczego jest ważny?

Alt text, czyli tekst alternatywny, to tekstowa reprezentacja obrazu, który jest wyświetlany w przypadku, gdy obraz nie może zostać załadowany lub gdy użytkownik korzysta z narzędzi wspomagających, takich jak czytniki ekranowe. Tekst alternatywny jest jednym z głównych elementów, które pomagają wyszukiwarkom, takim jak Google, zrozumieć, o czym jest obraz. Google, a także inne wyszukiwarki, nie są w stanie „zobaczyć” obrazu w taki sam sposób jak człowiek, dlatego alt text stanowi dla nich opis obrazu, który pozwala na poprawną interpretację zawartości.

Dobre praktyki w tworzeniu alt textu obejmują opisanie obrazu w sposób zwięzły, ale dokładny, zawierający istotne słowa kluczowe. Powinno się unikać nadmiernego używania fraz kluczowych, co może zostać uznane za keyword stuffing – technikę, która ma na celu manipulowanie wynikami wyszukiwania poprzez sztuczne nasycanie tekstu słowami kluczowymi. Zamiast tego warto skupić się na dostarczeniu wartościowego i zrozumiałego opisu obrazu. Na przykład alt text do zdjęcia przedstawiającego psa może brzmieć: „pies rasy golden retriever bawiący się na trawie”. Takie podejście jest bardziej naturalne, a jednocześnie zawiera ważne informacje, które pomagają algorytmom wyszukiwania lepiej zrozumieć treść strony.

Alt text ma również duże znaczenie dla dostępności strony. Osoby z niepełnosprawnością wzrokową korzystające z czytników ekranowych polegają na tym tekście, aby dowiedzieć się, co przedstawia dany obraz. Dlatego ważne jest, aby alt text był nie tylko opisowy, ale także użyteczny i odpowiedni do kontekstu strony. Należy pamiętać, że tekst alternatywny powinien oddać istotę obrazu, bez zbędnych szczegółów, takich jak „obrazek” lub „grafika”.

Optymalizacja rozmiaru obrazów

Rozmiar obrazów to jeden z najistotniejszych aspektów ich optymalizacji, który wpływa zarówno na szybkość ładowania strony, jak i na jej wydajność. Zbyt duże obrazy mogą znacząco opóźniać ładowanie witryny, co z kolei prowadzi do wyższych wskaźników odrzuceń i gorszej pozycji w wynikach wyszukiwania. Aby uniknąć takich problemów, warto zadbać o odpowiednie dostosowanie rozmiaru pliku obrazu do jego faktycznych potrzeb.

Pierwszym krokiem do optymalizacji rozmiaru jest wybór odpowiedniego formatu pliku. Najpopularniejsze formaty to JPEG, PNG i GIF, jednak coraz częściej rekomendowanym wyborem jest format WebP, który oferuje lepszą kompresję przy zachowaniu wysokiej jakości obrazu. JPEG sprawdza się doskonale w przypadku zdjęć, ponieważ umożliwia dużą kompresję, a jednocześnie nie traci na jakości wizualnej w porównaniu do innych formatów. PNG jest natomiast idealnym wyborem do obrazów z przezroczystościami, takich jak logotypy, ikony czy wykresy. WebP to nowoczesny format, który łączy zalety obu poprzednich, oferując lepszą kompresję przy mniejszym rozmiarze pliku, co pozwala na szybsze ładowanie strony.

Kolejnym ważnym elementem jest kompresja obrazów. Istnieje wiele narzędzi, które umożliwiają zmniejszenie rozmiaru pliku bez zauważalnej utraty jakości. Można skorzystać z aplikacji takich jak TinyPNG, ImageOptim czy Compressor.io, które efektywnie kompresują obrazy, zachowując ich wygląd. Warto również zainwestować we wtyczki SEO do systemów CMS (np. WordPress), które automatycznie kompresują obrazy i optymalizują je pod kątem SEO podczas ich przesyłania na stronę.

Jakie narzędzia wspierają optymalizację obrazów?

Dzięki narzędziom online i oprogramowaniu proces optymalizacji obrazów stał się znacznie łatwiejszy. Oprócz wspomnianych narzędzi do kompresji plików, dostępne są również platformy umożliwiające analizę wydajności strony i optymalizację wszystkich jej elementów, w tym obrazów. Google PageSpeed Insights to jedno z najlepszych narzędzi, które ocenia czas ładowania strony, podaje zalecenia i informuje o problemach związanych z obrazami.

Również narzędzia takie jak GTmetrix czy Pingdom oferują szczegółowe raporty na temat szybkości ładowania strony i wskazują, które obrazy wymagają optymalizacji. Audyty SEO, dostępne na platformach takich jak Ahrefs czy SEMrush, pomagają natomiast zidentyfikować wszelkie błędy związane z obrazami, takie jak brak alt textu, niewłaściwe formaty czy zbyt duży rozmiar plików.

Podsumowanie na temat optymalizacji obrazów (alt text, rozmiar)

Optymalizacja obrazów to niezbędny krok w skutecznej strategii SEO. Zarówno alt text, jak i odpowiedni rozmiar plików mają kluczowe znaczenie dla wydajności strony, jej dostępności oraz pozycji w wynikach wyszukiwania. Prawidłowe użycie obrazów w treści strony może znacznie poprawić jej atrakcyjność, a także zwiększyć zaangażowanie użytkowników. Dzięki zastosowaniu odpowiednich narzędzi do kompresji, wyboru właściwych formatów oraz optymalizacji alt textu, można osiągnąć lepsze wyniki SEO i zapewnić użytkownikom wygodne i szybkie korzystanie z witryny.

Więcej na temat optymalizacji technicznej przeczytasz tutaj: https://www.seosem24.pl/optymalizacja-techniczna/

Czekamy na Twoje pytania i komentarze, które możesz zostawić poniżej – zawsze chętnie podzielimy się dodatkowymi wskazówkami!

Najczęściej zadawane pytania na temat optymalizacji obrazów (alt text, rozmiar)

Jakie formaty plików obrazów są najlepsze do SEO?
Optymalny wybór formatu zależy od typu obrazu. JPEG to idealny wybór dla zdjęć, ponieważ zapewnia dobrą kompresję przy zachowaniu wysokiej jakości. PNG sprawdza się w przypadku obrazów z przezroczystościami, takich jak logotypy czy ikony. Format WebP jest coraz bardziej polecany, ponieważ oferuje lepszą kompresję i mniejszy rozmiar pliku przy zachowaniu jakości, co pozytywnie wpływa na szybkość ładowania strony.

Co to jest alt text i dlaczego jest ważny dla SEO?
Alt text (tekst alternatywny) to opis obrazu, który wyświetla się, gdy obraz nie jest dostępny lub gdy użytkownik korzysta z czytnika ekranowego. Jest to istotny element SEO, ponieważ pomaga wyszukiwarkom zrozumieć zawartość obrazu. Odpowiednio dobrany alt text wpływa na wyższą pozycję w wynikach wyszukiwania, a także poprawia dostępność strony.

Jak stworzyć dobry alt text?
Dobry alt text powinien być zwięzły, dokładny i naturalny. Należy opisać, co przedstawia obraz, unikając nadmiernego używania słów kluczowych. Przykład: zamiast „obrazek psa” warto napisać „pies rasy golden retriever bawiący się na trawie”. Alt text powinien być również użyteczny i kontekstowy, by poprawić dostępność strony.

Dlaczego rozmiar obrazu wpływa na szybkość ładowania strony?
Zbyt duży rozmiar obrazu obciąża serwer i spowalnia ładowanie strony. Strony, które ładują się wolniej, mają wyższy współczynnik odrzuceń, co wpływa negatywnie na doświadczenia użytkowników i pozycje w wyszukiwarkach. Optymalizacja obrazów pod względem rozmiaru jest kluczowa dla zapewnienia szybszego ładowania strony.

Jakich narzędzi można użyć do kompresji obrazów?
Do kompresji obrazów można wykorzystać narzędzia takie jak TinyPNG, ImageOptim czy Compressor.io, które umożliwiają zmniejszenie rozmiaru pliku bez utraty jakości. W przypadku platform CMS, takich jak WordPress, dostępne są wtyczki, które automatycznie optymalizują obrazy podczas ich przesyłania na stronę.

Czy optymalizacja obrazów wpływa na ranking w wyszukiwarkach?
Tak, optymalizacja obrazów ma znaczący wpływ na ranking w wyszukiwarkach. Dzięki odpowiednio zoptymalizowanym obrazom, takim jak poprawnie dobrany alt text i zoptymalizowany rozmiar pliku, algorytmy wyszukiwarek mogą lepiej zrozumieć zawartość strony, co może przyczynić się do wyższej pozycji w wynikach wyszukiwania.

Jakie są najlepsze praktyki kompresji obrazów?
Najlepsze praktyki kompresji obejmują wybór odpowiedniego formatu obrazu (JPEG, PNG, WebP), używanie narzędzi do kompresji plików oraz dostosowanie rozdzielczości obrazów do rzeczywistych potrzeb strony. Ważne jest, aby utrzymać odpowiednią jakość obrazu, unikając nadmiernej utraty detali podczas kompresji.

Czy alt text jest obowiązkowy dla wszystkich obrazów na stronie?
Chociaż alt text nie jest obowiązkowy, jest zdecydowanie zalecany, zwłaszcza dla obrazów, które pełnią funkcję informacyjną lub są istotne dla treści strony. Dodanie alt textu do każdego obrazu poprawia dostępność strony i wspiera działania SEO, ponieważ pomaga wyszukiwarkom w indeksowaniu i zrozumieniu zawartości obrazów.

Czy obrazki mogą wpłynąć na współczynnik konwersji?
Tak, dobrze dobrane obrazki mogą zwiększyć współczynnik konwersji, ponieważ przyciągają uwagę użytkowników i mogą skutecznie ilustrować produkty lub usługi. Zoptymalizowane obrazy, które ładują się szybko, mogą poprawić doświadczenia użytkowników, co może prowadzić do większego zaangażowania i większej liczby konwersji.

Co to jest format WebP i dlaczego jest zalecany?
WebP to nowoczesny format obrazu, który zapewnia lepszą kompresję przy mniejszym rozmiarze pliku w porównaniu do tradycyjnych formatów, takich jak JPEG czy PNG. Dzięki temu obrazy w tym formacie ładują się szybciej, co wpływa na poprawę wydajności strony i doświadczeń użytkowników, a także na lepsze wyniki SEO.

Audyt obrazów

Zanim cokolwiek skompresujemy, sprawdzamy, gdzie obrazy naprawdę szkodzą

Kompresja wszystkich plików w bibliotece mediów to najczęstszy pierwszy odruch i zwykle niewystarczający. Strona może mieć dobrze skompresowane zdjęcia, a mimo to ładować się wolno, bo szablon pobiera plik o szerokości kilku tysięcy pikseli tam, gdzie wyświetla miniaturę, albo opóźnia najważniejsze zdjęcie leniwym ładowaniem. Dlatego zaczynamy od audytu, który pokazuje, które obrazy, na których szablonach i w jakim stopniu wpływają na szybkość, stabilność układu i dostępność strony.

Co mierzymy

Pełny spis grafik. Crawlerem SEO zbieramy wszystkie obrazy osadzone na stronie razem z wagą pliku, formatem, wymiarami i informacją o tekście alternatywnym. Osobno sprawdzamy obrazy wstawiane jako tło w CSS, bo nie są widoczne dla wyszukiwarki grafik i często umykają w zwykłych raportach.
Wymiary pobierane a wyświetlane. Porównujemy rozmiar pliku z rozmiarem, w jakim obraz faktycznie pojawia się na ekranie telefonu i komputera. Największe oszczędności dają zwykle nie lepsze algorytmy kompresji, tylko pobieranie plików we właściwych wymiarach.
Obraz LCP i kolejność ładowania. Dla każdego kluczowego szablonu – strony głównej, kategorii, produktu, wpisu – ustalamy, czy największym elementem widocznym na starcie jest obraz, i sprawdzamy, kiedy przeglądarka zaczyna go pobierać.
Przesunięcia układu. Szukamy obrazów, bannerów i osadzeń bez zadeklarowanych wymiarów, które po wczytaniu przesuwają treść w dół i pogarszają wynik CLS.
Teksty alternatywne i kontekst. Oceniamy nie tylko to, czy atrybut alt istnieje, ale czy opis ma sens w danym miejscu, czy grafiki dekoracyjne są poprawnie pominięte przez czytniki ekranu i czy obrazy mają opisowe nazwy plików.

Skąd bierzemy dane

Łączymy trzy źródła. Dane terenowe z raportu Core Web Vitals w Google Search Console i z PageSpeed Insights pokazują, jak strona działa u prawdziwych użytkowników. Pomiary laboratoryjne w Lighthouse i narzędziach deweloperskich przeglądarki pozwalają zobaczyć kolejność pobierania plików i wskazać konkretny obraz odpowiedzialny za problem. Crawl całej witryny daje skalę: wiemy, czy problem dotyczy jednej podstrony, czy tysięcy kart produktów opartych na tym samym szablonie.

Jak wygląda raport

Wyniki zbieramy w jednym dokumencie podzielonym na trzy części: zmiany w szablonach, które wymagają pracy programisty, poprawki w treściach i bibliotece mediów, które może wykonać redakcja, oraz zmiany w procesie dodawania nowych zdjęć. Każda pozycja ma wskazany szablon lub listę adresów, których dotyczy, przewidywany wpływ i trudność wdrożenia. Dzięki temu wiadomo, od czego zacząć, żeby pierwsze efekty były widoczne szybko, a praca rozkładała się rozsądnie między zespół techniczny i treściowy.

Ważne: priorytety ustalamy według szablonów, a nie pojedynczych plików. Jedna poprawka w szablonie karty produktu potrafi poprawić tysiące podstron naraz, podczas gdy ręczna optymalizacja kilkudziesięciu zdjęć na stronie głównej zmienia niewiele, jeśli nowe pliki będą dodawane w ten sam sposób co dotąd.

Wybór formatu

AVIF, WebP czy JPEG: jak dobieramy format do zadania

Nowoczesne formaty pozwalają zmniejszyć wagę zdjęć bez widocznej utraty jakości, ale żaden nie jest najlepszy w każdej sytuacji. Dlatego często serwujemy kilka wersji tego samego obrazu, a przeglądarka wybiera tę, którą obsługuje.

JPEG i PNG

Klasyczne formaty obsługiwane przez każdą przeglądarkę, program graficzny i platformę zewnętrzną.

Najprostszy obieg plików: od aparatu, przez edytor graficzny, po stronę
Dobry format zapasowy w elemencie picture
PNG zachowuje ostre krawędzie i przezroczystość
Przy tej samej jakości zwykle większe pliki niż WebP i AVIF
PNG użyty do zdjęć daje bardzo ciężkie pliki

Zostawiamy jako wersję zapasową oraz tam, gdzie obraz trafia poza stronę, na przykład do plików produktowych dla platform zewnętrznych.

WebP

Format opracowany przez Google, obsługiwany przez wszystkie współczesne przeglądarki, z kompresją stratą i bezstratną oraz przezroczystością.

Wyraźnie lżejsze pliki niż JPEG przy porównywalnej jakości
Szybkie kodowanie, dobre do generowania w locie
Szeroko wspierany przez systemy CMS i wtyczki
Przy dużych zdjęciach zwykle ustępuje AVIF pod względem wagi
Część starszych narzędzi i platform zewnętrznych go nie przyjmuje

Najczęściej nasz format podstawowy: bezpieczny, lekki i prosty we wdrożeniu na większości platform.

AVIF

Format oparty na kodeku AV1, obsługiwany przez aktualne wersje głównych przeglądarek, z bardzo wydajną kompresją.

Często najmniejsze pliki przy dużych zdjęciach
Dobrze radzi sobie z gradientami i szeroką gamą barw
Można go podać jako pierwszy wybór w elemencie picture
Wolniejsze kodowanie, co ma znaczenie przy generowaniu w locie
Przy zbyt agresywnych ustawieniach rozmywa drobne detale

Stosujemy przy dużych zdjęciach w nagłówkach i galeriach, zawsze z wersją zapasową w WebP lub JPEG.

A logotypy i ikony? Dla grafik wektorowych najlepszym wyborem jest zwykle SVG: skaluje się bez utraty jakości i waży niewiele. Pliki SVG przesyłane przez użytkowników traktujemy jednak ostrożnie, bo mogą zawierać kod – przed publikacją przechodzą przez oczyszczanie albo są dodawane wyłącznie przez administratorów.

Wdrożenie

Jak optymalizujemy obrazy: sześć kroków od pomiaru do automatyzacji

Jednorazowe odchudzenie biblioteki mediów przestaje działać po kilku tygodniach, gdy redakcja doda nowe zdjęcia prosto z aparatu. Dlatego każde wdrożenie kończymy zmianą procesu, a nie tylko plików.

Pomiar punktu wyjścia

Zapisujemy wyniki Core Web Vitals z danych terenowych, wagę typowych podstron i czas pojawienia się najważniejszego obrazu na telefonie. Bez tego po wdrożeniu nie da się rzetelnie pokazać, co się zmieniło, a co było efektem innych prac na stronie.

Dane terenowe i laboratoryjneTelefon i komputer

Rozmiary obrazów w szablonie

Dla każdego miejsca w szablonie ustalamy, w jakich szerokościach obraz jest wyświetlany na różnych ekranach, i przygotowujemy odpowiadający im zestaw wariantów. W kodzie używamy atrybutów srcset i sizes, dzięki którym przeglądarka pobiera plik dopasowany do ekranu, zamiast jednego dużego pliku dla wszystkich.

Warianty rozmiarówsrcset i sizes

Formaty i kompresja

Wybieramy format podstawowy i zapasowy, ustalamy poziom kompresji osobno dla zdjęć, grafik z tekstem i zdjęć produktów na białym tle, a wyniki porównujemy wizualnie na prawdziwych ekranach. Usuwamy zbędne metadane, na przykład dane o lokalizacji zapisane przez aparat, chyba że informacje o autorze i prawach mają zostać w pliku.

Format podstawowy i zapasowyKontrola wizualna

Kolejność i sposób ładowania

Obraz LCP ładujemy od razu i z wysokim priorytetem, a obrazy poniżej pierwszego ekranu – leniwie. Wszystkim grafikom nadajemy wymiary lub proporcje, żeby przeglądarka zarezerwowała dla nich miejsce. Ustawiamy też długie przechowywanie plików w pamięci podręcznej przeglądarki i, gdy ma to sens, serwowanie przez sieć CDN.

Priorytet dla obrazu LCPCache i CDN

Teksty alternatywne i nazwy plików

Uzupełniamy i poprawiamy opisy według priorytetów: najpierw obrazy niosące informację i obrazy będące linkami, potem zdjęcia produktów i treści poradnikowych. Grafiki dekoracyjne oznaczamy pustym atrybutem alt. Przy dużych sklepach przygotowujemy wzorce opisów oparte na danych produktu, które redakcja uzupełnia tam, gdzie zdjęcie pokazuje coś więcej.

Opisy według priorytetówDostępność

Automatyzacja i instrukcja dla redakcji

Konfigurujemy system tak, by nowe zdjęcia były automatycznie zmniejszane, konwertowane i kompresowane przy dodawaniu, a pole tekstu alternatywnego było widoczne i zrozumiałe dla osób dodających treści. Przekazujemy krótką instrukcję: jakie wymiary przygotować, jak nazywać pliki i jak pisać opisy.

Automatyczne przetwarzanieInstrukcja dla zespołu

Core Web Vitals

Obrazy a LCP i CLS: gdzie optymalizacja daje najwięcej

Google ocenia doświadczenie użytkownika na stronie między innymi za pomocą trzech wskaźników Core Web Vitals: LCP (czas wyświetlenia największego elementu), INP (szybkość reakcji na interakcje) i CLS (stabilność układu). Obrazy mają największy wpływ na dwa z nich. Za dobry wynik uznaje się LCP do 2,5 sekundy i CLS nieprzekraczający 0,1, mierzone dla większości wizyt prawdziwych użytkowników.

LCP: najważniejsze zdjęcie musi wystartować pierwsze

Gdy elementem LCP jest zdjęcie w nagłówku strony lub zdjęcie produktu, liczy się nie tylko jego waga, ale też moment, w którym przeglądarka zacznie je pobierać. Najczęstsze błędy, które poprawiamy, to:

Leniwe ładowanie obrazu LCP. Atrybut loading="lazy" na pierwszym, najważniejszym zdjęciu opóźnia jego pobranie. Ten obraz powinien ładować się od razu, a wskazówka fetchpriority="high" pomaga przeglądarce nadać mu pierwszeństwo.
Obraz ukryty w CSS lub skrypcie. Zdjęcie ustawione jako tło w arkuszu stylów albo wstawiane przez skrypt slidera przeglądarka odkrywa późno. Przenosimy je do znacznika img albo wskazujemy wcześniej przez preload.
Slider na pierwszym ekranie. Karuzela z kilkoma dużymi zdjęciami i skryptem sterującym często jest najwolniejszym elementem strony. Sprawdzamy, czy pojedyncze, dobrze dobrane zdjęcie nie spełni tej samej roli.

CLS: miejsce dla obrazu zarezerwowane z góry

Jeśli przeglądarka nie zna proporcji obrazu przed jego pobraniem, najpierw układa treść bez niego, a po wczytaniu przesuwa wszystko w dół. Użytkownik traci miejsce, w którym czytał, albo klika nie ten przycisk. Rozwiązaniem są atrybuty width i height w znaczniku img lub właściwość aspect-ratio w CSS, a dla bannerów i osadzeń zewnętrznych – kontener o stałej wysokości. Zmiany w kodzie szablonu łączymy z pozostałymi pracami opisanymi przy optymalizacji kodu strony.

Jak mierzymy efekt

Po wdrożeniu porównujemy te same podstrony co na starcie: łączną wagę obrazów przy pierwszym wyświetleniu, czas pojawienia się obrazu LCP w pomiarach laboratoryjnych i liczbę przesunięć układu. Po kilku tygodniach zestawiamy te wyniki z danymi terenowymi z raportu Core Web Vitals. Jeśli któraś grupa podstron nie poprawiła się zgodnie z oczekiwaniami, wracamy do niej i szukamy przyczyny, którą często okazuje się element spoza obrazów, na przykład czcionki albo skrypty zewnętrzne.

Pamiętaj: wynik w PageSpeed Insights mierzony jednorazowo w laboratorium nie jest tym samym, co dane terenowe. O ocenie strony w raporcie Core Web Vitals decydują pomiary od prawdziwych użytkowników, dlatego efekt zmian sprawdzamy po kilku tygodniach od wdrożenia.

Tekst alternatywny w praktyce

Sześć rodzajów obrazów, sześć różnych zasad opisu

Dobry tekst alternatywny zależy od roli obrazu na stronie, a nie od samego zdjęcia. Ta sama fotografia może wymagać opisu w artykule i pustego atrybutu alt, gdy jest tylko tłem sekcji. Tak dzielimy obrazy podczas przeglądu.

Obrazy informacyjne

Zdjęcia i ilustracje, które dodają treści coś, czego nie ma w tekście obok. Opis przekazuje tę informację krótko i konkretnie, w kontekście artykułu. Nie zaczynamy go od słów „zdjęcie” czy „obrazek”, bo czytnik ekranu i tak informuje, że to grafika.

Treść ważna dla zrozumienia tekstu
Opis dopasowany do kontekstu
Bez powtórzeń podpisu pod zdjęciem

Grafiki dekoracyjne

Ozdobniki, tła, separatory i zdjęcia, które tylko budują nastrój. Dostają pusty atrybut alt, dzięki czemu czytniki ekranu je pomijają. Brak atrybutu to co innego niż pusty atrybut: bez niego czytnik może odczytać nazwę pliku, co tylko przeszkadza.

Pusty atrybut alt zamiast braku atrybutu
Ozdobniki najlepiej przenieść do CSS
Mniej szumu dla osób niewidomych

Obrazy będące linkami

Logo prowadzące do strony głównej, ikona koszyka, kafel kategorii bez tekstu. Opis ma wtedy mówić, dokąd prowadzi link lub co zrobi przycisk, a nie jak wygląda grafika. Dla wyszukiwarki taki opis działa podobnie jak tekst zakotwiczenia linku.

Opis celu linku, nie wyglądu
Logo: nazwa firmy lub „strona główna”
Spójność z tekstem obok obrazu

Zdjęcia produktów

W sklepie opis powinien odróżniać zdjęcia tego samego produktu: widok z przodu, detal zapięcia, produkt na modelce, wariant kolorystyczny. Wzorce oparte na nazwie i cechach produktu pomagają przy dużych katalogach, ale pięć identycznych opisów w jednej galerii to sygnał, że trzeba je zróżnicować.

Nazwa, wariant i widok produktu
Różne opisy w ramach jednej galerii
Wzorce wspierające redakcję, nie zastępujące jej

Wykresy i infografiki

Złożonej grafiki nie da się opisać w jednym zdaniu. Tekst alternatywny podaje wtedy najważniejszy wniosek, a pełne dane lub opis trafiają do tekstu pod grafiką, tabeli albo rozwijanej sekcji. Korzysta na tym każdy czytelnik, nie tylko osoby korzystające z czytników ekranu.

Krótki alt z głównym wnioskiem
Dane w tekście lub tabeli obok
Treść dostępna także dla wyszukiwarki

Grafiki z tekstem

Banner z hasłem promocyjnym, zdjęcie z napisem, zrzut ekranu. Tekst widoczny na obrazie powinien znaleźć się w opisie, bo inaczej informacja ginie dla czytników ekranu. Najlepiej jednak, gdy ważne komunikaty, ceny i terminy są zwykłym tekstem na stronie, a nie częścią pliku graficznego.

Treść napisu przeniesiona do opisu
Ceny i terminy jako tekst HTML
Łatwiejsze tłumaczenie i aktualizacja

Google Grafika, Discover i Lens

Obrazy jako osobne źródło ruchu, nie tylko dodatek do tekstu

Obrazy mogą sprowadzać użytkowników na kilka sposobów: z wyników Google Grafika, z miniatur wyświetlanych przy zwykłych wynikach, z kart w Google Discover i z wyszukiwania wizualnego w Google Lens. Dla sklepów, serwisów z inspiracjami, przepisami czy poradnikami to ruch, który często jest niedoceniany. W Google Search Console można go zobaczyć, zmieniając w raporcie skuteczności typ wyszukiwania na „Grafika”.

Jak Google rozumie obraz

Wyszukiwarka analizuje sam obraz, ale w dużej mierze opiera się na jego otoczeniu: tekście alternatywnym, podpisie, nagłówku sekcji, treści akapitu obok, nazwie pliku i adresie strony. Obraz umieszczony przy właściwym fragmencie tekstu i opisany zgodnie z jego treścią ma znacznie większą szansę pojawić się na trafne zapytania niż ten sam plik wstawiony w przypadkowym miejscu. Google nie indeksuje obrazów ustawionych wyłącznie jako tło w CSS, dlatego zdjęcia, które mają być widoczne w wynikach, osadzamy znacznikiem img.

Co ustawiamy technicznie

Mapa witryny z obrazami. Włączamy obrazy do mapy witryny, co pomaga wyszukiwarce odkryć grafiki, których mogłaby nie znaleźć, na przykład wczytywane przez skrypty.
Dane strukturalne. Uzupełniamy pole image w danych produktu, artykułu czy przepisu, bo na tej podstawie Google może dobrać miniaturę do wyniku rozszerzonego. Szerzej opisujemy to przy danych strukturalnych schema.org.
Duże podglądy. Do kart w Google Discover potrzebne są duże, wysokiej jakości obrazy oraz zgoda na duży podgląd wyrażona w metatagu robots (max-image-preview:large). Sprawdzamy też, czy obraz udostępniany w mediach społecznościowych przez og:image jest właściwie przycięty.
Metadane autorskie. W plikach, które mają nieść informację o autorze i prawach, pozostawiamy pola IPTC, które Google może wyświetlić w szczegółach obrazu. Pozostałe metadane usuwamy, żeby nie zwiększały wagi pliku.

Wyszukiwanie wizualne

Coraz więcej osób szuka, robiąc zdjęcie albo zaznaczając fragment obrazu w Google Lens. Wyniki takiego wyszukiwania prowadzą do stron, na których znajdują się podobne obrazy, często razem z ceną i dostępnością produktu. Wyraźne zdjęcia produktu z kilku ujęć, poprawne dane strukturalne i spójne informacje w opisie zwiększają szansę, że właśnie Twoja strona pojawi się wśród wyników. Dla sklepów łączymy tę pracę z działaniami opisanymi przy pozycjonowaniu produktów w Google Shopping.

Z naszej praktyki: najwięcej ruchu z grafiki zyskują strony z własnymi, oryginalnymi zdjęciami. Zdjęcia stockowe używane przez setki innych witryn rzadko wyróżniają się w wynikach, dlatego przy ważnych podstronach rekomendujemy własne fotografie lub grafiki.

Rodzaje stron

Inne priorytety w sklepie, inne na blogu czy stronie firmowej

Zasady optymalizacji są wspólne, ale to, od czego zaczynamy i na co zwracamy największą uwagę, zależy od rodzaju witryny i tego, skąd przychodzą jej użytkownicy.

Tysiące zdjęć produktów i jeden szablon

W sklepie problem rzadko dotyczy pojedynczego zdjęcia. Zwykle przyczyną jest szablon karty produktu lub listingu kategorii, który pobiera zbyt duże pliki, ładuje całą galerię od razu albo wyświetla miniatury przeskalowane z pełnych zdjęć. Jedna poprawka w szablonie działa na cały katalog, dlatego od niej zaczynamy, a dopiero potem porządkujemy opisy i nazwy plików.

Zdjęcia produktów trafiają też poza stronę – do plików produktowych dla Google Merchant Center i porównywarek. Główne zdjęcie produktu nie może tam zawierać nakładek promocyjnych ani znaków wodnych, więc planujemy wersje plików tak, by jedna nadawała się do sklepu, a druga do reklam. Więcej o tym obszarze piszemy przy optymalizacji stron produktów.

Szablon karty i listingu na początek
Galeria ładowana stopniowo
Zdjęcia zgodne z wymaganiami Merchant Center
Wzorce opisów dla dużych katalogów

Nasze zasady

Czego pilnujemy, gdy optymalizujemy obrazy

Szybkość jest ważna, ale nie może odbywać się kosztem wyglądu marki, dostępności ani wygody osób, które na co dzień dodają treści.

Oryginały zostają nietknięte

Przed konwersją i kompresją zabezpieczamy oryginalne pliki. Gdy w przyszłości pojawi się lepszy format lub zmieni się projekt strony, warianty można wygenerować od nowa z pełnej jakości.

Jakość oceniana wzrokiem

Ustawienia kompresji sprawdzamy na prawdziwych ekranach, także na dużych monitorach i telefonach z wysoką gęstością pikseli. Liczby z narzędzi są wskazówką, ale ostatnie słowo należy do oka.

Dostępność to nie dodatek

Teksty alternatywne piszemy z myślą o osobach korzystających z czytników ekranu, zgodnie z wytycznymi WCAG. Wymagania dostępności obejmują dziś także wiele sklepów internetowych, więc to również kwestia zgodności z przepisami.

Bez upychania słów kluczowych

Opis ma odpowiadać temu, co widać na obrazie i co wnosi on do strony. Listy fraz w atrybucie alt nie pomagają użytkownikom, a wyszukiwarki traktują je jako sygnał niskiej jakości.

Zmiany w procesie, nie tylko w plikach

Każde wdrożenie kończymy automatyzacją przetwarzania nowych zdjęć i instrukcją dla redakcji. Dzięki temu efekt nie znika po kilku tygodniach dodawania nowych treści.

Efekt potwierdzony pomiarem

Porównujemy wagę stron, wyniki laboratoryjne i dane terenowe sprzed i po zmianach. Raportujemy to, co da się zmierzyć, zamiast obiecywać konkretne pozycje w wynikach wyszukiwania.

Częste błędy

Osiem problemów z obrazami, które najczęściej znajdujemy w audytach

Większość z nich nie wynika z braku wiedzy, tylko z tego, jak strona była rozwijana przez lata: kolejne wtyczki, nowe sekcje, zmiany projektu i zdjęcia dodawane przez różne osoby. Dobra wiadomość jest taka, że wiele z nich da się naprawić jedną zmianą w szablonie.

Zdjęcia prosto z aparatu

Pliki o szerokości kilku tysięcy pikseli wgrane bez zmniejszenia, wyświetlane w ramce szerokości kilkuset pikseli. Przeglądarka pobiera wtedy wielokrotnie więcej danych, niż potrzebuje, a użytkownik telefonu płaci za to czasem ładowania i transferem.

Miniatury z pełnych plików

Szablon listingu lub galerii korzysta z oryginalnego zdjęcia zamiast wygenerowanej miniatury. Problem często pojawia się po zmianie motywu lub wtyczki, gdy nowe rozmiary miniatur nie zostały wygenerowane dla starszych plików.

Leniwe ładowanie wszystkiego

Wtyczka lub motyw nadaje atrybut loading="lazy" każdemu obrazowi, także logo i zdjęciu w nagłówku. Wynik LCP się pogarsza, choć włączenie leniwego ładowania miało stronę przyspieszyć.

Ciężki slider na starcie

Karuzela z kilkoma pełnoekranowymi zdjęciami, z których użytkownik zwykle widzi tylko pierwsze. Do tego skrypt sterujący animacją i zdjęcia wstawione jako tło, których przeglądarka nie może odkryć wcześnie.

Alt wypełniony nazwą pliku

Opis w rodzaju „IMG_4821” albo „baner-final-2” wstawiony automatycznie przez system. Dla czytnika ekranu to bezużyteczny szum, a dla wyszukiwarki brak jakiejkolwiek informacji o treści obrazu.

Ten sam opis wszędzie

Nazwa produktu lub tytuł wpisu powielone we wszystkich obrazach na stronie, od zdjęcia głównego po ikony. Opis nie odróżnia wtedy zdjęć i nie pomaga ani użytkownikom, ani wyszukiwarce.

PNG zamiast zdjęcia

Fotografie zapisane w formacie PNG, bo tak wyeksportował je program graficzny. Taki plik potrafi być kilka razy cięższy od dobrze skompresowanego odpowiednika w JPEG, WebP czy AVIF, bez żadnej widocznej różnicy.

Osierocone pliki i duplikaty

Biblioteka mediów pełna nieużywanych plików i wielokrotnie wgranych kopii tego samego zdjęcia. Nie spowalnia to bezpośrednio strony, ale wydłuża kopie zapasowe, zajmuje miejsce na serwerze i utrudnia porządkowanie opisów.

FAQ

Pytania o wdrożenie optymalizacji obrazów

Praktyczne pytania, które słyszymy od właścicieli stron i sklepów, gdy przechodzimy od teorii do zmian w szablonie i bibliotece mediów.

Czy do optymalizacji obrazów wystarczy wtyczka do kompresji?

Wtyczka dobrze załatwia kompresję i konwersję formatów, ale nie poprawi szablonu, który pobiera zbyt duże pliki, nie zdejmie leniwego ładowania z obrazu LCP i nie napisze sensownych tekstów alternatywnych. Traktujemy ją jako jedno z narzędzi, a nie całe rozwiązanie. Bywa też, że na stronie działają równolegle dwie wtyczki do obrazów, które wchodzą sobie w drogę – to również sprawdzamy w audycie.

Czy po przejściu na WebP lub AVIF obrazy znikną z Google Grafika?

Nie, Google obsługuje oba formaty. Jeśli jednak zmiana formatu oznacza nowe adresy plików, wyszukiwarka musi je ponownie odkryć i zaindeksować, co może chwilowo obniżyć ruch z grafiki. Gdy ten ruch jest dla strony ważny, wybieramy rozwiązanie, które zachowuje dotychczasowe adresy, albo przekierowujemy stare adresy obrazów na nowe.

Czy zmiana nazw plików graficznych na opisowe zaszkodzi stronie?

Przy nowych plikach opisowa nazwa to dobra praktyka. Masowa zmiana nazw istniejących obrazów jest zasadna głównie wtedy, gdy obecne nazwy są zupełnie przypadkowe, a obrazy mają potencjał w wynikach grafiki. Wymaga wtedy przekierowań i aktualizacji odwołań w treściach, dlatego najpierw porównujemy spodziewany zysk z ryzykiem i nakładem pracy.

Jak długi powinien być tekst alternatywny?

Zwykle wystarcza jedno konkretne zdanie lub krótka fraza, która przekazuje to, co ważne w danym kontekście. Jeśli obraz wymaga dłuższego wyjaśnienia, na przykład wykres albo schemat, krótki opis umieszczamy w atrybucie alt, a pełne omówienie w treści strony, gdzie mogą je przeczytać wszyscy użytkownicy.

Czy atrybut title może zastąpić atrybut alt?

Nie. Atrybut title wyświetla dymek po najechaniu kursorem, którego nie zobaczą użytkownicy telefonów, a czytniki ekranu obsługują go niejednolicie. Tekst alternatywny to osobny atrybut o innej roli i to on powinien opisywać obraz. Jeśli opis ma być widoczny dla wszystkich, lepiej użyć podpisu pod zdjęciem.

Czy leniwe ładowanie obrazów może zaszkodzić widoczności w Google?

Natywne leniwe ładowanie przez atrybut loading="lazy" jest bezpieczne dla wyszukiwarki. Problemy pojawiają się przy starszych skryptach, które wczytują obraz dopiero po przewinięciu strony albo trzymają jego adres w niestandardowym atrybucie. Wtedy robot może nie zobaczyć obrazu. Drugim typowym błędem jest leniwe ładowanie zdjęcia widocznego na pierwszym ekranie, które pogarsza LCP.

Czy do obrazów potrzebna jest sieć CDN?

Nie zawsze. Przy stronie kierowanej głównie do odbiorców w Polsce i szybkim serwerze dobrze ustawiona pamięć podręczna często wystarcza. CDN ma większy sens przy ruchu z wielu krajów, dużych katalogach zdjęć i usługach, które automatycznie generują warianty rozmiarów i formatów. Decyzję podejmujemy po pomiarze, a nie z założenia.

Czy teksty alternatywne może napisać sztuczna inteligencja?

Narzędzia oparte na AI potrafią przygotować szkic opisu, co przy dużych bibliotekach oszczędza czas. Nie znają jednak kontekstu strony: nie wiedzą, że zdjęcie jest linkiem, że pełni funkcję dekoracyjną albo że przedstawia konkretny model produktu. Dlatego wygenerowane opisy zawsze przegląda i poprawia człowiek, zwłaszcza na najważniejszych podstronach.

Czy grafiki SVG też potrzebują tekstu alternatywnego?

Tak, jeśli niosą informację. Plik SVG wstawiony znacznikiem img opisuje się atrybutem alt tak samo jak zdjęcie. Grafika SVG osadzona bezpośrednio w kodzie strony wymaga innego podejścia, na przykład roli img i etykiety dostępności. Ikony dekoracyjne obok tekstu ukrywamy przed czytnikami ekranu, żeby nie powtarzały tej samej treści.

Czy da się zoptymalizować obrazy na stronie zbudowanej w kreatorze?

W dużej mierze tak. Nawet bez dostępu do kodu można przygotowywać pliki we właściwych wymiarach i formatach, uzupełnić teksty alternatywne, ograniczyć liczbę obrazów na pierwszym ekranie i zrezygnować z ciężkich sliderów. Części ustawień, takich jak priorytet ładowania czy warianty rozmiarów, kreator może nie udostępniać – wtedy wskazujemy, co jest poza zasięgiem i ile to realnie kosztuje.

Czy optymalizacja obrazów gwarantuje wyższe pozycje w Google?

Nie, i nikt uczciwie nie może tego zagwarantować. Szybkość i stabilność strony są jednym z wielu sygnałów, a największe znaczenie ma trafność i jakość treści. Optymalizacja obrazów daje natomiast mierzalne efekty: mniejszą wagę stron, lepsze wyniki Core Web Vitals, większą dostępność i szansę na ruch z wyników grafiki.

Jak często trzeba powtarzać optymalizację obrazów?

Jeśli wdrożenie obejmuje automatyczne przetwarzanie nowych plików i jasne zasady dla redakcji, wystarcza okresowa kontrola, na przykład przy większych zmianach w szablonie albo przeglądzie technicznym strony. Bez automatyzacji problem wraca razem z każdym nowym zdjęciem dodanym prosto z aparatu lub banku zdjęć.

Od czego zależy zakres prac i czas optymalizacji?

Głównie od liczby szablonów, wielkości biblioteki mediów, systemu, na którym działa strona, i od tego, czy teksty alternatywne trzeba pisać od podstaw. Mała strona firmowa to zupełnie inna skala niż sklep z tysiącami zdjęć produktów. Konkretny zakres i harmonogram przedstawiamy po audycie, gdy wiemy, gdzie leżą największe problemy.

Jakie wymiary przygotować dla zdjęcia w nagłówku strony?

Nie ma jednej uniwersalnej odpowiedzi, bo zależy to od układu strony. Ustalamy, jak szeroko zdjęcie jest wyświetlane na telefonie, tablecie i szerokim monitorze, i przygotowujemy kilka wariantów, uwzględniając ekrany o podwyższonej gęstości pikseli. Często opłaca się też osobny kadr dla telefonu, bo szeroka panorama w wąskim pionowym ekranie traci czytelność.

Jak samodzielnie sprawdzić, które obrazy na stronie są za ciężkie?

Najprostszy sposób to raport PageSpeed Insights dla kilku najważniejszych podstron: wskaże obrazy, które można zmniejszyć, zapisać w lżejszym formacie albo ładować później. W narzędziach deweloperskich przeglądarki, w zakładce sieci z filtrem obrazów, widać wagę każdego pliku. Przy większych witrynach przydaje się crawler SEO, który wypisze wszystkie obrazy powyżej zadanego rozmiaru i bez tekstu alternatywnego.

Czy osadzone posty z mediów społecznościowych i filmy spowalniają stronę?

Często tak, bo razem z podglądem ładują się zewnętrzne skrypty, czcionki i obrazy. Dlatego w miejscu osadzonego filmu lub posta wyświetlamy najpierw lekki, statyczny podgląd z przyciskiem odtwarzania, a właściwy odtwarzacz wczytujemy dopiero po kliknięciu. Podgląd ma zadeklarowane wymiary, więc nie przesuwa układu strony.

Czy obrazy mają znaczenie dla wymagań dostępności, które objęły sklepy internetowe?

Tak. Od czerwca 2025 roku w Unii Europejskiej obowiązują wymagania Europejskiego aktu o dostępności, które obejmują między innymi usługi handlu elektronicznego, z wyłączeniami dla części mikroprzedsiębiorstw. Teksty alternatywne są jednym z podstawowych elementów dostępności treści, obok kontrastu, obsługi klawiaturą czy czytelnych formularzy. Zakres obowiązków w konkretnej firmie warto potwierdzić z prawnikiem, a my zadbamy o stronę techniczną.

Czy obrazy można wstawiać jako tło sekcji w CSS?

Można, jeśli są czysto dekoracyjne. Obrazy, które niosą treść albo mają być widoczne w wynikach grafiki, powinny być osadzone znacznikiem img z tekstem alternatywnym. Tło w CSS nie ma opisu dla czytników ekranu, nie jest indeksowane jako obraz i przeglądarka odkrywa je późno, co ma znaczenie, gdy to właśnie ono jest największym elementem pierwszego ekranu.

Lista kontrolna

Osiem punktów do sprawdzenia przy każdym szablonie strony

Krótka lista, od której zaczynamy przegląd obrazów na stronie głównej, kategorii, produkcie czy wpisie blogowym. Możesz przejść ją samodzielnie, zanim zlecisz audyt.

Obraz LCP ładuje się od razu. Najważniejsze zdjęcie na pierwszym ekranie nie ma leniwego ładowania i jest dostępne w kodzie HTML, a nie dopiero w CSS czy skrypcie.
Każdy obraz ma wymiary. Atrybuty width i height lub proporcje w CSS rezerwują miejsce i zapobiegają przesunięciom układu.
Pliki pasują do miejsca wyświetlania. Przeglądarka nie pobiera zdjęcia kilka razy szerszego, niż wymaga układ na danym ekranie.
Nowoczesny format z wersją zapasową. Zdjęcia są serwowane w WebP lub AVIF, a starsze przeglądarki i platformy zewnętrzne dostają JPEG lub PNG.
Obrazy poniżej pierwszego ekranu ładują się leniwie. Galerie, miniatury i zdjęcia w dalszej części strony nie konkurują o łącze z obrazem LCP.
Opisy odpowiadają roli obrazu. Obrazy informacyjne i linki mają treściwe opisy, a grafiki dekoracyjne pusty atrybut alt.
Ważne treści nie są tylko na grafice. Ceny, terminy, hasła i dane kontaktowe są tekstem na stronie, a nie wyłącznie napisem na banerze.
Nowe zdjęcia są przetwarzane automatycznie. System sam zmniejsza, konwertuje i kompresuje pliki dodawane przez redakcję, a pole opisu jest widoczne przy dodawaniu.

Słowniczek

Pojęcia z raportów o obrazach i wydajności

Terminy, które pojawiają się w PageSpeed Insights, Search Console i rozmowach z programistami, wyjaśnione w kilku zdaniach.

LCP: Largest Contentful Paint, czyli czas wyświetlenia największego elementu widocznego na pierwszym ekranie. Na wielu stronach jest nim zdjęcie w nagłówku lub zdjęcie produktu.
CLS: Cumulative Layout Shift, miara nieoczekiwanych przesunięć układu strony. Obrazy bez zadeklarowanych wymiarów są jedną z najczęstszych przyczyn wysokiego wyniku.
srcset i sizes: Atrybuty znacznika img, które podają przeglądarce listę wariantów obrazu i informację o szerokości jego wyświetlania. Na tej podstawie przeglądarka wybiera najmniejszy wystarczający plik.
Element picture: Znacznik HTML pozwalający podać kilka źródeł obrazu, na przykład w AVIF, WebP i JPEG, albo różne kadry dla telefonu i komputera.
Leniwe ładowanie: Wczytywanie obrazu dopiero wtedy, gdy zbliża się do widocznego obszaru ekranu. Włącza się je atrybutem loading="lazy"; nie stosuje się go do obrazu LCP.
fetchpriority: Atrybut, który podpowiada przeglądarce priorytet pobierania zasobu. Wartość high przy najważniejszym zdjęciu pomaga przyspieszyć jego wyświetlenie.
Kompresja stratna i bezstratna: Stratna usuwa część informacji niezauważalnych dla oka i daje znacznie mniejsze pliki. Bezstratna zachowuje każdy piksel, ale zmniejsza plik w mniejszym stopniu.
Metadane EXIF i IPTC: Informacje zapisane w pliku: parametry aparatu, data, czasem lokalizacja (EXIF) oraz autor i prawa (IPTC). Zbędne usuwa się, by zmniejszyć plik i nie ujawniać danych.
CDN obrazów: Sieć serwerów dostarczająca pliki z lokalizacji bliższej użytkownikowi. Część usług tego typu automatycznie dopasowuje rozmiar i format obrazu do urządzenia.
Pusty atrybut alt: Zapis alt="" informujący czytniki ekranu, że obraz jest dekoracyjny i można go pominąć. To co innego niż całkowity brak atrybutu alt.
Preload: Wskazówka w nagłówku strony, która każe przeglądarce pobrać zasób wcześniej, niż sama by go odkryła. Przydaje się dla obrazu LCP ustawionego jako tło lub wstawianego skryptem.
Dane terenowe: Pomiary zbierane od prawdziwych użytkowników przeglądarki Chrome, widoczne w PageSpeed Insights i raporcie Core Web Vitals w Search Console. To one, a nie test laboratoryjny, decydują o ocenie strony.

Porozmawiajmy o obrazach na Twojej stronie

Strona wolno się ładuje albo obrazy nie mają opisów?

Sprawdzimy, które grafiki i szablony najbardziej spowalniają Twoją stronę, oraz przygotujemy plan zmian z priorytetami: od szybkich poprawek po automatyzację, która zadba o nowe zdjęcia.

+48 533 543 333 info@seosem24.pl Zamów audyt obrazów

5/5 - 1276

Zostaw komentarz Anuluj odpowiedź

Porozmawiajmy o Twoim projekcie

Bezpłatnie sprawdzimy Twoją stronę i zaproponujemy plan działań. Odpowiadamy tego samego dnia, dyżur eksperta 24/7.

+48 533 543 333 info@seosem24.pl Bezpłatna wycena