Wzorzec 09

Obrazy, które nie pchają

Obraz bez wymiarów to najczęstsze źródło skoków layoutu w sieci. Atrybuty width i height dają przeglądarce proporcje przed pobraniem pliku, srcset dobiera rozdzielczość do ekranu, a placeholder wypełnia zarezerwowane miejsce do czasu dekodowania.

Galeria z zarezerwowanymi proporcjami

Przeładuj i patrz na podpisy pod obrazami: nie drgną, bo aspect-ratio trzyma miejsce, zanim piksele dotrą.

Reguły

Każdy img ma width i height albo aspect-ratio, zanim przyjdzie plik.
srcset i sizes dobierają plik do ekranu, zamiast wysyłać desktopowy plik na telefon.
Obrazy poniżej pierwszego ekranu mają loading lazy, hero ma fetchpriority high.
Placeholder dziedziczy proporcje obrazu i znika płynnie po dekodowaniu.

Wzorzec w kodzie

Wymiary, srcset i lazy w jednym znaczniku

<img
  src="/atlas-1600.avif"
  srcSet="/atlas-800.avif 800w, /atlas-1600.avif 1600w"
  sizes="(min-width: 1024px) 50vw, 100vw"
  width={1600}
  height={900}
  alt="Kadr z sesji brandingowej Atlas"
  loading="lazy"
  className="size-full rounded-xl object-cover"
/>

Placeholder i obraz dzielą komórkę o stałych proporcjach

<div className="grid aspect-video overflow-hidden rounded-xl">
  <div className="skeleton col-start-1 row-start-1" />
  <img
    onLoad={(event) => event.currentTarget.classList.add("opacity-100")}
    className="col-start-1 row-start-1 size-full object-cover opacity-0 transition-opacity"
    {...attrs}
  />
</div>

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia

Zaimplementuj w moim projekcie wzorzec „Obrazy, które nie pchają" z metodologii Liquid Design.

Wymiary zadeklarowane w znaczniku, aspect-ratio w CSS i placeholder w tle: obraz może się spóźnić, layout nie.

Wymagania:
- Każdy img ma width i height albo aspect-ratio, zanim przyjdzie plik.
- srcset i sizes dobierają plik do ekranu, zamiast wysyłać desktopowy plik na telefon.
- Obrazy poniżej pierwszego ekranu mają loading lazy, hero ma fetchpriority high.
- Placeholder dziedziczy proporcje obrazu i znika płynnie po dekodowaniu.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/obrazy