Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 67 lines (45 sloc) 3.695 kb
a344b9f first commit.
scottjehl authored
1 ## Responsive Images
2 ### An Experiment with Mobile-First Images that Scale Responsively & Responsibly
3
4 #### What is this?
5 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.
6
e88dc8a updated readme to link to new version in testing
scottjehl authored
7
a344b9f first commit.
scottjehl authored
8 ### Instructions
9 ##### * Note: you'll need an apache web server for this to work.
10
258b1b0 updated readme to represent new workflow
scottjehl authored
11 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)
a344b9f first commit.
scottjehl authored
12
258b1b0 updated readme to represent new workflow
scottjehl authored
13 2. Grab "responsiveimgs.min.js" and reference it from your HTML in the HEAD of your document:
9d95975 fixing the readme formatting
scottjehl authored
14
a344b9f first commit.
scottjehl authored
15 <script src="rwd-images/rwd-images.min.js"></script>
16
258b1b0 updated readme to represent new workflow
scottjehl authored
17 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)
9d95975 fixing the readme formatting
scottjehl authored
18
258b1b0 updated readme to represent new workflow
scottjehl authored
19 &lt;img src="small.jpg?full=large.jpg" &gt;
a344b9f first commit.
scottjehl authored
20
21
22 #### How's it work?
258b1b0 updated readme to represent new workflow
scottjehl authored
23 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.
a344b9f first commit.
scottjehl authored
24
25 ### Supported Browsers
ef6aca5 edited the readme to include FF4 in supported browsers.
scottjehl authored
26 Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera. Firefox 4
a344b9f first commit.
scottjehl authored
27
28 ### Support Caveats:
ef6aca5 edited the readme to include FF4 in supported browsers.
scottjehl authored
29 Firefox 3.6-, IE 6/7, etc
c20723a readme formatting
scottjehl authored
30 ##### Note:
31 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.
a344b9f first commit.
scottjehl authored
32
33 ### Non-Javascript Browsers
b7aeca2 updated readme
scottjehl authored
34 Non-javascript enabled/supporting browsers/devices will receive the initial image referenced in the image src attribute (the mobile version)
a344b9f first commit.
scottjehl authored
35
36 ### Optional Configuration and Optimizations:
37
fa840f4 removed clientSideOnly option - wasn't practical or used by probably …
scottjehl authored
38 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.
9d95975 fixing the readme formatting
scottjehl authored
39
a344b9f first commit.
scottjehl authored
40 <script>
41 //configure options here:
42 var rwd_images = {};
43 </script>
44
45 ### Setting a different width breakpoint
46 If you'd like to use a different width breakpoint than the 480px default:
9d95975 fixing the readme formatting
scottjehl authored
47
a344b9f first commit.
scottjehl authored
48 <script>
49 //configure options here:
50 var rwd_images = {
51 //set the width breakpoint to 600px instead of 480px
52 widthBreakPoint: 600
53 };
54 </script>
55
56
57 #### Server-side Optimizations
58 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
59 choose not to load the script at all.
60
61 The cookie looks like this (where 1440 is the screen resolution):
62 "rwd-resolution=1440"
63
64 #### License & Disclaimer
65 - Dual licensed under the MIT or GPL Version 2 licenses.
66 - Copyright 2010, Scott Jehl & Filament Group, Inc
67 - This project is experimental. Please fork and contribute!
Something went wrong with that request. Please try again.