Praktické ukázky responzivních obrázků, na co si dát pozor a jak je správně resizovat a linkovat z hlediska rychlosti.

1. TOMÁŠ KREJČÍ
19. 4. 2023 - PÉHÁPKAŘI
KOMPLETNÍ
PRŮVODCE OBRÁZKY
NEJEN PRO PÉHÁPKAŘE

2. OSNOVA
1. Formáty
2. Linkování
a. img
b. srcset + sizes
c. picture
3. Client hints

3. FORMÁTY

4. ŽILI BYLI

5. 2010
Animace • Alfa průhlednost • Snížení datového objemu o 25 – 34%
Od 2020: plná podpora prohlížečů

6. 2018
Lepší komprese než WebP cca 30 % • Nejostřejší vykreslení
Nepodporuje progresivní vykreslení • Dlouho se generuje
říjen 2022 – březen 2023: implementace Safari

7. JE ČAS NA
AVIF?!
HTTP Header (Accept) • Image CDN • <picture>

8. LINKOVÁNÍ

9. SRC
<img src="image.avif" width="400" height="400" alt="">
❌ Nevyhovující pro responzivní obrázky
❌ Nevyhovující pro displeje s vyšší denzitou pixelů

10. SRCSET s W deskriptorem
<img srcset="
image_sm.avif 400w,
image_md.avif 800w"
width="400" height="400" alt="">
URL OBRÁZKU
ŠÍŘKA ZDROJOVÉHO
OBRÁZKU

12. SRCSET se SIZES
<img srcset="
image_sm.avif 400w,
image_md.avif 800w"
sizes="
(min-width: 1000px) 200px,
(min-width: 750px) 400px,
calc(100vw - 40px)"
width="400" height="400" alt="">
ŠÍŘKA OBRÁZKU
V PROHLÍŽEČI
MEDIA QUERIES

15. SRCSET s X deskriptorem
<img srcset="
image.avif,
image@2x.avif 2x,
image-3.avif 3x"
width="400" height="400" …>
❗ Bez sizes atributu
🗣 Použití
URL OBRÁZKU
DENZITA OBRÁZKU
NEZÁLEŽÍ NA
NÁZVU

16. SRCSET – PROBLÉMY
❗ Nelze kombinovat deskriptory
❗ Výběr obrázku je na prohlížeči – Vždy vybere ten, který přesně vyhovuje nebo první vyšší
💡 Při testování pozor na šoupání oknem směrem dolů

17. PICTURE – BASIC
<picture>
<source srcset="image_lg.avif" media="(min-width: 1000px)">
<source srcset="image_md.avif" media="(min-width: 768px)">
<img src="image_sm.avif" width="400" height="400" alt="">
</picture>
<img srcset="image_sm.avif 400w, image_md.avif 800w"
sizes="(min-width: 1000px) 200px, (min-width: 750px) 400px, calc(100vw - 40px)"
width="400" height="400" alt="">
URL OBRÁZKU
MEDIA QUERIES
FALLBACK

20. PICTURE – X descriptor
<picture>
<source srcset="
image_lg.avif,
image_lg@2x.avif 2x,
image_lg-3.avif 3x" media="(min-width: 1000px)">
<img srcset="
image_sm.avif,
image_sm@2x.avif 2x,
image_sm-3.avif 3x" width="400" height="400" alt="">
</picture>
NEZÁLEŽÍ NA
POJMENOVÁNÍ
NEZÁLEŽÍ NA
POJMENOVÁNÍ

22. PICTURE – W descriptor
<picture>
<source srcset="
image_md.avif 400w,
image_lg.avif 800w,
image_xl.avif 1200w,
image_xxl.avif 1600w"
sizes="420px"
media="(min-width: 760px)">
<img src="image_sm.avif" width="400" height="400" alt="">
</picture>
❌ Problém při displejích s vyšší
denzitou pixelů
(např. může se stahovat obrázek 1600w)

23. PICTURE - RŮZNÉ POMĚRY STRAN
<picture>
<source srcset="image_lg.jpg" media="(min-width: 1000px)" width="800" height="200">
<source srcset="image_md.jpg" media="(min-width: 768px)" width="400" height="200">
<img src="image_sm.jpg" width="400" height="400" …>
</picture>
URL OBRÁZKU
MEDIA QUERIES
FALLBACK

27. PICTURE - FORMÁT OBRÁZKU
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image_light.jpg" alt="">
</picture>
HTTP Headers (Accept) • Image CDN (Cloudinary)

28. PICTURE - DALŠÍ MEDIA QUERIES
<picture>
<source srcset="image_dark.avif" media="(prefers-color-scheme: dark)">
<img src="image_light.avif" …>
</picture>
<picture>
<source srcset="no-motion.avif" media="(prefers-reduced-motion: reduce)">
<img srcset="animated.avif" …>
</picture>

29. PICTURE - BEST PRACTICE
<picture>
<source srcset="
image_lg.avif,
image_lg@2x.avif 2x" media="(min-width: 1000px)">
<source srcset="
image_md.avif,
image_md@2x.avif 2x" media="(min-width: 768px)">
<img srcset="
image_sm.avif,
image_sm@2x.avif 2x" width="400" height="400" alt="">
</picture>
✅ EXPLICITNĚ POD KONTROLOU

30. CLIENT HINTS

31. CLIENT HINTS
✅ Denzita pixelů
✅ Šířku zařízení
✅ Vykreslenou šířku obrázku
✅ Rychlost stahování
✅ Detekce zařízení
HTTP Headers
Accept-CH: DPR, Width, Viewport-Width
Meta tag
<meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width">

32. DENZITA PIXELŮ
RYCHLOST
STAHOVÁNÍ
DETEKCE ZAŘÍZENÍ
ŠÍŘKA ZAŘÍZENÍ
DETEKCE FORMÁTU
OBRÁZKU
ŠÍŘKA OBRÁZKU

33. CLIENT HINTS
<img src="flower.jpg" width="200">

34. CLIENT HINTS
<img src="flower.jpg" sizes="200px">
<img src="flower.jpg" sizes="25vw">
❗ Pozor na rychlost generování obrázků

35. CLIENT HINTS

36. DOPORUČENÍ

37. TOMÁŠ KREJČÍ
19. 4. 2023 - PÉHÁPKAŘI
DÍKY ZA POZORNOST

38. SVG

39. SVG - VEKTORY

40. <SVG> VS. <IMG>

41. <SVG>
● Potřebuji s vrstvami dál pracovat
○ animovat
○ přebarvovat
● Chci je mít co nejrychleji vykreslené

42. <IMG>
● Typicky loga ve výpisu partnerů
● Složité infografiky, se kterými dál nepracuji

43. VŽDY OPTIMALIZUJTE
● SVGOMG
● GZIP
● Vyčištění “balastu” – Webinář SVG optimalizace od VzhůruDolů

44. RYCHLOSTNÍ TIPY

45. LAZY LOADING
❌ MYSLETE NA RYCHLOST
❌ PARADOX POMALÉHO PŘIPOJENÍ
❌ NEPOUŽÍVAT NA LCP ELEMENTY

46. FETCH PRIORITY
❌ MYSLETE NA RYCHLOST
❌ PARADOX POMALÉHO PŘIPOJENÍ