Adaptive Images

Matt Wilcox stellt eine weitere Methode vor Bilder automatisch an das Gerät anzupassen auf dem der User die Webseite sehen will.

Automatically adapts your existing HTML images for mobile devices. No mark-up changes needed. Just drop it in and forget about it.
The concept is fairly simple and works like this:

  • On page load a tiny bit of JavaScript in the <head> checks the size of the browser window and stores a cookie that contains the browser width.
  • A .htaccess rule on the server intercepts any requests for .jpg .gif or .png files which are not inside protected directories.
  • Matching requests are sent to a PHP script which checks to see if an appropriately sized cached version exists.