Panoramica sulle immagini repsonsive, questa volta completa, fatta al CSS-day 2016 a Faenza. Con pezzo rap alla fine.
Immagini responsive
View Slide
Modo
• Best New Web Technology• Best Collaborative Project
RWD
• CSS Media queries• Griglie fluide• Immagini flessibiliRWD
Ada are all’ambiente
• Densità di pixel
• Densità di pixel• Molteplici layout
• Densità di pixel• Molteplici layout• Stesso rapporto, diversa risoluzione
• Densità di pixel• Molteplici layout• Stesso rapporto, diversa risoluzione.• Art direction (crop)
• Densità di pixel• Molteplici layout• Stesso rapporto, diversa risoluzione.• Art direction (crop)• Formati esotici
APNGWEBP
• Densità di pixel• Molteplici layout• Stesso rapporto, diversa risoluzione.• Art direction (crop)• Formati esotici• Preload
Style faster thanyour CSS
63%h p://h parchive.org/interesting.php#bytesperpage
Più veloce ~20%
Can I kick it?
SVG
Slow and low
Clown Car
Estelle Weyl
The Clown Car Technique<br/>image {display: none;}<br/>#small {display: block}<br/>@media screen and (min-width: 401px) and (max-width: 700px) {<br/>#medium {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 701px) and (max-width: 1000px) {<br/>#big {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 1001px) {<br/>#huge {display: block}<br/>#small {display: none;}<br/>}<br/>
<br/>image {display: none;}<br/>#small {display: block}<br/>@media screen and (min-width: 401px) and (max-width: 700px) {<br/>#medium {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 701px) and (max-width: 1000px) {<br/>#big {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 1001px) {<br/>#huge {display: block}<br/>#small {display: none;}<br/>}<br/>
Preload, motherf*#ker
Clown Car Technique<br/>svg {<br/>background-size: 100% 100%;<br/>background-repeat: no-repeat;<br/>}<br/>svg {<br/>background-image: url(images/small.png);<br/>}<br/>@media screen and (min-width: 768px) {<br/>svg {<br/>background-image: url(images/medium.png);<br/>}<br/>}<br/>
CSPContent Security Policy
type="image/svg+xml">
data="data:image/svg+xml,%3Csvg%20viewBox=0%200%203[…]"type="image/svg+xml">
It’s tricky
srcset
• Proporzioni uguali• Dimensioni diverse• Retinasrcset
src="narcos.jpg"srcset="narcos.jpg,[email protected] 2x"alt="Noyz Narcos"/>
Suggerimento
src="narcos.jpg"srcset="narcos-320.jpg 320w,narcos-640.jpg 640w,narcos-840.jpg 840w,narcos-1100.jpg 1100w"alt="Noyz Narcos"/>
Schermo più grande≠Immagine più grande
sizesDescrivono il comportamentodell’immagine del layout
src="narcos.jpg"srcset="narcos-320.jpg 320w,narcos-640.jpg 640w,narcos-840.jpg 840w,narcos-1100.jpg 1100w"sizes="(min-width: 900px) 32vw,(min-width: 600px) 50vw,100vw"alt="Noys Narcos"/>
Prima condizione valida
Coolio!
Contenuto - Presentazione
HTML - CSS
Preload
Compromesso
Art directed
SuggerimentoDire iva
srcset="d12-large.jpg">
Shopify
srcset=“https://cdn.shopify.com/[...]/muttonhead-feature@desktop-[...].png 1x,https://cdn.shopify.com/[...]/muttonhead-feature@desktop-2x-[...].png 2x"media="(min-width: 990px)">srcset="https://cdn.shopify.com/[...]/muttonhead-feature@tablet-[...].png 1x,https://cdn.shopify.com/[...]/muttonhead-feature@tablet-2x-[...].png 2x"media="(min-width: 750px)">srcset="https://cdn.shopify.com/[...]/muttonhead-feature@mobile-[...].png 1x,https://cdn.shopify.com/[...]/muttonhead-feature@mobile-2x-[...].png 2x"alt="Shopify online store" class="">
Bonus track
type
• WEBP• APNG• JPEG-2000• JPEG-XR
Sintesi
data="data:image/svg+xml,%3Csvg%20viewBox=0%200%203[…]"type="image/svg+xml">SVG
srcsetsrc="narcos.jpg"srcset="narcos-320.jpg 320w,narcos-640.jpg 640w,narcos-840.jpg 840w,narcos-1100.jpg 1100w"sizes="(min-width: 900px) 32vw,(min-width: 600px) 50vw,100vw"alt="Noys Narcos"/>
h p://dpi.lv
Come preparo le immagini?
Size ma ers
Rap
Lyri-css
Grazie• Tigre e Emmaboshi per il rap• Le immagini le ho prese malamente su Google, chiedo scusa se ho violato qualche copyright• Presto sarà tu o online, promesso