RWD Assets

Option 1:

Save out larger images

img {max-width: 100%;}

Option 2:

3rd Party JavaScript

FitText to make font-sizing ﬂexible

•Lettering.js for more robust control over your typography:

• FitVids.js for ﬂexible, responsive videos: [

Option 3:

PictureFill - created by Scott Jehl

Creates <picture> element

Picturefill (1/3)

 <picture alt="Our Alternate Text">
    <!-- Smallest size first - no @media qualifier -->
  <source src="content-image.jpeg" />
</picture>

PICTUREfill (2/3)

 <picture alt="Our Alternate Text">
  
  <!-- Smallest size first - no @media qualifier -->
  <source src="content-image.jpeg" />

  <!-- Large size - send to viewports 800px wide and up -->
  <source src="content-image-lrg.jpeg" media="(min-width:
 800px)" />

</picture>

PICTUREFill (3/3)

 <picture alt="Our Alternate Text">
  <!-- Smallest size first - no @media qualifier -->
  <source src="content-image.jpeg" />
  <!-- Large size - send to viewports 800px wide and up -->
  <source src="content-image-lrg.jpeg" media="(min-width:
 800px)" />
</picture>
<!-- Fallback content for non-JS or non-media-query- supporting-browsers -->
  <noscript>
    <img src="content-image.jpeg" alt="Our Alternate
 Text" />
  </noscript>
</picture>

Picture "element"

PictureFill

View demo, inspect code.

See all the images that are loaded.