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.

An img is worth a thousand words

508 views

Published on

Why do we need responsive images?
How do create them?
How can Cloudinary help with easing the process

Published in: Technology
  • Hello! Who wants to chat with me? Nu photos with me here http://bit.ly/helenswee
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

An img is worth a thousand words

  1. 1. An <img> is worth a 1000 words February 2017 eitan.peer@cloudinary.com
  2. 2. Images weight
  3. 3. Source: httparchive.org
  4. 4. But wait, there’s more
  5. 5. Source: httparchive.org
  6. 6. Why is the image transfer size increasing?
  7. 7. 2004 Apple Cinema HD Display 30” 2560x1600 pixels 101.6 pixel density (PPI) Then and now 2017 Apple iPhone 6 Plus & 7 Plus 5.5” 1080x1920 pixels 401 pixel density
  8. 8. Scaling screen resolutions The higher the pixel density, the more pixels an image needs in order to look good So we can simply create higher quality images, right?
  9. 9. The range of screen sizes is getting wider
  10. 10. What’s going on? Screen density is on the rise High variance in screen sizes and DPR How do we cater these needs?
  11. 11. What we did in 67 <img src="max-resolution.jpg" style="max-width: 100%">
  12. 12. Waste not, want not Viewport width Wasted image bytes 1920px 42% 760px 53% 360px 72% https://timkadlec.com/2013/06/why-we-need-responsive-images/
  13. 13. The cost of waste 33% of the average web page size are wasted image bytes!
  14. 14. Responsive images
  15. 15. Tools of the trade The srcset and sizes attributes The <picture> element HTTP Client Hints header http://usecases.responsiveimages.org/#proposed-solutions
  16. 16. Enhancing <img> HTML5 spec introduced 2 new <img> attributes ● srcset ● sizes
  17. 17. Srcset & sizes The srcset attribute provides a list of possible image sources and the width or pixel density of each image file. The sizes attribute specify the intended display size of the image.
  18. 18. Srcset & sizes <img sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" srcset="low-res.jpg 320w, medium-res.jpg 480w, hi-res.jpg 800w" src="hi-res.jpg" alt="a11y"> Image file width in pixels Size allocated for the image per viewport Fallback for older browsers
  19. 19. Choosing the right image The browser chooses the image to render! if a supporting browser with a viewport width of 480px loads the page, the (max-width: 480px) media condition will be true, therefore the 440px slot will be chosen, so the medium-res.jpg will be loaded, as its inherent width (480w) is the closest to 440px.
  20. 20. Demo
  21. 21. <picture> The <picture> element is a container used to specify multiple <source> elements for a specific <img> contained in it. It provides fine-grained control through media queries for choosing the applicable source or the image type to use.
  22. 22. <picture> & media <picture> <source srcset="cloudinary-logo-wide.png" media="(min-width: 600px)"> <img src="cloudinary-logo-narrow.png" alt="Cloudinary"> </picture> Media attribute is a directive, not a suggestion
  23. 23. <picture> & type <picture> <source srcset="cloudinary-logo.svg" type="image/svg+xml"> <source srcset="cloudinary-logo.svg" type="image/webp"> <img src="cloudinary-logo.png" alt="Cloudinary"> </picture> The type attribute allows you to declare different image types that the browser can choose from.
  24. 24. Demo
  25. 25. <img> or <picture>? Use <picture> when you need explicit control for art direction Otherwise use <img> with srcset and sizes.
  26. 26. Client hints <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width"> Experimental draft, supported by Chrome and Opera http://httpwg.org/http-extensions/client-hints.html
  27. 27. Yikes!
  28. 28. Cloudinary
  29. 29. Features Cloudinary offers an end-to-end solution for all your image and video needs, including upload, storage, administration, manipulation and delivery. Let’s focus on how it helps with responsive images
  30. 30. Cloudinary <img srcset="https://res.cloudinary.com/demo/w_425/car_lady_dog.jpg 425w, https://res.cloudinary.com/demo/w_992/car_lady_dog.jpg 992w, https://res.cloudinary.com/demo/w_1984/car_lady_dog.jpg 1984w" sizes="(max-width: 500px) 425px, (max-width: 800px) 750px, 100vw" src="https://res.cloudinary.com/demo/w_1984/car_lady_dog.jpg" </img>
  31. 31. Demo
  32. 32. Cloudinary <cl-image public-id="car_lady_dog.jpg" cloud-name="demo" responsive> </cl-image> https://plnkr.co/edit/Tvrwxt2AW8K5DEhuTKhB?p=preview
  33. 33. Demo
  34. 34. Cloudinary Angular SDK Blog - https://goo.gl/oQFwua Github - https://github.com/cloudinary/cloudinary_angular/tree/angular_next
  35. 35. ● Use srcset and sizes attributes for responsive images ○ Let the browser do the heavy lifting ○ Breakpoint by file size ● Use <picture> for art-direction ● An image service can take away the pain ● https://github.com/eitanp461/angular-meetup Summary

×