A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | ||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | CURRENT Techniques | Requires server-side component? | Requires JavaScript? | How many add'l resolutions of image are downloaded? (Zero is ideal.) | Use valid syntax? | Requires additional markup? | Allows for crop/zoom art direction? | Does it to bandwidth testing? | Project Home | Demo Home | |||||||||||||||
2 | Native JS | jQuery | 0 additional images | 1 image | Attributes in target IMG element | Utilizes <NOSCRIPT> tag | Special markup | ||||||||||||||||||
3 | Picturefill | N | Y | N | ?? | N | N | Y | Y | Y | N | https://github.com/scottjehl/picturefill | http://scottjehl.github.com/picturefill/ | ||||||||||||
4 | Adaptive Images | Y (.htaccess, Apache 2, PHP, GD Lib) | Y (small amount) | N | X | Y | N (overwritten by PHP?) | N | N | N | N | http://adaptive-images.com/ | http://adaptive-images.com/ | ||||||||||||
5 | HiSRC | N | Y | Y (plugin) | X | Y | Y | N | Y | Y | Y | https://github.com/teleject/hisrc | |||||||||||||
6 | HiSRC (alt. transparent GIF + Media Query approach) | N | Y | Y (plugin) | X | Y | N | N | N | Y | Y | https://github.com/teleject/hisrc | |||||||||||||
7 | Responsive Images | Y (.htaccess) | Y | N | X | Y | Y (url params) | N | Y | Y | Y | https://github.com/filamentgroup/Responsive-Images | http://filamentgroup.com/examples/responsive-images-new/demos/A-Default/demo.html | ||||||||||||
8 | Responsive Images Alt | Y (.htaccess) | Y | N | X | Y | Y (url params) | N | Y | Y | N | https://github.com/allmarkedup/responsive-images-alt | |||||||||||||
9 | Foresight.js | Kinda (file to test) | Y | N | X | Y | Y | Y | Y | Kinda | N | https://github.com/adamdbradley/foresight.js | http://foresightjs.appspot.com/demos/ | ||||||||||||
10 | src.sencha.io | Third party | N | N | X | Y | N | N | Kinda (prefix src) | N | N | http://www.sencha.com/products/io/ | http://www.sencha.com/learn/how-to-use-src-sencha-io/ | ||||||||||||
11 | riloadr | N | Y | Optional | X | N (missing src) | Y | Optionally | Y | N | N | https://github.com/tubalmartin/riloadr | https://github.com/tubalmartin/riloadr/tree/master/demos | ||||||||||||
12 | Responsive Enhance | N | Y | N | X | Y | Y | N | Y | Y | N | https://github.com/joshje/Responsive-Enhance | |||||||||||||
13 | rwdImages | N | Y | Y (plugin) | X | Y | Y | N | Y (gif in src) | Y (through CSS) | N | https://github.com/stowball/jQuery-rwdImages | |||||||||||||
14 | Retina.ja | N | Y | N | X | Y | N | N | Y | Kinda | N | http://retinajs.com/ | |||||||||||||
15 | Content Aware Resizing | Y (php) | Y (small amount) | N | X | Y | N | N | Y | Y (maintenance through PHP file) | N | http://www.craig-russell.co.uk/2011/01/22/responsive-images-and-context-aware-image-sizing.html | http://craig-russell.co.uk/examples/getimage/demo.html | ||||||||||||
16 | Doubletake | Kinda (sencha.io) | Y | Y | X | Y | N | N | N | N | N | http://www.grahambird.co.uk/lab/doubletake/ | |||||||||||||
17 | Responsive Images with PHP and jQuery | Y (php) | Y | Y | X | N (missing src) | Y | Y | Y | Kinda | N | http://www.jamesfairhurst.co.uk/posts/view/responsive_images_with_php_and_jquery/ | http://www.jamesfairhurst.co.uk/SkeletonResizeImages/ | ||||||||||||
18 | Responsive Images with Cookies | Y (php an cookies) | Y (small amount) | N | X | Y | N | N | Y | Kinda | N | http://blog.keithclark.co.uk/responsive-images-using-cookies/ | |||||||||||||
19 | Testing Responsive Images | N | Y | Y | X | Y | Y (in noscript) | Y | Y | Y | N | http://www.monoliitti.com/images/ | |||||||||||||
20 | Creating responsive images using the noscript tag | N | Y | N | X | Y | Y (in noscript) | Y | Y | Y | N | http://www.headlondon.com/our-thoughts/technology/posts/creating-responsive-images-using-the-noscript-tag | |||||||||||||
21 | Responsive Images and TinySRC (Now Sencha.IO) | Y (sencha.io, .htaccess) | Y | N | X | Y | Y (url params) | N | Y | Y | N | http://blog.trasatti.it/2011/05/responsive-images-and-tinysrc.html | http://ri.logme.mobi/demo.html | ||||||||||||
22 | Responsive Images Right Now | N | N | N | X | Y | Y | N | Y | Y | N | http://csswizardry.com/2011/07/responsive-images-right-now/ | |||||||||||||
23 | Responsive context aware images without cookies or server logic | N | Y | Y | X | Y | Y (in div) | Y | Y | Y | N | https://gist.github.com/1200270 | http://nerd.vasilis.nl/code/responsive-images/noscript.html | ||||||||||||
24 | WURFL Server Side Responsive Images | Y (database) | N | N | X | Y | N | N | Kinda (prefix src) | N | N | https://github.com/carsonmcdonald/ServerSideResponsiveImageExample#readme | |||||||||||||
25 | |||||||||||||||||||||||||
26 | FUTURE POSSIBILITIES | ||||||||||||||||||||||||
27 | Nicolas' CSS psuedo element technique | N | Maybe (depends on spec) | N | Y | N | http://nicolasgallagher.com/responsive-images-using-css3/ | ||||||||||||||||||
28 | Picture Element | N | Probably not | N | Y | Maybe? (network api queries) | http://www.w3.org/community/respimg/ | ||||||||||||||||||
29 | Flashpix / New format | N | N | Y | N | Maybe? | http://en.wikipedia.org/wiki/FlashPix | ||||||||||||||||||
30 | srclist attribute in HTML (has semantic src but links to media query list datalist thingy) | ||||||||||||||||||||||||
31 | src prefix in CSS | ||||||||||||||||||||||||
32 | src property in CSS | ||||||||||||||||||||||||
33 | |||||||||||||||||||||||||
34 | |||||||||||||||||||||||||
35 | |||||||||||||||||||||||||
36 | |||||||||||||||||||||||||
37 | |||||||||||||||||||||||||
38 | |||||||||||||||||||||||||
39 | |||||||||||||||||||||||||
40 | |||||||||||||||||||||||||
41 | |||||||||||||||||||||||||
42 | |||||||||||||||||||||||||
43 | |||||||||||||||||||||||||
44 | |||||||||||||||||||||||||
45 | |||||||||||||||||||||||||
46 | |||||||||||||||||||||||||
47 | |||||||||||||||||||||||||
48 | |||||||||||||||||||||||||
49 | |||||||||||||||||||||||||
50 | |||||||||||||||||||||||||
51 | |||||||||||||||||||||||||
52 | |||||||||||||||||||||||||
53 | |||||||||||||||||||||||||
54 | |||||||||||||||||||||||||
55 | |||||||||||||||||||||||||
56 | |||||||||||||||||||||||||
57 | |||||||||||||||||||||||||
58 | |||||||||||||||||||||||||
59 | |||||||||||||||||||||||||
60 | |||||||||||||||||||||||||
61 | |||||||||||||||||||||||||
62 | |||||||||||||||||||||||||
63 | |||||||||||||||||||||||||
64 | |||||||||||||||||||||||||
65 | |||||||||||||||||||||||||
66 | |||||||||||||||||||||||||
67 | |||||||||||||||||||||||||
68 | |||||||||||||||||||||||||
69 | |||||||||||||||||||||||||
70 | |||||||||||||||||||||||||
71 | |||||||||||||||||||||||||
72 | |||||||||||||||||||||||||
73 | |||||||||||||||||||||||||
74 | |||||||||||||||||||||||||
75 | |||||||||||||||||||||||||
76 | |||||||||||||||||||||||||
77 | |||||||||||||||||||||||||
78 | |||||||||||||||||||||||||
79 | |||||||||||||||||||||||||
80 | |||||||||||||||||||||||||
81 | |||||||||||||||||||||||||
82 | |||||||||||||||||||||||||
83 | |||||||||||||||||||||||||
84 | |||||||||||||||||||||||||
85 | |||||||||||||||||||||||||
86 | |||||||||||||||||||||||||
87 | |||||||||||||||||||||||||
88 | |||||||||||||||||||||||||
89 | |||||||||||||||||||||||||
90 | |||||||||||||||||||||||||
91 | |||||||||||||||||||||||||
92 | |||||||||||||||||||||||||
93 | |||||||||||||||||||||||||
94 | |||||||||||||||||||||||||
95 | |||||||||||||||||||||||||
96 | |||||||||||||||||||||||||
97 | |||||||||||||||||||||||||
98 | |||||||||||||||||||||||||
99 | |||||||||||||||||||||||||
100 |