Blog
Browsing all articles tagged with Adaptive Images
6
Posted October 2, 2011 in CSS Tricks by Bhargav Anadkat

Adaptive Images – Deliver small images to small devices

A drop-in solution that automatically creates, caches, and delivers device-appropriate versions of your website’s images. No mark-up changes needed. Adaptive Images is intended for use with Responsive Designs and to be combined with Fluid Image techniques.

Project from Matt Wilcox for serving the right images to the right devices (i.e. small images to small browser windows, large images to large browser windows). Small browser windows, regardless of bandwidth considerations, shouldn’t get a giant image scaled down they should get an image just the size they need it.

Why Adaptive Images ? Because your site is being increasingly viewed on smaller, slower, low bandwidth devices. Your desktop-centric images load slowly, cause UI lag, and cost you and your visitors un-necessary bandwidth and money.

Features

  • Works on your existing site
  • Requires no mark-up changes
  • Device agnostic
  • Mobile-first philosophy
  • Easy & powerful customisations
  • Up and running within minutes

Set-up

  • Add .htaccess and adaptive-images.php to your root folder
  • Create a writable directory called ai-cache
  • Add one line of JavaScript into the of your site

Requirements

  • Apache 2
  • PHP 5.x
  • GD lib *
  • * Normally a default with PHP

    • Download AND Demo

    http://adaptive-images.com/