Improving performance with responsive (and responsible!) images

*
Proposal
Short Form
Intermediate

Excerpt

Attendees can expect concrete examples of how the new `picture` element and `srcset` attribute work, and to learn how they can use responsive and responsible images right now to improve performance and deliver the best possible experience to their users.

Description

I will be speaking about the web’s hunger for more, bigger, and higher-resolution images, and the performance problem this creates. I’ll give a brief history of the new (and occasionally controversial) responsive images specification, and discuss some other exciting new standards that are on the horizon. In addition to responsive image solutions, I’ll discuss techniques for improving image loading performance in general, including optimization and pre-processing, deferred loading, image format choice, caching, and use of CDNs. Attendees can expect concrete examples of how the new `picture` element `srcset` attribute work, and to learn how they can use responsive and responsible images right now to improve performance and deliver the best possible experience to their users.

Tags

responsive web design, rwd, responsive images, respimg, html, performance

Speaking experience

I gave versions of this time six times in 2014 and am confirmed to give it least one more time this year, in May.

Using Responsive Images Responsibly: Performance & Accessibility
Full Stack Toronto
November 22, 2014. Toronto, Ontario, Canada.
Slides: https://speakerdeck.com/newtron/using-responsive-images-responsibly-performance-and-accessibility-full-stack
URL: http://fsto.co/

Using Responsive Images Responsibly: Performance & Accessibility
WordCamp Toronto 2014
November 15, 2014. Toronto, Ontario, Canada.
Video: http://davidnewton.ca/talks/WCTO14-dave-newton.m4v
Slides: https://speakerdeck.com/newtron/using-responsive-images-responsibly-performance-and-accessibility-wordcamp
URL: http://2014.toronto.wordcamp.org/

Using Responsive Images Responsibly: Performance & Accessibility
Accessibility Camp Toronto
September 27, 2014. Toronto, Ontario, Canada.
Slides: https://speakerdeck.com/newtron/using-responsive-images-responsibly-performance-and-accessibility
URL: http://www.accessibilitycampto.org/

Improving Performance with Responsive Images
2014 NAGW National Conference
September 10, 2014. St. Paul, Minnesota, USA.
Slides: https://speakerdeck.com/newtron/improving-performance-with-responsive-images-nagw
URL: https://nagw.org/conference/2014

Improving Performance with Responsive Images
jQuery.TO() Conference
March 15, 2014. Toronto, Ontario, Canada.
Slides: https://speakerdeck.com/newtron/improving-performance-with-responsive-images-jqueryto
URL: http://jqueryto.com/

Improving Performance with Responsive Images
Toronto Web Performance Group
January 22, 2014. Toronto, Ontario, Canada.
Slides: https://speakerdeck.com/newtron/improving-performance-with-responsive-images-webperfto
URL: http://www.meetup.com/Toronto-Web-Performance-Group/events/154101952/

PANEL: Technology-Enhanced Health Professions Education (TEPHE), A Workshop Series, Part 2: Putting Theory into Practice–How to incorporate technology into your curriculum development
University of Toronto Centre for Faculty Development
February 7, 2011. Toronto, Ontario, Canada.
URL: http://cfd.utoronto.ca/workshops/previous/210

Mobile Text Entry: Relationship between Walking Speed and Text Input Task Difficulty
7th International Conference on Human Computer Interaction with Mobile Devices and Services
September 21, 2005. Salzburg, Austria.
URL: https://web.archive.org/web/20120825132735/http://conference.icts.sbg.ac.at/mobilehci.icts.sbg.ac.at/programme.htm

PANEL: Behind the Scenes of the CAF Submission and Jury Process: Mechanism of the Electronic Theater Revealed
ACM SIGGRAPH 2000, 27th International Conference on Computer Graphics and Interactive Techniques
July, 2000
URL: http://www.siggraph.org/s2000/conference/caf/index.html

Speaker