Adaptive Images is a script that easily solves the whole problem of scaling images for responsive Website design.
It detects your visitor’s screen size & automatically generates & delivers appropriately scaled versions of embedded HTML images anywhere on your website.
Now there are many ways, both server side & client based, that have used by developers working on providing responsive Website design.
The problem, of course, is that it gets insanely complex depending on the size & type of Site. Not to mention the fact that after working hard to enable detection of desktops, smartphones, Tablets & other types of existing devices, the design is obsolete whenever a new device to access Websites pops up next in the market.
This is where Adaptive Images solves the problem easily by eliminating all the hard work. All you have to do is add one htaccess file & one PHP file to your Web server, & add a single line of javascript into the head tag in your Webpage index template.
The script swings into action anytime a visitor accesses your Website. It detects the device, picks up the embedded HTML images on the page, creates the required re-scaled images matching the device, caches them & delivers them for display in the browser.
Adaptive Images is device agnostic & implements a mobile-1st philosophy, which means it works nicely on devices with small screens with low bandwidths where it takes time to load a page.
Usually, a desktop-centric site that is loading images that are too big for a mobile device with a slow connection will lead to UI lag, which in turn means visitors lose interest before the page loads & you lose a lot of potential customers.
Adaptive Images handles such problems without having to offer a simplistic Website to other users with larger devices & faster connections. This is one of the core problems that you have to tackle when creating a responsive Website design.
The installation & use is easy enough, but you do have the ability to customize it a lot more if you want more features. For instance, you can change the quality of the JPG, Gif & PNG images generated by the script on a scale of 0 to 100, with 100 being the best.
You can also optionally sharpen re-scaled images & set the time value for how long you want the browser to cache the generated images.
Adaptive Images was developed by web developer Matt Wilcox, & is licensed under a Creative Commons Attribution 3.0 Unported License.
You can see all the different versions on the download page.
Image Credit: Github/Adaptive Images
Advertising Message
