Tudo que você precisa saber sobre picture e srcset

Post on 03-Aug-2015

808 views 0 download

Preview:

Click to see full reader
Report this document
SHARE

Transcript of 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

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

320px 640px

1x 2x

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

1x 2x

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

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

}

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

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

}

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="balao_320px.jpg" alt="Balões turcos">

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="baloes.jpg" alt="Balões turcos" srcset="balao_320px.jpg 1x, balao_640px.jpg 2x">

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

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'); }

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

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

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

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

@media (min-width: 361px) {

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

@media (min-width: 721px) {

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

@media (min-width: 1441px) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

}

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

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

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

@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) {

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

@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) {

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

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

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

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

@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) {

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

@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) {

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

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

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

Celular img_360.jpg

Celular Retina img_720.jpg

iPad Retina img_2560.jpg

Notebook comum img_1440.jpg

MacBook Retina img_2560.jpg

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

@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

<img src="fallback.jpg" alt="Foto da ponte"

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

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

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

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

<picture>

<img src="recorte.jpg" alt="Meninos na jangada"></picture>

<picture><source media="(min-width: 1024px)"

srcset="completa.jpg">

<img src="recorte.jpg" alt="Meninos na jangada"></picture>

<picture><source media="(min-width: 1024px)"

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

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

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

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

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

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

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

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

<picture>

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

</picture>

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

<picture><source

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

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

</picture>

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

<picture><source media="(min-width: 800px)"

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

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

</picture>

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

<picture><source media="(min-width: 800px)"

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

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

</picture>

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

<picture><source media="(min-width: 800px)"

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

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

</picture>

<picture><source media="(min-width: 800px)"

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

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

</picture>

SRCSET mesma imagem

<PICTURE> imagens diferentes

MAIS <PICTURE>

1980px x

1320px

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

<picture><source srcset="foto.webp" type="image/webp"><img src="foto.jpg" alt="Cidade">

</picture>

<picture><source srcset="foto.webp" type="image/webp"><source srcset="foto.jxr" type="image/jxr"><img src="foto.jpg" alt="Cidade">

</picture>

<picture><source srcset="logo.svg" type="image/svg+xml"><img src="logo.png" alt="Caelum">

</picture>

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

<picture><source srcset="grafico_PB.png" media="(monochrome)"><img src="grafico.png" alt="Egg x Cheese">

</picture>

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

Top related

O que você precisa saber sobre proteção auditiva
 Documents
O que você precisa saber sobre a Dengue
 Health & Medicine
O PROFESSOR DA ESCOLA BÍBLICA DOMINICAL PRECISA SABER !!!
 Documents
Tudo que você precisa saber sobre Bahia!
 Travel
O professor (EBD) precisa saber!
 Spiritual
Git - O Mínimo Que Você Precisa Saber
 Documents
TUDO QUE VOCÊ PRECISA SABER - Sebrae
 Documents
Tudo o que você precisa saber sobre infográficos
 Education
Redução: você precisa saber
 Documents
Tudo que você precisa saber sobre a dengue
 Health & Medicine
O que todo cidadão precisa saber sobre habitação
 Documents
Mídias Sociais - o que você precisa saber
 Business
SUICÍDIO TUDO O QUE VOCÊ PRECISA SABER
 Documents
10 Coisas Que Você Precisa Saber Sobre Dislipidemia
 Documents
PAC: O que o clínico precisa saber?
 Documents
O que toda mulher precisa saber
 Lifestyle
Tudo o que você precisa saber sobre Malta
 Documents
Mediunidade Tudo Que Voce Precisa Saber
 Documents
Tudo Que Você Precisa Saber Sobre Carboidratos
 Documents
Inbound Marketing - Tudo que você precisa saber
 Marketing

Copyright © 2022 FDOCUMENTOS