Adaptive Images
Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.
How it works
Adaptive Images does a number of things depending on the scenario the script has to handle but here’s a basic overview of what happens when you load a page:
- The HTML starts to load in the browser and a snippet of JS in the
<head>writes a session cookie, storing the visitor’s screen size in pixels. - The browser then encounters an
<img>tag and sends a request to the server for that image. It also sends the cookie, because that’s how browsers work. - Apache receives the request for the image and immediately has a look in the website’s
.htaccessfile, to see if there are any special instructions for serving files. - There are! The
.htaccesssays “Dear server, any request you get for a JPG, GIF, or PNG file please send to theadaptive-images.phpfile instead.”
The PHP file then does some intelligent thinking which can cover a number of scenario’s but I’ll illustrate one path that can happen:
- The PHP file looks for a cookie and finds that the user has a maximum screen size of 480px.
- It compares the cookie value with all
$resolutionsizes that were configured, and decides which matches best. In this case, an image maxing out at 480px wide. - It then has a look inside the
/ai-cache/480/folder to see if a rescaled image already exists. - We’ll pretend it doesn’t – the PHP then goes to the actual requested URI to find the original file.
- It checks the image width. If that’s smaller than the user’s screen width it sends the image.
- If it’s larger, the PHP creates a down-scaled copy and saves that into the
/ai-cache/480/folder ready for the next time it’s needed, and sends it to the user.
