LiteSite AdaptiPic - Clown Car Technique on Steroids

An innovative and practicable adaptive images technique for responsive designs

Clown car image

Slowly resize your browser window and see how seamlessly responsive design and adaptive images are "cooperating". Notice also that the images for the 2 smallest breakpoints are clipped! AdaptiPic solves the "art direction problem" perfectly. The here used images are real HTML objects which have a semantic relevance and should get indexed by search engines (in the opposite to CSS background images or JavaScript based solutions which can be terrible for SEO)! The here used PHP based dynamic image loading technique doesn't require any client-side scripting :-) - so no JavaScript here - although the images get loaded dynamically (on demand) on the client-side. Do you think that this is not possible? Continue reading!!

How AdaptiPic works can be seen best if you open in the Google Chrome Inspector the tab "Network". Make sure the Inspector window is tall enough to see all image files. Then reload the web-page (use the function key F5). Then resize the browser window and watch in the Inspector which additional image files get dynamically downloaded (without JavaScript). Reloading the page (with F5) resets always the loaded files to the currently required size and removes all other images. This mode can be seen as the standard form of usage (website visitors do not change every second the browser window size) which allows us to reduce the amount of downloaded data (e.g. on mobile devices with smaller screens and/or retina displays). The for web-developers great advantage is the automatic creation of the adaptive images for all breakpoints based on one high resolution source file. Using this technology is not only reducing the downloaded data volume of responsive designs, it is also easy to understand and to manage and works in a 100% reliable manner in any HTML web-page. All generated images should be cached (caching is not active on this demo page). Caching makes this adaptive images solution quite fast (in production mode).

Static breakpoints - typically used in other adaptive image techniques for the main content - won't work in side-columns or small grid objects. Ignoring to physically shrink files with smaller dimensions means losing a lot of optimization potential. LiteSite's AdaptiPic technique makes it easy to "treat" EVERY picture independent from the image position, the image dimension and the web-page layout breakpoints (media queries). That means that you can define for each image individually the adaptive breakpoints (and the compression rate). You can also define the aspect ratio and how the image fills an element.

The adaptive size ranges between breakpoints are "filled" with browser based image scaling. That way the fluid responsive design and the dynamic downloading of the adpative images are working "hand in hand". High resolution sizes can get "tweaked", e.g. for Retina displays, where sending high resolution images with a standard JPEG compression rate would be a counterproductive bandwidth overkill.

The images for all adaptive size ranges (e.g. from 960px to 1440px) get created automatically by the PHP script. BUT the browser is downloading these images ONLY if required. This works dynamically (although there is no active scripting!!) how you could see during resizing the browser window. This technique was tested with Internet Explorer 10, Firefox, Google Chrome and Opera for Android but other Webkit browsers (e. g. Safari) should also work. IE 8 is not supported (but there exists a safe fall-back which you can test with this demo page). IE 9 wasn't tested yet. More details will get published soon in an article.

Once the images got created, the PHP script is not longer required. Usually it won't hurt to use the PHP based call to the images but for high traffic sites web-developers may want to switch to the pure SVG file which got automatically created next to the down-sized images. If the validating pure SVG version is used for production sites (what is recommended) the PHP script still represents a great development tool for innovative web-developers to generate all required files in a simple, fast, transparent and convenient manner. The production site can then run directly on the generated SVG files (instead of using PHP to create the delivered SVG file "on-the-fly"). Creating and using adaptive images can't be easier and comes quite close to respecting all relevant web-standards (especially when the WAI-ARIA "alt" attribute substitute "aria-label" gets applied in a semantically correct manner; check the HTML page source code and/or the manual for more details).

Check out this adaptive image in a separate tab (without surrounding web-page). Maximize the browser window. Since the biggest available image has only 512 px it looks blurry. In the browser adress bar you should see:
http://litesite.org/holygrail/stage2/images/adaptipic.php?src=adaptive/bridge.jpg&b=100,175,250,420,512&psc=1&dev=2
Add now another breakpoint (in the address bar), so e.g. "1024" behind the "512". Separate the new entry by a comma. Then refresh the page. The image disappears. That indicates that the new image was created. Press "F5" to reload the page - and voila, you have created a new SVG file (check the page source) and a new image file with a higher resolution. Minimize now the browser window down to e.g. a 200px width. Notice what happens. Isn't that cool? Until we get an HTML picture element AdaptiPic enriches responsive designs with true adaptive images (based on the SVG Clown Car Technique).

Some auto-generated pure image demos:

AdaptiPic Beta Release Manual

This is a beta release. If you want to contribute to this project please contact me for the beta release download link. There is more testing required (especially on mobile devices regarding the portrait orientation support and SEO behavior which is always a concern with such solutions). Please report errors, proposals and comments back to me to support the AdaptiPic project. Thank you.

A known issue in this release is that some browsers (e.g. Firefox) are loading always the smallest image additionally to the image with the correct size. The next update will fix this erratic behavior. This is basically a browser bug but can get circumvented with a restructuring of the auto-generated SVG code.

The AdaptiPic script is based on a concept published by Estelle Weyl in The Smashing Magazine.

The photos are licensed under the Creative Commons license (CC BY 2.0) by Barbara Eckstein, Tsuda, Lee Bolton and Harald Engels.

Even here!

Create adaptive breakpoints individually for each image (object) and generate automatically optimized adaptive images on-the-fly. The regarding size and quality adapted (and optimized) images get dynamically loaded in dependence of their parent element's width!

Colorful balloons

Slowly resize the browser window and notice the perfect "art direction" effect in the ballons photo when the width of the parent column changes. The breakpoints are different than in the clown car image (on the left).

Image Sizes (clowncar.jpg)

Here the image sizes of the generated adaptive images (the photo on the left side):

Res. (in px) Qual. Size (in KB)
284 90 27
426 85 43
960 80 121
1440 75 209
2160 70 341
2160
(Retina)
35 190
2160
(Original)
98 4,100
(4.1 MB)

The automatically generated images are compressed based on the default settings or by using the quality attributes which are defined in the URL query of the image creation script. The quality can get defined individually for each image and resolution step. It is obvious that using this technique helps to reduce the file size for devices with smaller screens.

Features

  • Great example of Responsive Web Design combined with a Server Side Solution (in development mode)
  • Creating the image object HTML code is suffient to generate anything else (all scaled images, SVG file with all embedded media queries etc.)
  • Works with standard HTML pages (index.html instead of index.php). The PHP files can be used as a "black box".
  • Unlimited number of breakpoints (defined individually for each image)
  • Automatic creation of all down-sized image files (based on one full-size master image) with variable breakpoints and compression rate (JPEG)
  • Detection of missing down-sized files => triggers automatic file creation
  • Automatic creation of a corresponding SVG file which can be used alternatively to the PHP file (if using a PHP file call for the production site is unwanted)
  • Variable, image specific definition of the size mode (e.g.: "auto", "100%", "contain", "cover")
  • Each image can get zoomed and the magnifying viewport can get moved to one of 9 different image areas (virtual cropping)
  • Additionally each adaptive image can get cropped physically for avoiding a loss of detail visibility (perfect solution of the "art direction problem")
  • SVG image objects should get indexed by search engines (help me to verify this assumption)
  • Images and PHP hook get cached in the browser (in production mode)
  • Transparent solution with clean HTML source code
  • Retina display support
  • Semantically correct WAI-ARIA substitution for the lack of an "alt" attribute support in "object" elements (for accessibility)
  • Runs fast with very little server load
  • Predictable results in all modern browsers (no IE 8 support, but a fall-back exists for old IE's and Android 2.3)
  • The fall-back for the most important non SVG capable browsers is easy to implement
  • 100% safe long-term solution (most script based solutions don't provide long-term stability and compatibility)
  • No JavaScript required (only for the Android 2.3 fall-back)
  • By far the easiest, most flexible, and most robust solution to create adaptive images for responsive design

Viewed best with Google Chrome.

You want more cool projects? Check this out or take a look to the CSS Grid Generator.

And more innovative stuff is cooking :-) so watch out for things to come on the LiteSite website.