Nesta palestra Maujor mostra alguns exemplos de sintaxe para inserção de imagens responsivas com uso do elemento PICTURE. A teoria é complementada com exemplos práticos.

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

3. O elemento
picture
para imagens
responsivas

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

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

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

7. 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

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

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

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

11. <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

12. DRP Demo

13. <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

14. <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

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

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

17. Dúvidas?

18. Obrigado