Maurício Samy Silva
Maujor®
http://kwz.me/AZ http://kwz.me/DC http://kwz.me/Dh maujor@maujor.com

O elemento
picture
para imagens
responsivas

Imagens na web
cumprem duas finalidades
decoração
informação
CSS
HTML

@media ( min-width: 800px ) {
div {
background: url( big_imagem.jpg );
}
}
CSSdecoração
diretiva CSS @media-query
img-css.html

<img src=“imagem.jpg” alt=“ ”>
img {
width: 100%;
}
informação HTML
width100.html

variável
autor
conhece?
navegador
conhece?
dimensões
viewport
tamanho imagem em
relação à viewport
DPR
(densidade da tela)
dimensões das
imagens disponíveis
não sim
sim não
não sim
sim não
sim
atributo sizes
X
sim
atributo srcset
X
Variáveis de renderização de uma imagem
dimensão
da imagem
sim
descriptor vw
X
sim
descriptor x
X

Atributos srcset e sizes para
elementos img e source
Elemento picture e seu
filhote source
Especificação HTML5

<picture>
<source attr=“valor” ...>
<source attr=“valor” ...>
...
<img src=“ ” alt=“ ”>
</picture>
Elemento picture

<source attr = “valor” ...>
media
srcset
sizes
type
 media queries
 URL descriptor
 dimensão
 MIME type

<picture>
<source media = "(min-width: 1024px)“
srcset = "1024.jpg">
<source media = "(min-width: 800px)“
srcset = "800.jpg">
<img src = "600.jpg" alt = " ">
</picture>
Art direction
exemplo: art.html

DRP Demo

<picture>
<source media = "(min-width: 500px)"
srcset = "500.jpg 1x, 1000.jpg 2x">
<img srcset = "320.jpg 1x, 640.jpg 2x"
alt = " ">
</picture>
DPR
exemplo: dpr.html

<picture>
<source srcset = "320.jpg 320w,
500.jpg 500w,
640.jpg 640w,
1000.jpg 1000w"
sizes = "( min-width: 800px ) 50vw, 100vw">
<img src = "600.jpg alt = " ">
</picture>
sizes
exemplo: sizes.html

<picture>
<source type=“image/svg”
srcset=“logo.svg">
<source type=“image/jpg”
srcset=“logo.jpg">
<img src=“logo.gif" alt=" ">
</picture>
MIME

Site do Maujor:
Web Design Responsivo
Elemento picture -
imagens responsivas
Leitura complementar
http://kwz.me/VC

Dúvidas?

Obrigado