Practical Responsive Images
Responsive Websites need Responsive Images
Picturefill Examples

The < picture > element is nearly here. But what can you take advantage of today, and how can you go about supporting future-legacy-browsers...

As the dimensions of a particular image are shrunk down, the main focus of the image may be de-emphasised, and as such we could consider cropping the image to improve it's framing.

The simple and natural act of rotating a mobile device in your hands, leads to a completely different layout to play with, so it's a prime opportunity to adapt your image content accordingly

Picturefill Examples

With variation in the image types supported, it great to be able to target the latest and greatest formats, and to provide fallback to less-ideal formats for when necessary .

Similar to example 4, but requesting WebP with a JPG fallback.

Image Manipulation
1. Dynamic Imaging Intro