SEOMaster
Wiedza / Diagramy / Wydajność i obrazy
Jak przeglądarka wybiera obraz responsywny
srcset podaje kandydatów, sizes opisuje miejsce w układzie, a picture pozwala zmienić format lub kadr; przeglądarka wybiera jeden plik.
Co pokazuje ten diagram?
Od pobrania zasobów do wyrenderowania stabilnego widoku oraz pomiaru Core Web Vitals.
Obrazy responsywne pozwalają przeglądarce pobrać plik dopasowany do szerokości miejsca w układzie i gęstości ekranu. Atrybut srcset opisuje dostępne warianty, na przykład 480w, 960w i 1600w. Atrybut sizes mówi, ile miejsca obraz zajmie przy danym breakpointcie; bez tej informacji przeglądarka może założyć zbyt szeroki slot i pobrać cięższy plik. Element picture służy do zmiany formatu albo kadru, a nie do ładowania wszystkich źródeł naraz. Przeglądarka wybiera jednego najlepszego kandydata przed pobraniem, dlatego poprawna konfiguracja ogranicza transfer bez pogorszenia ostrości.
Pomaga połączyć wynik PageSpeed lub audytu z konkretną fazą ładowania, formatem obrazu albo protokołem.
Jak czytać schemat
- Jeden element HTML · jeden najlepiej dopasowany plik
- Ekran urządzenia — viewport + DPR
- img: srcset + sizes — kandydaci + szerokość slotu
- picture / source — format albo inny kadr
- warunki
- lista
- format
- Przeglądarka wybiera — format + szerokość pliku
Pełne wyjaśnienie pojęcia
Obrazy responsywne: srcset, sizes i picture — Dobór rozmiaru, formatu lub kadru obrazu do ekranu bez pobierania wszystkich wariantów.
Jak użyć diagramu?
Otwórz sam plik SVG, aby powiększyć go bez utraty jakości, albo odwołaj się do tej strony, gdy potrzebujesz również opisu, legendy i powiązanych materiałów.