XT Adaptive Images for Responsive Designs

XT Adaptive Images for Joomla! is a port of adaptive-images.com and Lazy Load scripts for Joomla!

Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device-appropriate re-scaled versions of your web page's embedded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.

Additionally, XT Adaptive Images PRO now includes Images Lazy Load. Lazy Load delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them.

Requirements - GNU GPL v3.0 License - Pre-Sales FAQ - Installation Services
If you are renewing, please log in to your account before the purchase and remember to apply the loyalty coupon (20% Off).

Benefits

• Works on your existing site
• Requires no mark-up changes
• Device agnostic
• Mobile-first philosophy
• Easy & powerful customisations
• Faster Page Loads & Reduced Server Load, easy integration with a Content Delivery Network (CDN)

XT Adaptive Images works similarly to adaptive-images.com. However, as the extension is developed for Joomla!, some limitations have been resolved. It does support Content Delivery Networks, and there's no need to configure website's .htaccess file (hence no difference between Apache or nginx configuration), images are modified in the generated page.

Examples & Demo

The images on our site are processed with XT Adaptive Images. On a Desktop, they are delivered from our Content Delivery Network (CDN) with no modification. On Tablets, Phones, or Phablets, they are also delivered from the CDN, but images are modified to fit the screen view.

XT Adaptive Images Versions

Acknowledgements

Right-sizing Images - Mixing Responsive and Adaptive Techniques

This extension is based on a presentation given at J and Beyond 2014, Mixing Responsive and Adaptive Techniques, by Duke Speer.

Being Responsive is all the rage in web design, but how do you take images uploaded by users or migrated from an old Joomla! 1.5 site and send the just-right number of pixels to a smaller device without consuming excessive bandwidth?

Max-width=100% is a great one-line solution to make images fit into your responsive layout, but there is no point sending a thousand pixels of image to a narrow device screen. This talk will explore the top four methods of optimizing image delivery for Joomla! websites to improve time to first page, including one method that will work with migrated data without changing the existing image links in imported articles.

About Adaptive Images

Adaptive Images by Matt Wilcox is licensed under a Creative Commons Attribution 3.0 Unported License. This Joomla! extension would not be possible without this amazing piece of code. Thank you Matt!

About Adaptive Images

Lazy Load Plugin for jQuery is inspired by YUI ImageLoader Utility by Matt Mlinac. All code licensed under the MIT License. In other words you are basically free to do whatever you want. Just don't remove my name from the source.

Features

• Adaptive Images
  • Resolutions: The resolution break-points to use (screen widths, in pixels). By default: 1382,992,768,480.
  • File Types: Options to choose gif, jpg / jpeg, or png integration.
  • Ignore Files: A comma separated list of (part of) path/file names to ignore.
  • Enable in Inline Scripts: Enable to convert the media file URLs found in inline javascripts.
  • JPG Quality: The quality of any generated JPGs on a scale of 0 to 100.
  • Sharpen: Shrinking images can blur details, perform a sharpen on re-scaled images?
  • Detect Retina displays: You can choose to serve high DPI images to those displays.
  • PRO Cache Path: Path to the directory where resized images will be stored. By default, media/xt-adaptive-images.
• CDN Configuration
  • Site Root: The root of your website that you have connected to your CDN server.
  • CDN Domain: The domain of your CDN Server.
  • PRO Handle HTTPS urls: Select to also handle https urls (secure urls)
• PRO Extra CDN Sets
  • Options to configure up to 5 extra CDN Sets, available features for each CDN: Site Root, CDN Domain, Handle HTTPS urls, File Types (gif, jpg / jpeg, or png), Ignore Files, and Enable in Inline Scripts.
• PRO Lazy Load Images
  • Enable Lazy Load Images: Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them.
  • Image class: Class to detect images to be lazy loaded. By default, xt-lazy-img. You can define more than one, for example: img-polaroid,xt-lazy-img.