Web Depot: Adapting Images To Screens Large And Small

Stephen Yagielowicz

Adaptive Images, created by Matt Wilcox, is a system for delivering small images to small devices by detecting a visitor’s screen size and then automatically creating, caching and delivering device appropriate re-scaled versions of the web page’s embedded HTML images. Using this system requires no markup changes, and is fully compatible with responsive designs and fluid images.

“Your site is being increasingly viewed on smaller, slower, low bandwidth devices,” Wilcox explains. “On those devices your desktop-centric images load slowly, cause UI lag, and cost you and your visitors’ un-necessary bandwidth and money. Adaptive Images fixes that.”

Wilcox says that Adaptive Images is device agnostic, developed with a mobile-first philosophy and works on any existing site. It offers easy and powerful customizations and can be up and running in minutes by adding .htaccess commands and the adaptive-images.php file to the document-root folder, a single line of JavaScript into the site’ssection and specifying the chosen CSS Media Query values.