Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tudo que você precisa saber sobre picture e srcset

3,310 views

Published on

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

Published in: Technology

Tudo que você precisa saber sobre picture e srcset

  1. 1. <picture> & srcset TUDO QUE VOCÊ PRECISA SABER SOBRE
  2. 2. @sergio_caelum sergiolopes.org
  3. 3. IMAGENS NA WEB
  4. 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. 5. TELAS ALTA RESOLUÇÃO
  6. 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. 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. 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. 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. 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. 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. 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. 13. IMAGENS RESPONSIVAS
  14. 14. 2560px 320px
  15. 15. ORIGINAL 4272px 6.4MB Q=80 4272px 1.5MB Q=60 4272px 960KB
  16. 16. 4272px 1.5MB 2560px 627KB 1440px 230KB 720px 69KB 320px 17KB 7 ipT 16 ipT 44 ipT 145 ipT 589 ipT
  17. 17. .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'); }
  18. 18. .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'); } }
  19. 19. .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'); } }
  20. 20. .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'); } }
  21. 21. @media (min-width: 1600px) { .foto { width: 33%; } } .foto { width: 100%;} @media (min-width: 1024px) { .foto { width: 50%; } }
  22. 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) 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'); } }
  23. 23. .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
  24. 24. tamanho viewport densidade da tela dimensões do arquivo tamanho img na pg
  25. 25. tamanho viewport tamanho img na pg densidade da tela dimensões do arquivo BROWSER DEV ✓ × ✓ × ✓ ✓ × ×
  26. 26. 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
  27. 27. 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">
  28. 28. 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">
  29. 29. 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">
  30. 30. @media (min-width: 1600px) { .foto { width: 33%; } } .foto { width: 100%;} @media (min-width: 1024px) { .foto { width: 50%; } }
  31. 31. <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
  32. 32. <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)">
  33. 33. 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
  34. 34. 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
  35. 35. IMAGENS DIFERENTES
  36. 36. <picture> !!!!
  37. 37. <img src="recorte.jpg" alt="Meninos na jangada">
  38. 38. <picture> <img src="recorte.jpg" alt="Meninos na jangada"> </picture>
  39. 39. <picture> <source media="(min-width: 1024px)" srcset="completa.jpg"> <img src="recorte.jpg" alt="Meninos na jangada"> </picture>
  40. 40. <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>
  41. 41. MUITAS IMAGENS
  42. 42. imagem full recorte 2 colunas1 coluna retina responsivo
  43. 43. 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
  44. 44. 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
  45. 45. 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">
  46. 46. 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”>
  47. 47. 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">
  48. 48. 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>
  49. 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 <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>
  50. 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 <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>
  51. 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 <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>
  52. 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 <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>
  53. 53. <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>
  54. 54. SRCSET mesma imagem <PICTURE> imagens diferentes
  55. 55. MAIS <PICTURE>
  56. 56. 1980px x 1320px JPEG Q=70 384KB WEBP Q=70 233KB -40%
  57. 57. <picture> <source srcset="foto.webp" type="image/webp"> <img src="foto.jpg" alt="Cidade"> </picture>
  58. 58. <picture> <source srcset="foto.webp" type="image/webp"> <source srcset="foto.jxr" type="image/jxr"> <img src="foto.jpg" alt="Cidade"> </picture>
  59. 59. <picture> <source srcset="logo.svg" type="image/svg+xml"> <img src="logo.png" alt="Caelum"> </picture>
  60. 60. https://itaccessibility.illinois.edu/sites/itaccessibility.illinois.edu/files/ chartcolor.jpg
  61. 61. <picture> <source srcset="grafico_PB.png" media="(monochrome)"> <img src="grafico.png" alt="Egg x Cheese"> </picture>
  62. 62. 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> !!
  63. 63. PRÁTICA
  64. 64. AUTOMATIZE Geração das resoluções diferentes Outros formatos (webp, jxr) Cuspir código <picture> e srcset?
  65. 65. FALLBACK SEMPRE <img src>
  66. 66. BROWSERS
  67. 67. BROWSERS SRCSET: Chrome, Opera, Firefox, Safari*, Edge* PICTURE: Chrome, Opera, Firefox Lembre do fallback picturefill 2.0
  68. 68. NÃO PRECISA SEMPRE imagem única às vezes é boa o suficiente
  69. 69. <picture> & srcset TUDO QUE VOCÊ PRECISA SABER SOBRE
  70. 70. @sergio_caelum sergiolopes.org OBRIGADO
  71. 71. 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/
  72. 72. 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

×