Responsive design is taking the world by a storm and every team is converting their site to be on mobile or preparing to do that soon.
Few people however realize performance implications of this new approach to web development and one of the issues is images which represent more then 60% of all network payload and can congest wireless networks with data unnecessary for display on naturally smaller screens than desktop.
This issue gave birth to various Responsive Images techniques which are used to display “just right” size of the image for user’s device. There are several aspects of the issue that need to be considered, from formats and resolutions to content management and implementation code.
12. <picture>, srcset, sizes
Now part of HTML spec
In current Chrome, Opera, Firefox (38),
"under consideration" in IE
http://responsiveimages.org/
13. On The Page
<?php img('/path/to/original.jpg') ?>
8 Guidelines and 1 Rule for Responsive Images
http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/
Picturefill v2 by Scott Jehl
https://github.com/scottjehl/picturefill