o elemento picture para imagens responsivas
TRANSCRIPT
![Page 1: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/1.jpg)
![Page 3: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/3.jpg)
O elemento picture
para imagens responsivas
![Page 4: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/4.jpg)
Imagens na web cumprem duas finalidades
decoração
informação
CSS
HTML
![Page 5: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/5.jpg)
@media ( min-width: 800px ) {
div { background: url( big_imagem.jpg ); }}
CSSdecoraçãodiretiva CSS @media-query
img-css.html
![Page 6: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/6.jpg)
<img src=“imagem.jpg” alt=“ ”>
img { width: 100%;}
informação HTML
width100.html
![Page 7: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/7.jpg)
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
![Page 8: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/8.jpg)
Atributos srcset e sizes para elementos img e source
Elemento picture e seu filhote source
Especificação HTML5
![Page 9: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/9.jpg)
<picture> <source attr=“valor” ...> <source attr=“valor” ...> ... <img src=“ ” alt=“ ”></picture>
Elemento picture
![Page 10: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/10.jpg)
<source attr = “valor” ...>
media
srcset
sizes
type
media queries URL descriptor dimensão MIME type
![Page 11: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/11.jpg)
<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
![Page 13: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/13.jpg)
<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
![Page 14: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/14.jpg)
<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
![Page 15: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/15.jpg)
<picture> <source type=“image/svg” srcset=“logo.svg">
<source type=“image/jpg” srcset=“logo.jpg">
<img src=“logo.gif" alt=" "></picture>
MIME
![Page 16: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/16.jpg)
Site do Maujor: Web Design Responsivo Elemento picture - imagens responsivas
Leitura complementar
http://kwz.me/VC
![Page 17: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/17.jpg)
Dúvidas?
![Page 18: O elemento PICTURE para imagens responsivas](https://reader036.vdocuments.com.br/reader036/viewer/2022081517/58f31a3f1a28abe12e8b4569/html5/thumbnails/18.jpg)
Obrigado