Znaczniki obrazów elastycznych można podzielić na 2 sytuacje: sytuacje, w których celem są najbardziej efektywne obrazy, oraz sytuacje, w których potrzebujesz wyraźnej kontroli nad źródłem obrazu wybieranym przez przeglądarkę. Możesz je traktować odpowiednio jako składnię opisową i przepisową.
W tym module poznasz oba podejścia. Na początku omówimy srcset i sizes oraz sposoby pomagania przeglądarce w dokonaniu wyboru na podstawie dostępnych informacji o użytkowniku, jego urządzeniu i sytuacji związanej z przeglądaniem. Następnie odkryjesz element <picture>, który zapewnia bezpośrednią kontrolę nad wyborem źródła w zależności od takich czynników jak rozmiar widocznego obszaru i obsługa formatów obrazów w przeglądarkach.
Składniai opisowe
Składnia opisowa dostarcza przeglądarce informacji o źródłach obrazów i sposobie ich wykorzystania, ale decyzja o podjęciu decyzji pozostawia przeglądarce. Jest to zdecydowanie częstszy scenariusz – w przypadku większości obrazów nie chcesz mieć szczegółowej kontroli nad działaniem przeglądarki. Przeglądarki dysponują znacznie większą ilością informacji niż programiści sieciowi, dlatego mogą podejmować złożone decyzje na ich podstawie. Nie można dokładnie przewidzieć kontekstu przeglądania internetu przez użytkowników – za dużo informacji o ich sprzęcie, preferencjach i szybkości połączeń jest zbyt wiele, których nie wiemy. Można nawet zgadywać, jak działają one w sieci, ale nie możesz dokładnie poznać pewności, jak każdy użytkownik korzysta z internetu. Z perspektywy dewelopera najważniejsze jest, aby obrazy elastyczne były ściśle ukierunkowane na konkretne cele: umożliwiają przeglądarkom wykonywanie najefektywniejszych żądań obrazów na podstawie dostępnych informacji.
Aby umożliwić przeglądarkom dokonywanie tych wyborów, srcset udostępnia przeglądarce listę potencjalnych źródeł w których może się wyświetlać pojedynczy plik <img>, natomiast sizes umożliwia przekazanie przeglądarce informacji o sposobie renderowania elementu <img>. W następnym module dowiesz się, jak z nich korzystać.
Przepisy
Składnia oparta na nakazach wskazuje przeglądarce, co ma zrobić – jakie źródło ma wybrać na podstawie zdefiniowanych przez Ciebie kryteriów. Chociaż ten przypadek użycia nie jest tak typowy jak „wczytanie najskuteczniejszego zasobu do wyrenderowania tego obrazu”, pozwala nam to przekazać przeglądarce instrukcje użytkowania, które pozwolą nam uwzględnić informacje, których nie ma przed przesłaniem zasobów, takie jak zawartość źródeł czy ich formaty.
Chociaż srcset i sizes zapewniają składnię umożliwiającą przekazywanie informacji do przeglądarki użytkownika i umożliwianie jej podjęcia decyzji dotyczących źródeł obrazów, czasem trzeba będzie mieć wyraźną kontrolę nad tym, który plik źródłowy jest wyświetlany i kiedy. Możesz na przykład wyświetlać wersje tej samej zawartości graficznej w różnych formatach obrazu na podstawie odmiennych sposobów projektowania elementów w punktach przerwania układu lub upewnić się, że z określonych źródeł pochodzą tylko przeglądarki obsługujące określone kodowanie.
W takich przypadkach potrzebujesz wyraźnej kontroli nad tym, które źródło jest wyświetlane i kiedy. Są to zapewnienie, których srcset i sizes nie mogą nam z założenia. Aby uzyskać tę kontrolę, musimy użyć elementu <picture>.