Motivace, definice, zadání a řešení úlohy responzivních obrázků pomocí <picture> elementu (především) c Google Chrome. Přednáška na pražském DevFest 2014 (http://devfest.cz/).
Redesign blogu (www.vzhurudolu.cz) byla příležitost zkusit s pomocí aktuálních front-end technologií udělat web jinak. Přiblížit se alespoň trochu odvěkému snu všech webařů – vektorovému webu.
Webu s flexibilním layoutem, s elastickými elementy, které se nezhroutí po každém zásahu uživatele nebo ve chvíli kdy na web dorazí se zařízením pro které není web testovaný.
A taky webu, který sice využívá to dobré z responsive webdesignu a myšlenky mobile first a progressive enhancement, ale bez nutnosti produkovat a udržovat stovky řádků kódu pro každé zařízení zvlášť
Motivace, definice, zadání a řešení úlohy responzivních obrázků pomocí <picture> elementu (především) c Google Chrome. Přednáška na pražském DevFest 2014 (http://devfest.cz/).
Redesign blogu (www.vzhurudolu.cz) byla příležitost zkusit s pomocí aktuálních front-end technologií udělat web jinak. Přiblížit se alespoň trochu odvěkému snu všech webařů – vektorovému webu.
Webu s flexibilním layoutem, s elastickými elementy, které se nezhroutí po každém zásahu uživatele nebo ve chvíli kdy na web dorazí se zařízením pro které není web testovaný.
A taky webu, který sice využívá to dobré z responsive webdesignu a myšlenky mobile first a progressive enhancement, ale bez nutnosti produkovat a udržovat stovky řádků kódu pro každé zařízení zvlášť
Jak na více Docker kompozic na lokále | Jan Drábek | 15. 2. 2023 – Kiwi.comWebScience1
Honza Drábek aka. repli2dev nám ukázal, jak se vypořádat s více souběžnými Docker kompozicemi na localhostu. Za pomocí vlastní open-source knihovny Loopbind.
Jak na více Docker kompozic na lokále | Jan Drábek | 15. 2. 2023 – Kiwi.comWebScience1
Honza Drábek aka. repli2dev nám ukázal, jak se vypořádat s více souběžnými Docker kompozicemi na localhostu. Za pomocí vlastní open-source knihovny Loopbind.
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
11.
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
13.
14.
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ů
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