o elemento picture para imagens responsivas

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çã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

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