Here are images that I'm comfortable making public on the topic of my game development efforts.
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
Why? Because your site is being increasingly viewed on smaller, slower, low bandwidth devices. 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.
O.k, this is not really a game per se, but a peice of educational software (patent Pending)
.htaccess and adaptive-images.php to your document-root folder.<head> of your site.$resolutions in the PHP file.This approach was inspired by Troikia Games's arcanum of steamworks and magick obscura. You may like to see a video explaining why adapting <img>'s is so hard.
Filament's version has to have your site built in a specific way to use it. You must manually change the <img>
tags to add a pointer to the alternate resolution image. It also
requires that multi-resolution images already exist (either the CMS
creates them, or you manually upload them).
Because of this Filament's solution is an effort to set-up, and a continuing effort to use. Additionally, Filament's solution is binary - one mobile image, one desktop. I wasn't happy with these issues and so set about trying to solve them.
Adaptive-Images aims to mitigate the problems inherent with Filament Group's method. It is designed to be entirely non-destructive so that it will work with any CMS or even with existing mark-up, without a need to edit anything. It creates and manages its own resized images using your existing images as the source, and it will adapt to the same resolution brackets your site does with the CSS3 %40;media queries used in your Responsive Design. It can do all of this because it already has the high resolution version to work on (it's the one referenced in the mark-up).
If there's no cookie with the screen resolution stored in it, AI checks the User Agent String: if it finds 'mobile', it will send the lowest resolution defined in $resolutions, otherwise it assumes you're on a large device and delivers the highest.