Tudo que você precisa saber sobre picture e srcset

<picture> & srcsetTUDO QUE VOCÊ PRECISA SABER SOBRE

@sergio_caelum sergiolopes.org

IMAGENS NA WEB

http://upload.wikimedia.org/wikipedia/commons/d/d2/IPhone_4S_No_shadow.png http://upload.wikimedia.org/wikipedia/

commons/d/d2/IPhone_4S_No_shadow.png

<img src="frutas.jpg" alt="Banca de Frutas">

background-image: url(frutas.jpg);

TELAS ALTA RESOLUÇÃO



320px 640px

1x 2x



1x 2x



.foto { background-image: url('balao_320px.jpg');width: 320px;

}

@media (resolution: 2dppx) {.foto {

background-image: url('balao_640px.jpg');}

}



1x

balao_320px.jpg

2x

balao_640px.jpg

SRCSET para densidades diferentes

<img src="baloes.jpg" alt="Balões turcos" srcset="balao_320px.jpg 1x, balao_640px.jpg 2x">

Lista imagens & densidades de tela

Imagem de fallback no src

IMAGENS RESPONSIVAS

IMAGENS

2560px

320px

ORIGINAL 4272px 6.4MB Q=80 4272px 1.5MB Q=60 4272px 960KB

4272px 1.5MB 2560px 627KB 1440px 230KB 720px 69KB 320px 17KB

7 ipT 16 ipT 44 ipT 145 ipT 589 ipT

.foto { background-image: url('img_360px.jpg'); }





@media (min-width: 361px) {

.foto { background-image: url('img_720px.jpg'); }}




.foto { background-image: url('img_2560px.jpg'); } }


@media (min-width: 361px), (min-resolution: 2dppx) {


@media (min-width: 721px), (min-resolution: 2dppx) and (min-width: 361px) {


@media (min-width: 1441px), (min-resolution: 2dppx) and (min-width: 721px) {





@media (min-width: 721px), (min-resolution: 2dppx) and (min-width: 361px), (min-resolution: 3dppx) {


@media (min-width: 1441px), (min-resolution: 2dppx) and (min-width: 721px), (min-resolution: 3dppx) and (min-width: 481px) {


@media (min-width: 1600px) {.foto { width: 33%; }

}

.foto { width: 100%;} @media (min-width: 1024px) {.foto { width: 50%; }

}




@media (min-width: 721px) and (max-width: 1023px), (min-width: 1441px) and (max-width: 1599px), (min-width: 2160px), (min-resolution: 2dppx) and (min-width: 361px) {


@media (min-resolution: 2dppx) and (min-width: 721px) and (max-width: 1023px), (min-resolution: 2dppx) and (min-width: 1441px) and (max-width: 1599px), (min-resolution: 2dppx) and (min-width: 2160px) {





@media (min-width: 721px) and (max-width: 1023px), (min-width: 1441px) and (max-width: 1599px), (min-width: 2160px), (min-resolution: 2dppx) and (min-width: 361px) {


@media (min-resolution: 2dppx) and (min-width: 721px) and (max-width: 1023px), (min-resolution: 2dppx) and (min-width: 1441px) and (max-width: 1599px), (min-resolution: 2dppx) and (min-width: 2160px) {


MEDIA QUERIES

SÃO COMPLICADAS

tamanho viewport

densidade da teladimensões do arquivo

tamanho img na pg

tamanho viewport

tamanho img na pg

densidade da tela

dimensões do arquivo

BROWSER DEV

✓ × ✓ ×

✓

✓

× ×

tamanho img na pg

densidade da tela

dimensões do arquivo

BROWSER DEV✓ × ✓

✓

×

×

img_360.jpg img_720.jpg img_1440.jpgimg_2560.jpg

360px720px1440px2560px

100% 100vw

img_360.jpg img_720.jpg img_1440.jpgimg_2560.jpg

36072014402560

100vw

<img srcset="img_360.jpg 360w, img_720.jpg 720w, img_1440.jpg 1440w, img_2560.jpg 2560w" sizes="100vw">

✓ ×

tamanho aproximado na pg

lista imagens e tamanho dos arquivos


Celular img_360.jpg

Celular Retina img_720.jpg

iPad Retina img_2560.jpg

Notebook comum img_1440.jpg

MacBook Retina img_2560.jpg


@media (min-width: 1600px) {.foto { width: 33%; }

}

.foto { width: 100%;} @media (min-width: 1024px) {.foto { width: 50%; }

}

<img srcset="img_360.jpg 360w, img_720.jpg 720w, img_1440.jpg 1440w, img_2560.jpg 2560w"

sizes="(min-width: 1600px) 33vw, (min-width: 1024px) 50vw, 100vw">

lista breakpoints com tamanho da img na pg

SRCSET

Escolha imagem pra fallback no src

Só use para mesma imagem, tamanhos diferentes

Se usar w, use o sizes

É UMA DICA PARA O BROWSER

SRCSET

Blink

Firefox

<img srcset="img1.jpg 360w, img2.jpg 720w, img3.jpg 1440w">

img1.jpg

361px

img2.jpg

721px

img3.jpg

img1.jpg

510px

img2.jpg

1019px

img3.jpg

IMAGENS DIFERENTES

<picture> !!!!


srcset="intermediaria.jpg"><source media="(min-width: 1600px)"

srcset="completa.jpg"><img src="recorte.jpg" alt="Meninos na jangada">

</picture>

MUITAS IMAGENS

imagem full

recorte

2 colunas1 coluna

retina

responsivo

imagem fullrecorte 2 colunas

1 coluna retina

foto.jpgrecorte.jpg

<picture> <source>

100vw50vw

<img sizes>

responsivo

foto_800.jpg foto_1200.jpg foto_1600.jpg

recorte_320.jpg recorte_600.jpg recorte_1100.jpg

srcset

foto.jpgrecorte.jpg<picture> <source>

100vw50vw

<img sizes>

foto_800.jpg foto_1200.jpg foto_1600.jpgrecorte_320.jpg recorte_600.jpg recorte_1100.jpgsrcset


100vw50vw

<img sizes>


<img src="recorte_600.jpg" alt="Meninos na jangada">


100vw50vw

<img sizes>


<img src="recorte_600.jpg" alt="Meninos na jangada" srcset="recorte_320.jpg 320w, recorte_600.jpg 600w, recorte_1100.jpg 1100w”>


100vw50vw

<img sizes>


<img src="recorte_600.jpg" alt="Meninos na jangada" srcset="recorte_320.jpg 320w, recorte_600.jpg 600w, recorte_1100.jpg 1100w" sizes="100vw">


100vw50vw

<img sizes>


<picture>


</picture>


100vw50vw

<img sizes>


<picture><source

srcset="foto_800.jpg 800w, foto_1200.jpg 1200w, foto_1600.jpg 1600w”>


</picture>


100vw50vw

<img sizes>



srcset="foto_800.jpg 800w, foto_1200.jpg 1200w, foto_1600.jpg 1600w”>


</picture>


100vw50vw

<img sizes>



srcset="foto_800.jpg 800w, foto_1200.jpg 1200w, foto_1600.jpg 1600w"sizes="100vw">


</picture>


100vw50vw

<img sizes>



srcset="foto_800.jpg 800w, foto_1200.jpg 1200w, foto_1600.jpg 1600w"sizes="(min-width: 1400px) 50vw, 100vw">


</picture>


srcset="foto_800.jpg 800w, foto_1200.jpg 1200w, foto_1600.jpg 1600w"sizes="(min-width: 1400px) 50vw, 100vw">


</picture>

SRCSET mesma imagem

<PICTURE> imagens diferentes

MAIS <PICTURE>

1980px x

1320px

JPEG Q=70 384KB WEBP Q=70 233KB -40%

https://itaccessibility.illinois.edu/sites/itaccessibility.illinois.edu/files/chartcolor.jpg

COLADensidade de tela (retina) <img srcset> com 1x/2x

Tamanhos & densidades diferentes <img srcset sizes> com w

Direção de arte <picture> + <source media="(min-width)">

Media queries (print, monochrome, color…) <picture> + <source media="print">

Formatos (mime type) <picture> + <source type="image/webp">

Tamanhos e densidade diferentes, com direção de arte, formatos diferentes e imagens pra impressão <picture> + srcset + sizes + <source media> + <source type> !!

PRÁTICA

AUTOMATIZEGeração das resoluções diferentes

Outros formatos (webp, jxr)

Cuspir código <picture> e srcset?

FALLBACK SEMPRE<img src>

BROWSERS

BROWSERSSRCSET: Chrome, Opera, Firefox,

Safari*, Edge*

PICTURE: Chrome, Opera, Firefox

Lembre do fallback

picturefill 2.0

NÃO PRECISA SEMPREimagem única às vezes é boa o suficiente

<picture> & srcsetTUDO QUE VOCÊ PRECISA SABER SOBRE

@sergio_caelum sergiolopes.org

OBRIGADO

PARA SABER MAIShttps://dev.opera.com/articles/native-responsive-images/ https://dev.opera.com/articles/responsive-images/ http://usecases.responsiveimages.org/ https://html.spec.whatwg.org/multipage/embedded-content.html http://alistapart.com/article/responsive-images-in-practice http://ericportis.com/posts/2014/srcset-sizes/ https://github.com/smaxtastic/grunt-responsive-images-extender https://github.com/andismith/grunt-responsive-images/

CRÉDITOS FOTOShttps://www.flickr.com/photos/freedomiiphotography/6203111667 https://www.flickr.com/photos/marfis75/16239031632 https://www.flickr.com/photos/tanelteemusk/6399051863 https://www.flickr.com/photos/noemigalera/4730832990 https://www.flickr.com/photos/heydrienne/22080973 https://www.flickr.com/photos/rvc/8286874239 https://www.flickr.com/photos/janssem/7549086426 https://www.flickr.com/photos/ben124/6735320631 https://www.flickr.com/photos/kosalabandara/14844923823 https://www.flickr.com/photos/benurs/4446310239

Tudo que você precisa saber sobre picture e srcset

Technology

Transcript of Tudo que você precisa saber sobre picture e srcset