The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

View only
TechniqueURLFirst LoadMultiple SizesExtra DownloadsHandle Image Resizing?TechNo CookiesNo JSCaching and CDNsNo Media Query SupportLicenseNotesdatanoscriptcookiesbasehtaccessurl parametersassumed file structureimage serviceserver sidespacer gifua string regex
Server side responsive images, Javan/an/aLikely to have problems because different size images come from the same url.n/aGPLv3As far as I can tell, this is a WURFL-based alternative to TinySRC. It is a service that you can call with an image url that will resize the image based on what WURFL knows about the size of the device. Very new project. Carson McDonald started it while at Breaking Development conference in September 2011.yy
3 Src servicen/an/aNo issuesn/aFreeOriginally called TinySRC and built by James Pearce. Uses device detection to determine size of device. Or you can pass specific measurements that you would like an image resized to.yy
Responsive Images and Context Aware Sizing, first load has extra image requests until JS processing occurs.YesYesSort of.Javascript, PHPn/aexample would result in blank gif, but author points out that the default could be mobile version.Everything gets routed through a single php file with URL parameters. Could be problematic with proxies and CDNs.n/aUnclear, sample codeSeveral specific images are defined in the PHP code. The main problem is the technique ends up with multiple requests. This was a very early attempt at solving this problem. The conversation on the blog post is interesting and I like the idea of requesting the image based on it’s percentage. Basically, the image may never be used at full screen size. Can we get something relative to screen size?yy
Responsive images with Doubletake.js, first load has extra image requests until JS processing occurs.YesYesYesJavascript, SLIR or (tinysrc)n/amobile size imageNo issuesn/aWTFPL licenseUses either a local image resizer or tinysrc. Results in extra downloads.yyy
Responsive images with ExpressionEngine issuesn/aUnclear, sample codeRelies on very basic user agent string parsing.yy
Testing Responsive Images size imageNo issuesn/aUnclear, sample codeStarts with noscript tag surrounding img tag that references the smallest image. Noscript tag has data attributes containing as many larger image file paths as needed as well as any additional attributes like alt. Short JQuery script looks at browser size and pulls the appropriate image info from the noscript data attributes and uses it to insert an image tag into the page. Elements inside noscript tags do not get downloaded so there is no extra http requests.yy
Creating responsive images using the noscript tag defaults to desktop image but could easily be mobileNo issuesn/aUnclear, sample codeThis was the first solution I saw using the noscript tag. Despite the fact they describe it as having the elegance of a wading hippo, the noscript approach is pretty interesting.yy
Responsive context aware images without cookies or server logic size imageEach image has unique url. No problem with caching or CDNs.n/aUnclear, sample codeAdds extra div markup with attributes for all images. JS replaces the div with image tag at appropriate size. Lots of reflow on the page. Also could impact browser ability to pre-parse image downloads, but that may be a general problem for all of these techniques.y
Responsive Images, .htaccessmobile size imagemobile size imageNo issues if using data src method. Likely problems using url parameters.n/aDual license GPL and MITGreat resource to examine different techniques and approaches. Confusing because there are four different branches that reflect Scott’s experimentations over the last nine months. At first glance, it isn’t clear which direction is the best approach (the answer is cookies + data attributes). Indisputably the best tested client solution as it is in use on the Boston Globe Redesign.yyyyyy
Responsive images using cookies, PHPdesktop size imagedesktop size imageImages all have the same filename and path. This will likely be a problem.n/aUnclear, sample codeFallback is desktop instead of mobile which would be preferred. Cookie being set is very simple though which is nice. Comments on the blog post are very good.yy
responsive-images-alt, .htaccessmobile size imagemobile size imageMay have problems with CDNs and proxy servers because all image sizes are at same url with the differences coming on url parameters.n/aUnclear, but based on Jehl’s script so likely MIT or GPLPrimary difference in this script is that there is an assumption of an enforced file system structure for images. This allows the code to be smaller because the server doesn’t have to be told where to look for the file. It just has to be told that it *should* look.yyyy
Adaptive Imageshttp://adaptive-images.comWorksYesNoYesJavascript, .htaccess, PHPdesktop size imagedesktop size imageMay have problems with CDNs and proxy servers because all image sizes are at same url.n/aCreative CommonsThis is admirable for how easy it would be for people to continue to use their current processes. The script takes care of the heavy lifting. The problems come from edge cases like no cookies or no javascript causing the desktop images to download on mobile.yy
Responsive images and tinySrc, but requires redirectYesJavascript, .htaccess, web serviceexample uses base tag because it is based on older version of Jehl’s responsive images. It would probably need to change to use cookies. If change made, clients without cookies would get mobile size imageEach image has unique url. No problem with caching or CDNs.n/aDual license GPL and MITThere is an extra redirect caused by the server redirecting the request to Sencha tinysrc. This could be avoided by using a reverse proxy so the extra request happens on the backend between servers. Plus that would give the web server control over the connection to Sencha for performance tuning or even local caches of images that Sencha has resized.yy
Context aware responsive images gif before image loadsYesYesNoJavascript, .htaccessmobile size imagemobile size imageUrl parameter issuesn/aBased on Responsive Images so MIT or GPLThe key addition is explained best by Andy Hume here: The size of the screen may matter less than the size the image will be used in the page. This tries to get away from screen size. The code itself was based off an earlier branch of Responsive Images which required additional requests to a blank gif. The code could be modified to use cookies and get rid of the extra requests.yyy
Responsive images with PHP and jQuery gif shows up before full imageYesYes, many.YesJavascript, PHPn/amobile size imageEverything gets routed through a single php file with URL parameters. Could be problematic with proxies and CDNs.n/aMITDynamic image sizes but appears to lack breakpoints. As you resize the browser window, lots of additional http requests to the server to see if it needs to get a new image size. Associated with the skeleton RWD boilerplate.yy
Responsive images without javascript First load will be full size images until cookie is set.YesYesNomediaqueries, .htaccess, phpmobile size imagen/aMay have problems with CDNs and proxy servers because all image sizes are at same url with the differences coming on url size imageJSON licenseMore of a proof of concept than an actual solution. It is a “purely academic pursuit of knowledge” technique, not a front line one. The interesting part of this is that the server finds out about the size of the client via a mediaquery that requests a img that is actually a php script. It is an interesting idea. The author acknowledges the race conditions on the first load, but it does make me wonder if this technique might be useful to get some data to the server. Can’t think of a time I would need to do this when I couldn’t just use JS, but it is intriguing.
Yiibu Profile Technique, PHP, Device detctionmobile size imagemobile size imageNo issuesn/aCreative CommonsThe slide deck from bdconf describes how Bryan and Stephanie have been using device detection, tacit knowledge, and client detection in combination to deliver the best possible image along with a bunch of other assets. This is the technique they used on Bryan has some earlier code on GitHub, but they haven’t released a recent version. The main reason for including this is that like the Boston Globe, it is probably the best thought out example dealing with a lot edge cases and potential pitfalls.
Responsive images right now size imagen/aNo issuesmobile size imageUnclearA div surrounds an image tag pointing at a small. The div has a style attribute containing a background image for the large version of the image. The div also has a class on it indicating that it is a responsive image. Media queries are then used to change the display based on screen width. Unfortunately, this technique results in multiple downloads.
Sheet 1
Main menu