RWD Assets 

Option 1:



Save out larger images

img {max-width: 100%;}

Option 2:


3rd Party JavaScript

FitText to make font-sizing flexible

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

• FitVids.js for flexible, 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"



View demo, inspect code. 
See all the images that are loaded. 

Retina Assets

By Manikoth

Retina Assets

  • 1,753

More from Manikoth