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....
<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)...
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.jp...
DRP Demo
<picture>
<source media = "(min-width: 500px)"
srcset = "500.jpg 1x, 1000.jpg 2x">
<img srcset = "320.jpg 1x, 640.jpg 2x"
...
<picture>
<source srcset = "320.jpg 320w,
500.jpg 500w,
640.jpg 640w,
1000.jpg 1000w"
sizes = "( min-width: 800px ) 50vw, ...
<picture>
<source type=“image/svg”
srcset=“logo.svg">
<source type=“image/jpg”
srcset=“logo.jpg">
<img src=“logo.gif" alt=...
Site do Maujor:
Web Design Responsivo
Elemento picture -
imagens responsivas
Leitura complementar
http://kwz.me/VC
Dúvidas?
Obrigado
O elemento PICTURE para imagens responsivas
Próximos SlideShares
Carregando em…5
×

O elemento PICTURE para imagens responsivas

763 visualizações

Publicada em

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.

Publicada em: Internet
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
763
No SlideShare
0
A partir de incorporações
0
Número de incorporações
41
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

O elemento PICTURE para imagens responsivas

  1. 1. Maurício Samy Silva Maujor® http://kwz.me/AZ http://kwz.me/DC http://kwz.me/Dh maujor@maujor.com
  2. 2. O elemento picture para imagens responsivas
  3. 3. Imagens na web cumprem duas finalidades decoração informação CSS HTML
  4. 4. @media ( min-width: 800px ) { div { background: url( big_imagem.jpg ); } } CSSdecoração diretiva CSS @media-query img-css.html
  5. 5. <img src=“imagem.jpg” alt=“ ”> img { width: 100%; } informação HTML width100.html
  6. 6. 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
  7. 7. Atributos srcset e sizes para elementos img e source Elemento picture e seu filhote source Especificação HTML5
  8. 8. <picture> <source attr=“valor” ...> <source attr=“valor” ...> ... <img src=“ ” alt=“ ”> </picture> Elemento picture
  9. 9. <source attr = “valor” ...> media srcset sizes type  media queries  URL descriptor  dimensão  MIME type
  10. 10. <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
  11. 11. DRP Demo
  12. 12. <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
  13. 13. <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
  14. 14. <picture> <source type=“image/svg” srcset=“logo.svg"> <source type=“image/jpg” srcset=“logo.jpg"> <img src=“logo.gif" alt=" "> </picture> MIME
  15. 15. Site do Maujor: Web Design Responsivo Elemento picture - imagens responsivas Leitura complementar http://kwz.me/VC
  16. 16. Dúvidas?
  17. 17. Obrigado

×