Responsive Media

• Responsive Images Overview
• Terms for Responsive Media
• Discovering Various Divice Pixel Densities

• CSS Responsive images
• srcset and picture
• Responsive Video
• SVG

Pixel Density Demos

Below are examples of images set to render at different pixel densities. You'll need to view them on a variety of screens to get the full effect. Note: since the classroom iMacs have a dppx of 1, you should not notice much different in these examples.

• Side by side comparison of images at between 1, 2 and 3 dppx
• Another side by side comparison (1 photo)
• Demonstration of high pixel densities for three types of images: photo, illustration, vector icons
• Extra High DPI Demo (1x-4x)
• Extra Large Photo Demo (click swap photos)

Other Links

• DPI Love
• Designer's guide to DPI
• Making sense of DPI, PPI, Megapixels and Resolution

Relevant Library Code

• Fluid Images
• Responsive Images
• Responsive Video
• FitVid.js (official site)
• Picturefill: A Responsive Image Polyfill (official site)