Download - O elemento PICTURE para imagens responsivas
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çãodiretiva CSS @media-query
img-css.html
<img src=“imagem.jpg” alt=“ ”>
img { width: 100%;}
informação HTML
width100.html
variável autorconhece?
navegadorconhece?
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
simatributo sizes
X
simatributo srcset
X
Variáveis de renderização de uma imagem
dimensão da imagem
simdescriptor vw
X
simdescriptor 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
<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