O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Responsive Images and Performance

537 visualizações

Publicada em

Talk delivered in New York, Sep 19, 2016 during an O'Reilly meetup before Velocity Conference about Web Performance and Images, including HTTP Client Hints and new Image Formats

Publicada em: Tecnologia
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Seja a primeira pessoa a gostar disto

Responsive Images and Performance

  1. 1. Picture from Simon Howden freedigitalphotos.net! responsive images & performance Maximiliano Firtman @firt
  2. 2. mobile+web developer & trainer
  3. 3. training
  4. 4. questions yes, please QA at the end
  5. 5. responsive images & performance the problem new file formats http client hints what’s next
  6. 6. Let’s Start!
  7. 7. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders A picture is worth a thousand words…
  8. 8. … if it appears in time
  9. 9. What’s the problem with images on the Web?
  10. 10. Source: HTTP Archive
  11. 11. Mobile devices with high resolution
  12. 12. …higher than desktop screens
  13. 13. using cellular networks
  14. 14. We have 4G! We don't need to worry about performance... ( )
  15. 15. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G Only 21% is on 4G, worldwide
  16. 16. cellular
  17. 17. cellular 50% of users are on 2G networks
  18. 18. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G ~30% of the time 4G was not used
  19. 19. RTT - latency cellular networks 2G 3G 4G Home 0 250 500 750 1000 Min Max
  20. 20. rendering images is expensive
  21. 21. Responsive Images are here to help
  22. 22. Responsive Images • Provides with multiple image sources depending on: • display density • size of the image element in the page • image type
  23. 23. Responsive Images • srcset (HTML) • image-set (CSS) • picture • server-side techniques 
 (such as using WURFL)
  24. 24. <img src="photo.png" width="300" srcset="photo_lo.png 1x, 
 photo_hi.png 2x, photo_uhi.png 3x">
  25. 25. <picture> <source media="(min-width: 300px)" src="hi.jpg"> <source media="(min-width: 600px)" src="mid.jpg"> <source src="lo.jpg"> <img src="fallback.jpg" alt=""> </picture>
  26. 26. Responsive Images • The browser will pick the best image • We won’t send pixels that will never
 be rendered
  27. 27. Is that all? ( )
  28. 28. No, we need to push images further in performance ( )
  29. 29. Image Formats
  30. 30. Image Formats • Pick the right one for each situation
 (JPEG, GIF, PNG, SVG) • Optimize the file with tools
  31. 31. Lossless format: PNG • iPhone 7+ • Desktop 3Mb 1.5Mb
  32. 32. Lossless format: Zopfli PNG • iPhone 7+ • Desktop 2.3Mb 1.2Mb https://github.com/imagemin/zopflipng-bin -20%
  33. 33. Lossy format: JPEG • iPhone 7+ • Desktop 927Kb 300Kb 90% compression
  34. 34. Lossy format: JPEG 2000 (JPX) • iPhone 7+ • Desktop 752Kb 221Kb 90% compression -19%
  35. 35. Lossy format: JPEG XR (JXR) • iPhone 7+ • Desktop 665Kb 217Kb 90% compression -29%
  36. 36. Lossless/Lossy format: WebP • iPhone 7+ • Desktop 402Kb 213Kb 90% compression -35%
  37. 37. How to serve multiple formats?
  38. 38. <picture> <source type="image/webp" src="image.webp"> <source type="image/vnd.ms-photo" src="image.jxr"> <source type="image/jp2" src="image.jp2"> <source type="image/png" src=“image.zf.png"> <img src=“image.zf.png" alt=“description"> </picture>
  39. 39. Multiple formats, resolutions and viewport sizes • It can create more than 36 combinations!
  40. 40. <picture> … <source type=“image/webp" srcset=“image_lo.webp 1x, image_hi.webp 2x, image_uhi.webp 3x” media=“(min-width: 400px)” > … </picture>
  41. 41. Meet HTTP Client Hints • It’s an extension to HTTP • The browser will expose data to the server • Reduce the need of client-side media queries
  42. 42. Hello HTTP Client Hints <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Downlink">
  43. 43. Meet HTTP Client Hints • Every image request will include headers: • DPR • Width • Viewport-Width • Downlink • Save-Data
  44. 44. Save Data please! • Every image request will include headers: • Save-Data
  45. 45. What about Animated GIFs?
  46. 46. The Animated GIF nightmare • GIF is a very old format • Extremely Inefficient • 8 bits only
  47. 47. Animation format: Animated PNG • 8, 24 and 32 bits available • Transparent animations APNG • Polyfill available
  48. 48. Animation format: Animated WebP • Lossy or lossless
  49. 49. Animation format: Muted Inline Videos • Compression (MP4 H265, WebM V9) • Only with muted videos • On iOS 10, with webkit-playsinline • Polyfill available 10+53+
  50. 50. What’s next
  51. 51. New format: BPG • iPhone 7+ • Desktop 224Kb 121Kb Better Portable Graphics (lossy and lossless) -70%lossy
  52. 52. New format: BPG • iPhone 7+ • Desktop 224Kb 121Kb Better Portable Graphics -70% • JavaScript decoder lossy
  53. 53. New format: FLIF • iPhone 7+ • Desktop 1.5Mb 0.8Mb Free Lossless Image Format - Alpha! -43%lossless
  54. 54. New format: FLIF • iPhone 7+ • Desktop 1.5Mb 0.8Mb Free Lossless Image Format - Alpha! -43%lossless Great for Responsive using Progressiveness
  55. 55. Use Service Workers • You can convert files on the fly • There is a BPG SW-based decoder future
  56. 56. final thoughts - performance is key for success - don’t send pixels that won’t be rendered - find the balance: file size, memory, resolution - use new formats and client hints
  57. 57. Foto de freefoto.com firtman@gmail.com @firt firt.mobi/hpmwfirt.mobi/mh5

×