Responsywne obrazy z użyciem srcset i sizes

Wybierz właściwy wzorzec

Resolution switching (przełączanie rozdzielczości) zachowuje tę samą kompozycję i oferuje kilka szerokości plików. To zwykły wzorzec dla zdjęć produktowych, ilustracji artykułów i kafelków. Używaj deskryptorów szerokości takich jak 480w lub 1200w, gdy renderowana szerokość zmienia się wraz z układem. Liczba to rzeczywista szerokość pliku w pikselach, a nie cel na telefonie ani polecenie CSS.

Density switching (przełączanie gęstości) obsługuje stały slot CSS, dostarczając więcej pikseli źródłowych dla wyświetlaczy o wyższej gęstości. Jego deskryptory to 1x, 1.5x lub 2x i pasuje do logo lub ikony, która ma stale, na przykład, 160 CSS pikseli szerokości. Nie mieszaj deskryptorów szerokości i gęstości w jednym srcset.

Zrozum, jak sizes kieruje wyborem

Dla deskryptorów szerokości przeglądarka ocenia sizes przed pobraniem obrazu. Każdy wpis łączy opcjonalny warunek media z jednostką długości. Pierwszy pasujący warunek dostarcza source size; ostateczna bezwarunkowa długość jest fallbackiem. sizes to wskazówka wyboru, a nie reguła CSS.

Przeglądarka porównuje to source size z szerokościami kandydatów, aby obliczyć efektywną gęstość, a następnie może uwzględnić gęstość wyświetlacza, powiększenie i warunki sieciowe. Nie jest zobowiązana do wyboru matematycznie najbliższej nazwy pliku. Dostarczaj uczciwe kandydatury i wiarygodne oszacowanie slotu; ostateczny wybór pozostaje decyzją agenta użytkownika.

Wyprowadzaj kandydatów z rzeczywistego układu

Sporządź inwentaryzację komponentów, a nie stron. Hero, ilustracja redakcyjna, galeria produktów, miniatura w wynikach wyszukiwania i logo stopki często mają różne szerokości slotów. Dla każdego zanotuj wąską i najwiekszą renderowaną szerokość, proporcję boków, zachowanie kadrowania i widoczność na początkowym ekranie.

Generuj szerokości wokół znaczącego zakresu slotu komponentu, z większą opcją, gdy szczegóły uzasadniają renderowanie o wyższej gęstości. Prawie identyczne pliki dodają złożoności budowy i cache; tylko bardzo mały i bardzo duży plik wymuszają kompromis. Testuj wygenerowane URL-e zamiast zakładać, że transformacje obrazów działają.

Zachowaj ważny src fallback oraz wartości width i height, które pasują do dostarczonego stosunku. Rezerwują one przestrzeń, ale nie zapobiegają responsywnemu CSS-owi zmieniającemu końcowe wymiary.

Użyj picture do art direction (kierowanie artystyczne)

Art direction zmienia kompozycję, a nie tylko rozmiar pliku. Szerokie zdjęcie krajobrazu może wymagać wątszego, pionowego kadru na wąskim ekranie, aby jego temat pozostał widoczny. Element picture może zaoferować media-specyficzne opcje źródeł, po których następuje jeden fallback img. Przeglądarka rozważa media, type i informacje srcset każdego source; img zawiera tekst alternatywny, wymiary i zachowanie fallbacku.

Przygotuj każde kadrowanie z przeglądem redakcyjnym i dostępowym. Mobilny crop może usunąć szczegół produktu lub osobę opisaną w alternative text. Umieść alt na img i opisz informację lub funkcję, którą obraz przekazuje. Użyj alt="" tylko dla naprawdę dekoracyjnego obrazu; dla obrazu w linku lub przycisku opisz działanie zamiast wyglądu. Nie wprowadzaj picture, gdy kadrowanie nie ulega zmianie: zwykły srcset oparty na szerokości jest prostszy.

Unikaj kosztownych błędów ładowania i znacznika

Zwykła strata to kopiowanie sizes="100vw" do każdego obrazu. To może pasować do wąskiego obrazka pełnej szerokości, ale nie do ograniczonego kontenera czy karty desktopowej. Przeciwną porażką są przestarzałe values sizes po redesignie. Zmieniaj CSS i sizes razem.

Nie ładuj leniwie (lazy-load) obrazu ważnego dla początkowo widocznej zawartości. Zalecenia sugerują lazy loading dla obrazów poniżej folda i utrzymanie widocznego hero jako eager. fetch priority może podnieść priorytet naprawdę istotnego obrazu, ale szerokie stosowanie wysokiego priorytetu lub preload może zaszkodzić wydajności. Nie polegaj na nazwach plików ani wynikach cache jako na dowodzie.

Przetestuj żądanie, kadrowanie i naprawę

Testuj reprezentatywne strony przy szerokościach zmian układu, w tym tuż powyżej i poniżej punktu przerwania gridu. Uwzględnij ustawienie o wysokiej gęstości, szeroki desktop oraz stany zmieniające slot. Potwierdź renderowane wymiary, kadrowanie, tekst alternatywny i ostrość wizualną.

W Chrome DevTools otwórz Network, przeładuj z wyłączonym cache lub użyj Empty Cache And Hard Reload, filtruj żądania obrazów i sprawdź URL, rozmiar transferu, nagłówki, initiator i timingi. Throttle (ogranicz) połączenie, aby ujawnić opóźnione lub marnotrawne zadania. Zarejestruj viewport, device scale factor, slot, kandydata, przesłane bajty i oczekiwany rezultat.

Gdy szablon, breakpoint, CDN lub pipeline zasobów ulegnie zmianie, potraktuj to jako bramkę wydania. Naprawiaj wąsko: popraw sizes, skoryguj deskryptor, wygeneruj ponownie crop, przywróć fallback albo usuń niepotrzebny preload. Ponownie przetestuj przy przeładowaniu z wyczyszczoną pamięcią podręczną.

Stosuj to jako kontrolę odporności SIU

Responsywne obrazy zmniejszają niepotrzebny transfer, ale nie gwarantują pomyślnego żądania. Błędy origin, niedostępne transformacje, hosty trzecie i awarie CDN wymagają odrębnego planowania ciągłości i odzyskiwania.

Dla SIU używaj rekordów testowych, aby wcześnie wykrywać regresje dostawy, zidentyfikować odpowiedzialny szablon lub regułę transformacji i wprowadzić najmniejszą bezpieczną korektę przed wydaniem. Sparuj to z preflightem dostępności i planowaniem rollbacku.