Modules > Responsive Media

Responsive Media

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

• CSS Responsive images [covered in class]
  • background images with media queries and background-size property
• Responsive Images in HTML
  • srcset and sizes attributes
  • pixel density and width options
  • picture element for art direction
• Responsive Video
• Browser Testing Responsive Images
• SVG (see SVG module)

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
• CSS Responsive Images
• HTML Responsive Images with srcset and sizes
• picture element
• Responsive Video
• FitVid.js (official site )
• Picturefill: A Responsive Image Polyfill (official site )

Modules > Responsive Media