Responzivní obrázky v HTML5: Kompletní průvodce

Proč používat responzivní obrázky?

• Rychlejší načítání – Prohlížeč stáhne pouze tak velký obrázek, jaký potřebuje.
• Šetření dat u mobilních uživatelů – Neposíláme obrovské soubory na malé displeje.
• Lepší zobrazení na Retina displejích – Prohlížeč si vybere ostrý obrázek odpovídající hustotě pixelů.
• SEO a Google Pagespeed – Google preferuje optimalizované obrázky.

Základní způsoby implementace

HTML5 nabízí dvě hlavní metody pro responzivní obrázky:

• Použití srcset a sizes v <img> (doporučené pro šířkovou optimalizaci).
• Použití <picture> a <source> (vhodné pro změnu formátu nebo kompozice obrázku).

Rozdíl mezi w a x v srcset

Existují dva způsoby zápisu srcset:

1. Šířkově založený zápis (w) – umožňuje kombinaci s sizes

srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1920w"

Prohlížeč si vybere obrázek podle aktuální velikosti viewportu a hodnoty v sizes.

2. Hustotně založený zápis (x) – používá se pro Retina displeje

srcset="standard.jpg 1x, retina.jpg 2x"

Prohlížeč si vybere obrázek podle hustoty pixelů displeje (1x = standardní displej, 2x = Retina displej).

Kombinace obou přístupů není možná v jednom srcset! Musíš se rozhodnout, zda použiješ šířkově nebo hustotně založený zápis.

Použití atributu sizes

Atribut sizes dává prohlížeči informaci o tom, jakou šířku bude mít obrázek v různých situacích:

<img src="medium.jpg"
     srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1920w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
     alt="Responzivní obrázek">

V tomto příkladu:

• Na mobilních zařízeních (do 600px) bude obrázek zabírat 100% šířky viewportu
• Na tabletech (do 1200px) bude zabírat 50% šířky viewportu
• Na větších displejích bude zabírat 33% šířky viewportu

Prohlížeč vybere nejvhodnější obrázek podle těchto informací a aktuální šířky zařízení.

Proč se v srcset používá w místo px?

 w umožňuje prohlížeči inteligentní výběr optimálního obrázku místo pevného nastavení velikostí.
 w zohledňuje hustotu pixelů (Retina vs. standardní displeje).
 w umožňuje flexibilní škálování obrázků pro různá zařízení.
 w umožňuje kombinaci se sizes, což dává prohlížeči jasný návod, jaké obrázky použít.

Bez w by prohlížeč nevěděl, jaké velikosti obrázků má k dispozici, což by mohlo vést k načítání neoptimálních souborů.

Shrnutí w vs. x

Použití elementu <picture>

Element <picture> poskytuje větší kontrolu nad výběrem obrázků a umožňuje:

• Změnu formátu obrázku podle podpory prohlížeče
• Změnu kompozice obrázku pro různá zařízení (art direction)
• Definování více zdrojů s různými podmínkami

Příklad použití <picture> pro různé formáty:

<picture>
  <source srcset="obrazek.avif" type="image/avif">
  <source srcset="obrazek.webp" type="image/webp">
  <img src="obrazek.jpg" alt="Responzivní obrázek">
</picture>

V tomto příkladu:

• Prohlížeč nejprve zkusí načíst AVIF formát (nejlepší komprese)
• Pokud AVIF není podporován, zkusí WebP
• Jako fallback použije standardní JPEG

Art direction - změna kompozice obrázku

Art direction umožňuje nejen změnit rozlišení, ale i výřez nebo poměr stran obrázku pro různá zařízení:

<picture>
  <source media="(max-width: 600px)" srcset="mobilni-verze.jpg">
  <source media="(max-width: 1200px)" srcset="tabletova-verze.jpg">
  <img src="desktopova-verze.jpg" alt="Responzivní obrázek">
</picture>

Tento přístup je vhodný, když potřebujete:

• Upravit výřez obrázku pro menší displeje
• Změnit poměr stran pro různá zařízení
• Nabídnout zcela jiný obrázek pro mobilní zařízení

Moderní formáty obrázků

Pro další optimalizaci je vhodné použít moderní formáty obrázků:

• WebP - podporovaný většinou moderních prohlížečů, úspora 25-35% oproti JPEG
• AVIF - nejnovější formát s nejlepší kompresí, úspora až 50% oproti JPEG
• JPEG 2000 - dobrá volba pro Safari

Příklad komplexního řešení:

<picture>
  <!-- AVIF formát s různými rozlišeními -->
  <source type="image/avif"
          srcset="obrazek-small.avif 480w, obrazek-medium.avif 1024w, obrazek-large.avif 1920w"
          sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw">
  
  <!-- WebP formát jako fallback -->
  <source type="image/webp"
          srcset="obrazek-small.webp 480w, obrazek-medium.webp 1024w, obrazek-large.webp 1920w"
          sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw">
  
  <!-- JPEG jako poslední možnost -->
  <img src="obrazek-medium.jpg"
       srcset="obrazek-small.jpg 480w, obrazek-medium.jpg 1024w, obrazek-large.jpg 1920w"
       sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
       alt="Responzivní obrázek">
</picture>

Lazy loading

HTML5 nyní podporuje nativní lazy loading, který zajistí, že obrázky mimo viditelnou oblast se nebudou načítat, dokud uživatel nezačne scrollovat směrem k nim:

<img src="obrazek.jpg" loading="lazy" alt="Lazy loaded obrázek">

Tato technika výrazně zrychluje načítání stránky a šetří datový přenos.

Komplexní příklad implementace

Zde je komplexní příklad, který kombinuje všechny zmíněné techniky:

<picture>
  <!-- Art direction pro mobilní zařízení -->
  <source media="(max-width: 600px)"
          srcset="mobilni-avif.avif" type="image/avif">
  <source media="(max-width: 600px)"
          srcset="mobilni-webp.webp" type="image/webp">
  <source media="(max-width: 600px)"
          srcset="mobilni-jpg.jpg" type="image/jpeg">
          
  <!-- Standardní verze s různými formáty a rozlišeními -->
  <source type="image/avif"
          srcset="obrazek-small.avif 480w, obrazek-medium.avif 1024w, obrazek-large.avif 1920w"
          sizes="(max-width: 1200px) 50vw, 33vw">
  <source type="image/webp"
          srcset="obrazek-small.webp 480w, obrazek-medium.webp 1024w, obrazek-large.webp 1920w"
          sizes="(max-width: 1200px) 50vw, 33vw">
          
  <!-- Fallback na JPEG -->
  <img src="obrazek-medium.jpg"
       srcset="obrazek-small.jpg 480w, obrazek-medium.jpg 1024w, obrazek-large.jpg 1920w"
       sizes="(max-width: 1200px) 50vw, 33vw"
       loading="lazy"
       alt="Responzivní obrázek">
</picture>

Díky těmto technikám můžete mít web rychlejší, efektivnější a lépe optimalizovaný pro různá zařízení!