<picture> – ukázka zápisu

<picture>
    <source media="(min-width: 1024px)" srcset="large.jpg">
    <source media="(min-width: 600px)" srcset="medium.jpg">
    <img src="small.jpg" alt="…">
</picture>

Je asi zřejmé, že obrázek small.jpg se použije ve starých prohlížečích nebo tam, kde není splněna ani jedna Media Query v <source> – v tomto případě do šířky okna 599 pixelů.

Dobré vědět, že <picture> tvoří trochu neekologicky zbytečný obal a <source> jen jakési molitanové vycpávky nesoucí informaci o alternativách. Veškeré stylování nebo věšení událostí v javascriptu je nutné dělat přímo na <img> element. Prohlížeče také do jeho atributu src stěhují obsah vyhovujícího obrázku z srcset u atributů <source>. Proto v každém <picture> musí být právě jeden <img>.

Kdy budete <picture> potřebovat?

Pokaždé, kdy vaše varianty splňují jednu z těchto podmínek:

1. Potřebujete servírovat jinak vypadající obrázky pro různá rozlišení — třeba pro mobily chcete jinak vyříznout hlavní motiv obrázku (scénář art direction).
2. Prohlížečům jste připravili obrázky v různých souborových formátech.

Ve všech ostatních případech a tedy v naprosté většině případů vám bude stačit starý dobrý img s atributy srcset a sizes.

Art direction – obrázky pro různá rozlišení mají také různý obsah

<picture>
  <source 
   srcset="large_1600.png" 
   media="(min-width: 1024px)">
  <source 
   srcset="medium_1024.png" 
   media="(min-width: 800px)">
 <img 
    src="small_600.png"    
    alt="Obrázek" width="200" height="200">
</picture>

Demo pro art direction s <picture> na CodePen. (V demu jsme použili polyfill Picturefill, takže funguje ve všech prohlížečích, ale možná jste si všimli nepřítomnosti atributu src.)

Pro okna 1024 pixelů a větší se stáhne a použije obrázek large_1600.jpg, od 800 do 1023 pixelů medium_1024.jpg a pro okna šířky 799 a méně pixelů pak small_600.jpg.

Dobré vědět, že z variant obrázku v <source> se vezme vždy první vyhovující, takže je nutné je řadit od největšího po nejmenší.

Podle formátu obrázku

Vybírat obrázky můžete i podle formátu. Použijte atribut type="". Příklad — některé prohlížeče zvládají nový úsporný formát obrázků WebP.

<picture>
    <source media="(min-width: 1024px)" srcset="large.webp" type="image/webp">
    <source media="(min-width: 1024px)" srcset="large.jpg">
    <img src="small.jpg" alt="…">
</picture>

Prohlížeč, co umí formát WebP a běží v okně velikosti alespoň 1024 pixelů, stáhne a zobrazí soubor large.webp. Pokud vím, Picturefill umí kromě WebP detekovat ještě SVG.

Další složitější scénáře použití <picture> najdete například v tomto článku na Dev.Opera.

Teď to všechno ještě uvést do reality. Potřebujeme Picturefill. Polyfill, který dokáže zařídit podporu nově standardizovaných responzivních obrázků (atributů srcset a sizes a elementu <picture>) ve všech prohlížečích. Picturefill má dvě použitelné verze, obě mají svá pro i proti. Standardně doporučuji používat verzi 2.x.

Picturefill 2

Novější verze 2.x obsluhuje daleko více scénářů použití responzivních obrázků – je to plnohodnotný polyfill dočasně emulující funkčnost srcset/sizes i tagu <picture> ve všech prohlížečích.

Nic ale není zadarmo. První nevýhoda Picturefillu 2 spočívá v nutnosti vynechat src atribut, aby prohlížeče bez podpory <picture> nestáhly dva obrázky. To také znamená, že prohlížeče bez Javascriptu uvidí místo obrázku jen alternativní text. Vzniknou také problémy s ne-indexováním obrázku v Google Images nebo ne-možností vložit obrázek při sdílení stránky na Facebooku. Pokud je nicméně autorovi známo, pak kromě toho, že tak vznikne dočasně nevalidní kód, nemá vynechání src žádné jiné negativní dopady ani na čtení stránky slepeckými čtečkami. Zda chcete používat variantu se src nebo bez něj si rozmyslete podle požadavků projektu.

Druhá verze Picturefillu využívá standardizované syntaxe, a tak se zápis blíží tomu, co za pár let budou prohlížeče umět nativně.

Příklad zápisu pro srcset a sizes:

<img 
  sizes="(min-width: 40em) 80vw, 100vw"
  srcset="small.jpg 375w, medium.jpg 480w, large.jpg 768w" 
  alt="Obrázek" width="500" height="250">

Příklad zápisu pro <picture>:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="large.jpg" media="(min-width: 800px)">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="medium.jpg" alt="Obrázek">
</picture>

Kroutíte hlavou nad použitím <video> tagu? Ano, to je další obezlička, tentokrát pro Internet Explorer 9.

Jasně, Picturefill 2 má těch obezliček a drobných nevýhod docela dost, ale dobře se zamyslete, co vám jeho použití přinese. Pokud chcete mít responzivní obrázky a zároveň jsou pro vás nevýhody druhé verze nepřekonatelné, zkuste ještě původní verzi Picturefillu.

Picturefill 1

Verze 1.x se vyznačuje ošklivou syntaxí postavenou na spanech a umí vyřešit jen dva scénáře použití responzivních obrázků – podle rozlišení obrazovky a device-pixel-ratio.

<span data-picture data-alt="Obrázek">
  <span data-src="small.jpg"></span>
  <span data-src="medium.jpg" 
    data-media="(min-width: 400px)"></span>
  <span data-src="large.jpg"
    data-media="(min-width: 800px)"></span>

  <!-- Fallback pro ne-JS prohlížeče -->
  <noscript>
    <img src="small.jpg" alt="Obrázek">
  </noscript>
</span>

Výhodou ale je bezchybná funkčnost ve všech možných prohlížečích, včetně toho, že nějaký ten obrázek uvidí i uživatel sedící u prohlížeče bez Javascriptu. Picturefill 1 má navíc jen asi 2 kB.

Pojďme to shrnout. Pokud v responzivních obrázcích vidíte přínos pro váš projekt a potřebujete podporu ve všech prohlížečích, volte Picturefill. Volte 2.x verzi. 1.x jako poslední záchranu, pokud vám nevýhody dvojky trhají kodérské srdce.

Čtěte dále

• Dev.Opera: Scénáře použítí responzivních obrázků (anglicky)
• Autorova přednáška Responzivní obrázky v praxi a slajdy k ní
• Přednášky Robina Pokorného: úvod do problému, problém a základní řešení a problém a pokročilé řešení pro responzivní obrázky.
• Generátor variant obrázků pro Grunt.
• Compressive Images, alternativní technika, pokud řešíte jen problém s device-pixel-ratio a datovým objemem na pomalých připojeních.

Původně vyšlo na VzhůruDolů.cz. Responzivní obrázky autor také školí na kurzu responzivního designu.