Responsive images w WordPressie to mechanizm, który pozwala dostarczyć przeglądarce plik o rozmiarze dopasowanym do ekranu i gęstości pikseli. WordPress od wersji 4.4 automatycznie tworzy kilka wariantów przesłanego obrazu, a następnie przekazuje je w kodzie HTML za pomocą atrybutów srcset i sizes. Nie trzeba dopisywać tych atrybutów ręcznie przy każdym zdjęciu.
Czym są responsywne obrazy w WordPressie?
W klasycznym podejściu strona mogłaby wysyłać wszystkim użytkownikom ten sam, duży plik, na przykład zdjęcie o szerokości 2000 pikseli. Telefon wyświetlający obraz w obszarze szerokim na 360 pikseli pobierałby wtedy znacznie więcej danych, niż rzeczywiście potrzebuje.
WordPress rozwiązuje ten problem automatycznie. Po przesłaniu obrazu do biblioteki mediów generuje jego warianty o różnych szerokościach, zależnie od ustawień instalacji i motywu. W treści wpisu umieszcza następnie informacje o dostępnych plikach. To przeglądarka, a nie sam serwer, wybiera wariant najlepiej pasujący do bieżących warunków.
Responsywność obrazu nie jest tym samym co responsywny design. CSS może zmienić szerokość elementu na stronie, ale nie decyduje sam w sobie, który plik graficzny zostanie pobrany. Za przekazanie listy wariantów i kontekstu ich wyświetlania odpowiadają atrybuty HTML generowane przez WordPress.
Jak działają atrybuty srcset i sizes?
Oba atrybuty pełnią różne funkcje. srcset opisuje dostępne pliki, a sizes pomaga przeglądarce oszacować, jak szeroki będzie obraz w układzie strony.
srcset– zawiera adresy kilku wersji obrazu oraz ich szerokości w pikselach, na przykład 480, 768 i 1200 pikseli.sizes– określa przewidywaną szerokość obrazu w zależności od szerokości okna lub warunków układu.src– pozostaje adresem domyślnym i pełni także funkcję zapasową dla starszych przeglądarek.- parametr gęstości – przeglądarka bierze pod uwagę także ekrany o wysokiej gęstości pikseli, takie jak wyświetlacze Retina.
Przykładowy kod może wyglądać tak:
<img
src="zdjecie-768x512.jpg"
srcset="
zdjecie-480x320.jpg 480w,
zdjecie-768x512.jpg 768w,
zdjecie-1200x800.jpg 1200w,
zdjecie-2000x1333.jpg 2000w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 80vw, 1200px"
alt="Opis zdjęcia">Wartość 480w nie oznacza jakości obrazu ani gęstości pikseli. Informuje, że dany plik ma szerokość 480 CSS-pikseli. Z kolei zapis 100vw oznacza szerokość równą szerokości okna przeglądarki. W bardziej złożonym układzie motyw może przekazać inną wartość, zgodną z szerokością kolumny lub kontenera.
W typowym wpisie nie musisz samodzielnie tworzyć takiego kodu. WordPress dodaje atrybuty podczas generowania znacznika obrazu. Wyjątkiem mogą być obrazy dodawane przez niestandardowe komponenty, ręcznie napisany kod albo rozwiązania, które nie korzystają ze standardowego mechanizmu WordPressa.
Jak przeglądarka wybiera właściwy obraz?
Po otrzymaniu kodu HTML przeglądarka analizuje dostępne warianty i warunki wyświetlania. Proces można przedstawić w kilku krokach:
- Przeglądarka sprawdza szerokość obszaru, w którym obraz ma zostać wyświetlony.
- Odczytuje wartość
sizes, aby ustalić przewidywaną szerokość obrazu w układzie strony. - Uwzględnia gęstość pikseli urządzenia. Ekran Retina może potrzebować pliku o większej rozdzielczości niż zwykły ekran o tej samej szerokości CSS.
- Porównuje wymagany rozmiar z wariantami wymienionymi w
srcset. - Wybiera plik, który zapewnia wystarczającą jakość bez pobierania niepotrzebnie dużej wersji.
Decyzję podejmuje przeglądarka na podstawie bieżących warunków, takich jak szerokość ekranu, gęstość pikseli, dostępne warianty i czasem także stan połączenia. WordPress przygotowuje materiały do tego wyboru, ale nie wskazuje z góry jednego pliku dla każdego użytkownika.
Rozmiary generowane przez WordPress można częściowo kontrolować w panelu w sekcji Ustawienia → Media. Znajdują się tam domyślne szerokości dla rozmiaru miniatury, średniego i dużego. Motyw lub wtyczka może rejestrować także własne rozmiary. Zmiana tych wartości wpływa na warianty używane później przez obrazy, ale nie zastępuje właściwego przygotowania pliku źródłowego.
Dlaczego responsywne obrazy poprawiają szybkość strony?
Mniejszy wariant obrazu zwykle oznacza mniej danych do pobrania i krótszy czas dekodowania. Jest to szczególnie ważne, gdy zdjęcie znajduje się wysoko na stronie i staje się największym widocznym elementem. Jego załadowanie może wpływać na wskaźnik LCP (Largest Contentful Paint), należący do Core Web Vitals.
Poniższe wartości mają charakter przykładowy. Rzeczywista waga zależy od formatu, kompresji, zawartości zdjęcia, serwera i połączenia użytkownika:
| Sposób ładowania | Przykładowa waga | Wpływ na szybkość |
|---|---|---|
| Jeden plik 2000 px dla każdego urządzenia | około 400–800 KB | Większy transfer na telefonie i potencjalnie wolniejszy LCP |
| Automatyczny wariant około 768 px na mniejszym ekranie | około 100–250 KB | Mniej danych do pobrania i krótsze ładowanie obrazu |
| Wariant dopasowany do szerokości kolumny i gęstości ekranu | Zależnie od pliku | Lepszy kompromis między jakością a rozmiarem |
Najważniejsze korzyści tego mechanizmu dla wydajności to:
- mniejszy transfer danych na urządzeniach mobilnych,
- krótszy czas pobierania obrazu znajdującego się w obszarze widocznym po otwarciu strony,
- mniejsze zużycie zasobów podczas dekodowania dużych plików,
- lepsze warunki do uzyskania korzystnego wyniku LCP, gdy obraz jest głównym elementem strony.
Automatyczne warianty nie naprawią jednak każdego problemu. Wgranie zdjęcia o szerokości 5000 pikseli może nadal zwiększać miejsce zajmowane w bibliotece i czas przetwarzania. WordPress dobiera plik do wyświetlania, ale nie zastępuje kompresji, wyboru właściwego formatu ani rozsądnego przygotowania materiału źródłowego.
W skrócie: WordPress tworzy dostępne warianty, srcset przekazuje ich listę, sizes opisuje przewidywaną szerokość obrazu, a przeglądarka wybiera plik najlepiej dopasowany do urządzenia.
