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:
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).
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.
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!
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).
Here the image sizes of the generated adaptive images (the photo on the left side):
|Res. (in px)||Qual.||Size (in KB)|
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.
Viewed best with Google Chrome.
And more innovative stuff is cooking :-) so watch out for things to come on the LiteSite website.