Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive use of <img>

Juga Paazmaya
February 10, 2015

Responsive use of <img>

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

Juga Paazmaya

February 10, 2015
Tweet

More Decks by Juga Paazmaya

Other Decks in Technology

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