Funkcja CSS image-set()

Funkcja CSS image-set() umożliwia zdefiniowanie kilku wersji jednego obrazu, aby pozwolić przeglądarce wybrać ten, który jest najbardziej odpowiedni w danej sytuacji. Na przykład, jeśli przeglądarka działa urządzeniu z powolnym łączem internetowym, to może wybrać obraz o mniejszej rozdzielczości albo jeśli przeglądarka nie obsługuje obrazów w jednym formacie, to może wybrać wersję w innym formacie.

Wartości i składnia

Składnia funkcji image-set():

image-set(obraz rozdzielczość typ, obraz rozdzielczość typ…);

Funkcja image-set() przyjmuje rozdzielane przecinkami grupy zawierające maksymalnie po trzy wartości. W każdej grupie obowiązkowy jest tylko pierwszy parametr, obraz, a pozostałe dwa, rozdzielczość i typ, są opcjonalne.

• Obraz – obraz można określić w dowolny sposób obsługiwany w CSS, np. przed podanie adresu za pomocą funkcji url() lub przy użyciu jednej z funkcji gradientowych. Dodatkowo adres pliku graficznego można także wpisać wprost jako łańcuch tekstowy, np.:

  /* Użycie funkcji url() */
  image-set( url("kot.jpg") type("image/jpeg") );
  
  /* Użycie łańcucha tekstowego */
  image-set( "kot.jpg" type("image/jpeg") );

• Rozdzielczość – na podstawie tej wartości przeglądarka dokonuje wyboru jednego z zestawu obrazów. Obsługiwane są jednostki rozdzielczości CSS x lub dppx (liczba kropek na piksel), dpi (liczba kropek na cal) oraz dpcm (liczba kropek na centymetr). Każdy obraz określony w funkcji image-set() musi mieć inną rozdzielczość.
• Typ – typ MIME obrazu, np. "image/png".

Przykłady

Wybór obrazu na podstawie formatu

W poniższym przykładzie przeglądarka obsługująca format grafiki JPG wybierze pierwszy obraz, a przeglądarka, która go nie obsługuje, wybierze PNG.

background-image: image-set(
  url("kot.jpg") type("image/jpeg"),
  url("kot.png") type("image/png")
);

Wybór obrazu na podstawie rozdzielczości

W tym przykładzie funkcja image-set() dostarcza dwie wersje obrazu. Jedna jest o standardowej rozdzielczości, a druga o wysokiej rozdzielczości.

background-image: image-set(
  "pies.jpg" 1x,
  "pies-duzy.jpg" 2x
);