├── .htaccess
├── .repo-rt
├── README.md
├── demo.html
├── responsiveimgs.js
├── responsiveimgs.min.js
└── sample-content
    ├── photocred.txt
    ├── running-lrg.jpg
    └── running-sml.jpg


/.htaccess:
--------------------------------------------------------------------------------
 1 | # Responsive Images 
 2 | # Mobile-First images that scale responsively and responsibly
 3 | # Copyright 2010, Scott Jehl, Filament Group, Inc 
 4 | # Dual licensed under the MIT or GPL Version 2 licenses. 
 5 | # //Start Responsive Images 
 6 | RewriteEngine On
 7 | # direct image requests to temp
 8 | RewriteCond %{QUERY_STRING} full=(.*)&?
 9 | RewriteRule (.*)rwd-router/.*\.(jpe?g|png|gif|webp) $1%1 [L]
10 | # ignore trap for non-image requests, rewrite URL without trap segment
11 | RewriteRule (.*)rwd-router/(.*)$ $1$2
12 | # //End Responsive Images


--------------------------------------------------------------------------------
/.repo-rt:
--------------------------------------------------------------------------------
1 | RETIRED
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | :warning: This project is archived and the repository is no longer maintained. 
 2 | 
 3 | We recommend you use picturefill instead. https://github.com/scottjehl/picturefill
 4 | 
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
18 | 
19 | 
20 | 
21 | 
22 | # Old Readme, kept for historic purposes:
23 | 
24 | ## Responsive Images
25 | ### An Experiment with Mobile-First Images that Scale Responsively & Responsibly
26 | 
27 | 
28 | 
29 | 
30 | 
31 | #### What is this?
32 | The goal of this technique is to deliver optimized, contextual image sizes in [responsive layouts](http://www.alistapart.com/articles/responsive-web-design/) that utilize dramatically different image sizes at different resolutions. Ideally, this could enable developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions -- without requesting both image sizes, and without UA sniffing.
33 | 
34 | 
35 | ### Instructions 
36 | ##### * Note: you'll need an apache web server for this to work.
37 | 
38 | 1. Add the ".htaccess"" file* to your web server public rootfile's head (OR if you already have an .htaccess file, you can paste its contents into your existing file)
39 | 
40 | 2. Grab "responsiveimgs.min.js" and reference it from your HTML in the HEAD of your document:
41 | 
42 | 	<script src="rwd-images/rwd-images.min.js"></script>
43 | 	
44 | 3. For any img elements that offer a larger desktop-friendly size, reference the larger image's src via a ?full= query string on the image url. Note that the path after ?full= should be written so it works directly as the src attribute as well (in other words, include the same path info you need for the small version)
45 | 
46 | 	&lt;img src="small.jpg?full=large.jpg" &gt;	
47 | 	
48 | 
49 | #### How's it work?
50 | As soon as rwd-images.js loads, it tests the screen width, and if it's large, it inserts a BASE element into the head of your page, directing all subsequent image, script, and stylesheet requests through a fictitious directory called "/rwd-router/". As these requests reach the server, the .htaccess file determines whether the request is a responsive image or not (does it have a ?full query parameter?). It redirects responsive image requests immediately to their full size, while all non-responsive-image requests go to their proper destination through a URL rewrite that ignores the "/rwd-router/" segment. 
51 | 
52 | ### Supported Browsers 
53 | Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera. Firefox 4
54 | 
55 | ### Support Caveats: 
56 | Firefox 3.6-, IE 6/7, etc
57 | ##### Note: 
58 | Unsupported browsers still receive responsive images; the drawback is that both image sizes are requested, so there's additional overhead on the initial request on the desktop. That aside, subsequent page visits can make use of a cookie that is set in all browsers to serve the appropriate size from the start.
59 | 
60 | ### Non-Javascript Browsers
61 | Non-javascript enabled/supporting browsers/devices will receive the initial image referenced in the image src attribute (the mobile version)
62 | 
63 | ### Optional Configuration and Optimizations:
64 | 
65 | 1 option is available for external configuration: widthBreakPoint. You can set it within a global "rwd_images" object that must be defined before rwd-images.js is loaded.
66 | 
67 | 	<script>
68 | 		//configure options here:
69 | 		var rwd_images = {};
70 | 	</script>
71 | 
72 | ### Setting a different width breakpoint
73 | If you'd like to use a different width breakpoint than the 480px default:
74 | 
75 | 	<script>
76 | 		//configure options here:
77 | 		var rwd_images = {
78 | 			//set the width breakpoint to 600px instead of 480px
79 | 			widthBreakPoint: 600
80 | 		};
81 | 	</script>
82 | 
83 | 
84 | #### Server-side Optimizations
85 | A cookie is set by the script so that on subsequent page loads you can set your images an appropriate source from the start and 
86 | choose not to load the script at all. 
87 | 
88 | The cookie looks like this (where 1440 is the screen resolution):
89 | "rwd-resolution=1440"
90 | 
91 | #### License & Disclaimer
92 |  - Dual licensed under the MIT or GPL Version 2 licenses. 
93 |  - Copyright 2010, Scott Jehl & Filament Group, Inc
94 |  - This project is experimental. Please fork and contribute!
95 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8" />
 5 | 	<title>Responsive Images Test Page</title>
 6 | 	<script>
 7 | 		/*
 8 | 		//optional: set config options here!
 9 | 		var rwd_images = { 
10 | 			widthBreakPoint: 600
11 | 		};
12 | 		*/
13 | 	</script>
14 | 	<script src="responsiveimgs.js"></script>
15 | 	<!-- demo styles -->
16 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
17 | 	<style>
18 | 		body { font-family: Helvetica, sans-serif; background: #222; color: #eee; margin: 20px auto; padding: 0 20px; max-width: 980px; }
19 | 		img { border: 0; width: 100%; display: block; max-width: 100%; }
20 | 		#cred { font-size: .7em; color: #aaa; }
21 | 		a { color: #fff; }
22 | 	</style>
23 | </head> 
24 | <body> 
25 | 
26 | 	<h1>Responsive Images Test Page</h1>
27 | 	<p>In supported browsers, the following image will load either small or large version depending on screen resolution, making a single 1kb request before requesting the appropriate size.</p>
28 | 
29 | 	<img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" />
30 | 
31 | 	<p id="cred"><strong>Photo credit (CC):</strong> Cia de Foto <a href="http://www.flickr.com/photos/ciadefoto/3192757134/in/pool-809956@N25/">Flickr Creative Commons</a></p>
32 | 	
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/responsiveimgs.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Responsive Images: Mobile-First images that scale responsively and responsibly
  3 |  * Copyright 2011, Scott Jehl, Filament Group, Inc
  4 |  * Dual licensed under the MIT or GPL Version 2 licenses.
  5 | */
  6 | (function( win ){
  7 | 	//defaults / mixins
  8 | 	var	rwdi			= win.rwd_images || {},
  9 | 		widthBreakPoint	= rwdi.widthBreakPoint || 480,
 10 | 		htmlClass		= "rwd-imgs-lrg",
 11 | 		wideload		= win.screen.availWidth > widthBreakPoint,
 12 | 		filePath		= location.href,
 13 | 		dirPath			= filePath.substring( 0, filePath.lastIndexOf( "/" ) ) + "/",
 14 | 		doc				= win.document,
 15 | 		head			= doc.getElementsByTagName( "head" )[0],
 16 | 		
 17 | 		//record width cookie for subsequent loads
 18 | 		date			= new Date();
 19 | 		date.setTime(date.getTime()+(5/*5 sec*/*1000));
 20 | 		doc.cookie = "rwd-resolution=" + screen.width + ";expires=" + date.toGMTString() +"; path=/";
 21 | 
 22 | 		//if wideload is false quit now
 23 | 		if( !wideload ){
 24 | 			return;
 25 | 		}
 26 | 		
 27 | 		//add HTML class
 28 | 		doc.documentElement.className += " " + htmlClass;
 29 | 		
 30 | 		//base tag support test (returns base tag for use if support test passes) creds: jQuery Mobile, hasJS
 31 | 		var base		= (function(){
 32 | 			var backup,
 33 | 				baseAdded = false,
 34 | 				a = doc.createElement("a"),
 35 | 				supported = false,
 36 | 				base = head.getElementsByTagName( "base" )[0] || (function(){
 37 | 	                baseAdded = true;
 38 | 	                return head.insertBefore( doc.createElement("base"), head.firstChild );
 39 | 	            })();
 40 | 	         
 41 | 	        backup = !baseAdded && base.href;   
 42 | 	        
 43 | 	        //test base support before using
 44 |             base.href = location.protocol + "//" + "x/";
 45 |             a.href = "y";
 46 |             
 47 |             //if dynamic base tag is unsupported (Firefox)
 48 |             if( a.href.indexOf( "x/y" ) < 0 ){
 49 |             	if( backup ){
 50 |             		base.href = backup;
 51 |             	}
 52 |             	else{
 53 |             		head.removeChild(base);
 54 |             	}
 55 |             	base = null;
 56 |             }
 57 |             else{
 58 |             	base.href = dirPath +  "rwd-router/";
 59 |             }
 60 |             //return 
 61 | 			return base;
 62 | 	    })(),
 63 | 	    
 64 | 	    //find and replace img elements
 65 | 		findrepsrc		= function(){
 66 | 			for( var i = 0, imgs = doc.getElementsByTagName( "img" ), il = imgs.length; i < il; i++){
 67 | 				var img		= imgs[i],
 68 | 					src		= img.getAttribute( "src" ),
 69 | 					full	= src.match( /(\?|&)full=(.*)&?/ ) && RegExp.$2;
 70 | 					
 71 | 				if( full ){
 72 | 					img.src = full;
 73 | 				}
 74 | 			}
 75 | 		},
 76 | 		
 77 | 		//flag for whether loop has run already
 78 | 	    complete		= false,
 79 | 	    
 80 | 	    //remove base if present, find/rep image srcs if wide enough (maybe make this happen at domready?)
 81 | 	    readyCallback	= function(){
 82 | 	    	if( complete ){ return; }
 83 | 	    	complete = true;
 84 | 
 85 | 	    	if( !base ) {
 86 | 				findrepsrc();
 87 | 			}
 88 | 			else{
 89 | 				head.removeChild(base);
 90 | 			}
 91 | 	    };
 92 | 	
 93 | 	//DOM-ready or onload handler
 94 | 	//W3C event model
 95 | 	if ( doc.addEventListener ) {
 96 | 		win.addEventListener( "load", readyCallback, false );
 97 | 	}
 98 | 	// If IE event model is used
 99 | 	else if ( doc.attachEvent ) {
100 | 		win.attachEvent( "onload", readyCallback );
101 | 	}
102 | })(this);


--------------------------------------------------------------------------------
/responsiveimgs.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * Responsive Images: Mobile-First images that scale responsively and responsibly
3 |  * Copyright 2011, Scott Jehl, Filament Group, Inc
4 |  * Dual licensed under the MIT or GPL Version 2 licenses.
5 | */
6 | (function(g){var k=g.rwd_images||{},d=k.widthBreakPoint||480,h="rwd-imgs-lrg",f=g.screen.availWidth>d,e=location.href,l=e.substring(0,e.lastIndexOf("/"))+"/",m=g.document,j=m.getElementsByTagName("head")[0],c=new Date();c.setTime(c.getTime()+(5*1000));m.cookie="rwd-resolution="+screen.width+";expires="+c.toGMTString()+"; path=/";if(!f){return}m.documentElement.className+=" "+h;var b=(function(){var r,q=false,p=m.createElement("a"),o=false,s=j.getElementsByTagName("base")[0]||(function(){q=true;return j.insertBefore(m.createElement("base"),j.firstChild)})();r=!q&&s.href;s.href=location.protocol+"//x/";p.href="y";if(p.href.indexOf("x/y")<0){if(r){s.href=r}else{j.removeChild(s)}s=null}else{s.href=l+"rwd-router/"}return s})(),n=function(){for(var r=0,t=m.getElementsByTagName("img"),p=t.length;r<p;r++){var o=t[r],s=o.getAttribute("src"),q=s.match(/(\?|&)full=(.*)&?/)&&RegExp.$2;if(q){o.src=q}}},a=false,i=function(){if(a){return}a=true;if(!b){n()}else{j.removeChild(b)}};if(m.addEventListener){g.addEventListener("load",i,false)}else{if(m.attachEvent){g.attachEvent("onload",i)}}})(this);


--------------------------------------------------------------------------------
/sample-content/photocred.txt:
--------------------------------------------------------------------------------
1 | Cia de Foto, Flickr Creative Commons, http://www.flickr.com/photos/ciadefoto/3192757134/in/pool-809956@N25/


--------------------------------------------------------------------------------
/sample-content/running-lrg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/filamentgroup/Responsive-Images/b0fc63f27d20b8a8252a6f2ea8b66e8b2cf401db/sample-content/running-lrg.jpg


--------------------------------------------------------------------------------
/sample-content/running-sml.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/filamentgroup/Responsive-Images/b0fc63f27d20b8a8252a6f2ea8b66e8b2cf401db/sample-content/running-sml.jpg


--------------------------------------------------------------------------------