Responsive use of <img>

A presentation held at [****] for Siili Solutions responsive design and prototyping team

Transcript

1. Responsive use of
   

   View Slide

2. So far the images have been
   somewhat static
   

   View Slide

3. HTML 4 required to use src and alt
   

   View Slide

4. XHTML required a closure
   

   View Slide

5. HTML5 introduced new properties
   

   View Slide

6. Why not ?
   

   View Slide

7. srcset
   Descriptor defines the width of the image
   (w) or the pixel ratio (x)
   

   View Slide

8. srcset width use case
   Usually used when the image has
   dynamic size
   

   View Slide

9. srcset pixel density use case
   Usually used when the image is used in a
   fixed layout
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. srcset - benefit & problem
    

    View Slide

14. sizes
    “If the srcset attribute is present, the
    sizes attribute may also be present”
    

    View Slide

15. sizes examples
    First matched, first served. Default:
    

    View Slide

16. View Slide

17. srcset & sizes - only benefit
    

    View Slide

18. Pixel density matters
    

    View Slide

19. 3x
    

    View Slide

20. Quiz
    When srcset is unsupported by the given
    browser, which image from the example
    markup below will be downloaded?
    

    View Slide

21. What problems does this bring?
    Duplication of media queries from styles
    to markup, hence semantics mixed
    

    View Slide

22. What problems does this solve?
    Browser will download only the images
    that are best fitting to the given use case,
    hence better use bandwidth
    

    View Slide

23. What problems does this solve?
    Developer can leave the calculations of
    which image to use in a given case to the
    browser
    

    View Slide

24. Would you like to know more?
    Please see the talk “Responsive images
    are coming to a browser near you” by
    Yoav Weiss at VelocityConf 2014
    youtube.com/watch?v=GC3VgcltKKI
    

    View Slide

25. More further reading
    Please also see the in depth post by Eric
    Portis about the topic:
    ericportis.com/posts/2014/srcset-sizes
    

    View Slide

26. Thank you
    I am Jukka Paasonen, a Responsive
    Consultant at Siili Solutions
    

    View Slide