| 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 | |||||||||||||||||||||||||