$30 off During Our Annual Pro Sale. View Details »

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

More Decks by Juga Paazmaya

Other Decks in Technology


  1. Responsive use of

  2. So far the images have been somewhat static

  3. HTML 4 required to use src and alt

  4. XHTML required a closure

  5. HTML5 introduced new properties

  6. Why not ?

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

    the pixel ratio (x)
  8. srcset width use case Usually used when the image has

    dynamic size
  9. srcset pixel density use case Usually used when the image

    is used in a fixed layout
  10. None
  11. None
  12. None
  13. srcset - benefit & problem

  14. sizes “If the srcset attribute is present, the sizes attribute

    may also be present”
  15. sizes examples First matched, first served. Default:

  16. None
  17. srcset & sizes - only benefit

  18. Pixel density matters

  19. 3x

  20. Quiz When srcset is unsupported by the given browser, which

    image from the example markup below will be downloaded?
  21. What problems does this bring? Duplication of media queries from

    styles to markup, hence semantics mixed
  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
  23. What problems does this solve? Developer can leave the calculations

    of which image to use in a given case to the browser
  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
  25. More further reading Please also see the in depth post

    by Eric Portis about the topic: ericportis.com/posts/2014/srcset-sizes
  26. Thank you I am Jukka Paasonen, a Responsive Consultant at

    Siili Solutions