Udacity: Responsive Images code examples

Below are links to live examples used in the Udacity Responsive Images course.

You can access all the code for this course at github.com/udacity/responsive-images.

Patches and issues welcome!

1-02

Broken images Multiple wait cursors Single image, full size Single landscape image

1-05

Identical images, different compression Identical images, different compression and size

1-07

Single image, fixed size Single image, max width: 100% Single image, too small for large display size Two images, 50% width Two images, 50% width with margin

1-08

Image with relative width

1-09

Landscape image too wide for portrait display

1-10

Single image, no CSS

1-11

SVG v PNG

1-15

Photo with logo as JPEG Photo as JPEG, logo overlaid as SVG SVG v PNG v JPG

2-02

Text as image Text as image over photo Text using Web Font Text as text, over photo

2-04

Div with CSS effects

2-06

CSS background image: alternative CSS background image: conditional CSS background-size: cover Body with background image Body with background image and gradient Body with elaborate background using only CSS Div with background image image-set()

2-08

Unicode instead of an image

2-09

Icon fonts

2-11

SVG Data URI in HTML SVG Data URI in CSS SVG text on a path SVG optimized and unoptimized

3-03

Single image, 100vmax height and width Sizes attribute with media query Sizes attribute with w values Sizes attribute with x values Srcset with w values Srcset with w values, 50vw Srcset with x values

3-06

Image that scales badly Image that scales well Picture element: alternative image formats

3-08

Picture element: art direction Picture element: with srcset and media queries Picturefill polyfill