Martin Michálek Martin Michálek  – 28. 4. 2021

Zápis image-set() umožňuje nechat prohlížeč vybrat nejvhodnější obrázek, definovaný v rámci vlastnosti background-image, ze sady, kterou mu připravíme.

Je to vhodné zejména pro posílání různých obrázků na obrazovky s vysokou hustotou pixelů:

.box {
  background-image: 
    image-set(
      "obrazek.png" 1x,
      "vetsi-obrazek.png" 2x
    );
}

Od února 2021 tento zápis podporuje Firefox (zatím ve verzi Nightly). Díky tomu už bude brzy možné základní varianty zápisu image-set() používat ve všech moderních prohlížečích.

Jak jste asi pochopili, jde o obdobu atributu srcset pro značku <img>. Některé varianty zápisu image-set() mohou přebírat také funkčnost značky <picture>, jenže ty zatím nejsou podporované.

image-set() je prostě takový malý srcset pro obrázky na pozadí vkládané přes CSS.

Výběr obrázku podle hustoty pixelů

Obrázky definované ve vlastnosti background-image občas potřebujeme prohlížečům poslat v různých variantách, protože nevíme, jakou hustotu pixelů bude mít zařízení, na kterém běží.

.box {
  background-image: image-set( 
    "http://satyr‎.io/300x300/" 1x,
    "http://satyr‎.io/600x600/" 2x,
    "http://satyr‎.io/900x900/" 3x
  );
} 

Obecně vzato, v image-set() vždy uvádíme adresu obrázku a podmínky za jakých se má zobrazovat. Tak je to ve specifikaci.

Jenže prakticky vzato dnes máme jediný možný zápis – deskriptory 1x, 2x, 3x a podobné udávají hustotu pixelů, tedy hodnotu dppx, kterou znáte z hodnoty resolution v Media Queries.

Takže například na většině počítačů s Windows se stáhne první obrázek (http://satyr.‎io/300x300/), protože dppx má hodnotu 1. Na iPhonu 11 se stáhne druhý obrázek. Na některých moderních Androidech, které mívají vyšší hustotu pixelů, i 3 a více, pak poslední obrázek.

Není to jediná varianta, kterou bychom podle specifikace mohli použít.

Další teoretické možnosti použití image-set(), zatím nepodporované

Specifikace je jedna věc, praxe ale velí vycházet z podpory v prohlížečích. Dále uváděné možnosti zůstávají na papíře. Jediný prohlížeč, který je podporuje, je právě nový Firefox Nighly.

Výběr podle typu obrázku

Podobně jako u značky <picture> bychom i tady mohli prohlížeči nabídnout dva formáty pro jeden obrázek. To by bylo skvělé pro využití u nových formátů jako WebP nebo AVIF

.box {
  background-image: 
    image-set( 
      "http://satyr‎.io/300x300?type=webp" type("image/webp"),
      "http://satyr‎.io/300x300?type=png" type("image/png")
    );
}

…kdyby to ovšem podporovaly prohlížeče. Ke dni psaní s tímto zápisem uspějete jen Firefox Nightly.

Více je možné vidět v CodePenu.

Kombinace obrázků s generovaným pozadím

Občas by se kódérkám a kóderům mohla hodit kombinace obrázku s generovaným pozadím, např. přechody tvořenými pomocí linear-gradient().

.box {
  background-image: 
    image-set( 
      linear-gradient(grey, white) 1x,
      "http://satyr‎.io/300x300" 3x 
    );
} 

Podporuje to opět jen nový Firefox ve vývojářské verzi Nightly. CodePen k hraní.

Deskriptor w

V atributu srcset bychom teoreticky mohli mít možnost používat deskriptor w, jenž prohlížeč informuje o šířkách nabízených obrázků. To aby si lépe vybral.

.box {
  background-image: image-set( 
    "http://satyr‎.io/300x300/" 300w,
    "http://satyr‎.io/600x600/" 600w,
    "http://satyr‎.io/900x900/" 900w
  );
} 

Tady ale pouštím imaginaci na plné obrátky a troufám si jít opravdu daleko, protože i ve specifikace o tomto mluví jako o přání a úkolu pro budoucí specifikátory, nikoliv o navržené vlastnosti. Tak nic.

Mrkněte se na CodePen.

Na vaše objevování zápisu image-set() se těší celá moje kolekce CodePenů.

Podpora

Použitelnost zápisu image-set() díky implementaci ve Firefoxu bez pochyby v příštích měsících prudce stoupne. Jde totiž o poslední moderní prohlížeč, který jej dosud neuměl.

Jenže pokud jste se, jako já, nechali namlsat všemi zde uvedenými možnostmi zápisu, budete stejně zklamaní. Ale tak už to mezi námi webaři chodí. Jsme nadšení z implementace nový vlastností, abychom byli tentýž den zklamaní, co všechno ještě prohlížeče neumí.

Při implementaci nezapomeňte na Autoprefixer, protože i moderní prohlížeče pro tuto vlastnost vyžadují prefixy – např. Chrome rozumí jen zápisu -webkit-image-set().

Internet Explorer je sice už téměř vymřelý druh, ale pokud byste potřebovali zajistit si fungování i v něm, musíte uvést náhradní řešení. Je to vidět v mém prvním CodePenu:

.box {
  /* Fallback: */
  background-image: url("http://satyr‎.io/300x300/");
  background-image: image-set( 
    "http://satyr‎.io/300x300/" 1x,
    "http://satyr‎.io/600x600/" 2x,
    "http://satyr‎.io/900x900/" 3x
  );
} 

Vše o podpoře image-set() najdete klasicky na CanIUse. caniuse.com/css-image-set

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?