Palestra sobre imagens responsivas dadas no Encontro Locaweb 2015 pelo Sérgio Lopes

1. <picture> & srcset
TUDO QUE VOCÊ PRECISA SABER SOBRE

2. @sergio_caelum
sergiolopes.org

3. IMAGENS
NA WEB

4. 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);

5. TELAS ALTA
RESOLUÇÃO

6. 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

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

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

9. 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">

10. 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">

11. 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

12. 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

13. IMAGENS
RESPONSIVAS

15. 2560px
320px

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

17. 4272px 1.5MB
2560px 627KB
1440px 230KB
720px 69KB
320px 17KB
7 ipT
16 ipT
44 ipT
145 ipT
589 ipT

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

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

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

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

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

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

25. .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

26. tamanho viewport
densidade da tela
dimensões do arquivo
tamanho img na pg

27. tamanho viewport
tamanho img na pg
densidade da tela
dimensões do arquivo
BROWSER DEV
✓ ×
✓ ×
✓
✓
×
×

28. tamanho img na pg
dimensões do arquivo
×
✓
✓
×
×
img_360.jpg
img_720.jpg
img_1440.jpg
img_2560.jpg
360px
720px
1440px
2560px
100% 100vw

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

30. 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">

31. 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">

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

33. <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

34. <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)">

35. 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

36. 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

37. IMAGENS
DIFERENTES

41. <picture> !!!!

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

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

44. <picture>
<source media="(min-width: 1024px)"
srcset="completa.jpg">
<img src="recorte.jpg" alt="Meninos na jangada">
</picture>

45. <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>

46. MUITAS
IMAGENS

47. imagem full
recorte
2 colunas1 coluna
retina
responsivo

48. imagem full
recorte 2 colunas
1 coluna retina
foto.jpg
recorte.jpg
<picture>
<source>
100vw
50vw
<img sizes>
responsivo
foto_800.jpg
foto_1200.jpg
foto_1600.jpg
recorte_320.jpg
recorte_600.jpg
recorte_1100.jpg
srcset

49. foto.jpg
recorte.jpg
<picture>
<source>
100vw
50vw
<img sizes>
foto_800.jpg
foto_1200.jpg
foto_1600.jpg
recorte_320.jpg
recorte_600.jpg
recorte_1100.jpg
srcset

50. foto.jpg
recorte.jpg
<picture>
<source>
100vw
50vw
<img sizes>
foto_800.jpg
foto_1200.jpg
foto_1600.jpg
recorte_320.jpg
recorte_600.jpg
recorte_1100.jpg
srcset
<img src="recorte_600.jpg" alt="Meninos na jangada">

51. foto.jpg
recorte.jpg
<picture>
<source>
100vw
50vw
<img sizes>
foto_800.jpg
foto_1200.jpg
foto_1600.jpg
recorte_320.jpg
recorte_600.jpg
recorte_1100.jpg
srcset
<img src="recorte_600.jpg" alt="Meninos na jangada"
srcset="recorte_320.jpg 320w,
recorte_600.jpg 600w,
recorte_1100.jpg 1100w”>

52. foto.jpg
recorte.jpg
<picture>
<source>
100vw
50vw
<img sizes>
foto_800.jpg
foto_1200.jpg
foto_1600.jpg
recorte_320.jpg
recorte_600.jpg
recorte_1100.jpg
srcset
<img src="recorte_600.jpg" alt="Meninos na jangada"
srcset="recorte_320.jpg 320w,
recorte_600.jpg 600w,
recorte_1100.jpg 1100w"
sizes="100vw">

53. foto.jpg
recorte.jpg
<picture>
<source>
100vw
50vw
<img sizes>
foto_800.jpg
foto_1200.jpg
foto_1600.jpg
recorte_320.jpg
recorte_600.jpg
recorte_1100.jpg
srcset
<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>

54. foto.jpg
recorte.jpg
<picture>
<source>
100vw
50vw
<img sizes>
foto_800.jpg
foto_1200.jpg
foto_1600.jpg
recorte_320.jpg
recorte_600.jpg
recorte_1100.jpg
srcset
<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>

55. foto.jpg
recorte.jpg
<picture>
<source>
100vw
50vw
<img sizes>
foto_800.jpg
foto_1200.jpg
foto_1600.jpg
recorte_320.jpg
recorte_600.jpg
recorte_1100.jpg
srcset
<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>

56. foto.jpg
recorte.jpg
<picture>
<source>
100vw
50vw
<img sizes>
foto_800.jpg
foto_1200.jpg
foto_1600.jpg
recorte_320.jpg
recorte_600.jpg
recorte_1100.jpg
srcset
<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>

57. foto.jpg
recorte.jpg
<picture>
<source>
100vw
50vw
<img sizes>
foto_800.jpg
foto_1200.jpg
foto_1600.jpg
recorte_320.jpg
recorte_600.jpg
recorte_1100.jpg
srcset
<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>

58. <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>

59. SRCSET
mesma imagem
<PICTURE>
imagens diferentes

60. MAIS
<PICTURE>

61. 1980px
x
1320px
JPEG Q=70 384KB
WEBP Q=70 233KB
-40%

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

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

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

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

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

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

68. PRÁTICA

69. AUTOMATIZE
Geração das resoluções diferentes
Outros formatos (webp, jxr)
Cuspir código <picture> e srcset?

70. FALLBACK SEMPRE
<img src>

71. BROWSERS

74. BROWSERS
SRCSET: Chrome, Opera, Firefox,
Safari*, Edge*
PICTURE: Chrome, Opera, Firefox
Lembre do fallback
picturefill 2.0

76. NÃO PRECISA SEMPRE
imagem única às vezes é boa o suficiente

77. <picture> & srcset
TUDO QUE VOCÊ PRECISA SABER SOBRE

78. @sergio_caelum
sergiolopes.org
OBRIGADO

79. PARA SABER MAIS
https://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/

80. CRÉDITOS FOTOS
https://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