Adaptive ImagesXT Adaptive Images for Joomla! is the best extension to generate responsive images. The plugin implements:

  • Adaptive Images, to generate images of different sizes to match the desktop and mobile resolutions.
  • HTML's new responsive image attributes, to support the latest HTML's new responsive image attributes.
  • Lazy Load, to delay the photos load until it is finally required when the user visits a page.
  • CDN Integration, to deliver images from your CDN.

$ 29
XT Adaptive Images PRO - 6-month Subscription
Buy Now!

$ 52
XT Adaptive Images PRO - 1 year
Buy Now!

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).
Looking for an installation / personalization service? Our Installation Service service is the product of dedication, experience, knowledge and a customer-focused mindset.

Benefits

  • Works on your existing site
  • Incorporates the latest HTML's new features for desktop and mobile
  • Requires no markup changes
  • Device agnostic
  • Mobile-first philosophy
  • Easy & powerful customisations
  • Faster Page Loads & Reduced Server Load, easy integration with a Content Delivery Network (CDN)

La Gioconda - XT Adaptive Images

Adaptive Images

XT Adaptive Images for Joomla! is a port of adaptive-images.com.

The Adaptive Images technique 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.

By default, the basic HTML IMG tag has a single SRC attribute with the associated image file. XT Adaptive Images implements several techniques to generate and deliver the right images for each device screen.

Lazy Load

XT Adaptive Images also includes images Lazy Load. This technique delays loading of images in long web pages. Images outside of viewport are loaded when the user scrolls to them. The plugin packs two libraries:

HTML's new responsive image attributes, srcset and sizes

Save bandwidth and speed up your site by sending the correctly-sized images to the device with HTML’s new responsive images capabilities. This option generates all image sizes, regardless of the device width.

The Adaptive Images is a good first answer to generate images of adequate approximate size, based on the screen dimension. Since the browser calculates the final size of the required image, the srcset and sizes attributes have been added to the HTML standard. In this way, the browser can select and load the perfect image.

XT Adaptive Images processes the defined images, with the basic attributes, by the standard content editor; and generates the new srcset and sizes attributes. No need for content workflow or markup changes.

For more information about the new HTML's new features:

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.

Mona Lisa - XT Adaptive Images

La Gioconda - XT Adaptive Images

Leonardo da Vinci - presumed self-portrait - XT Adaptive Images

XT Adaptive Images Versions

  • Free
    For community sites
  • $ 0
  • Adaptive Images
  • 1 CDN
  • -
  • -
  • Fixed cache path
    media/xt-adaptive-images
  • Community Forum
  • Pro
    For commercial usage
  • $ 29
  • Adaptive Images
  • Up to 5 CDNs
  • SSL Support
  • Lazy Load Images
  • Custom Cache Path
    any directory
  • Unlimited Tickets
  • Buy Now!

Features

  • Adaptive Images
    • Resolutions: The resolution break-points to use (screen widths, in pixels). By default: 1382,992,768,480.
    • PRO Generate srcset: Save bandwidth and speed up your site by sending the correctly-sized images to the device with HTML’s new responsive images capabilities. This option generates all image sizes, regardless of the device width.
      • PRO Generate srcset sizes: The associated sizes field for 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 javascript.
    • 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.
    • Lazy Load Library
      • jQuery Lazy Load (1.9.5)
      • Vanilla Lazy Load (2.0.0-beta.2)

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.

Right-sizing Images - Mixing Responsive and Adaptive Techniques

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 Lazy Load

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.

Prices shown without VAT. For European customers, the EU requires to charge VAT to downloadable purchases by non-business consumers located in the EU. Business customers are able to waive VAT charges by providing a valid VAT ID at time of purchase.

Join the Club!

Access and support services to all Extly's extensions for 1-Year. The Extly Club is your source for all of our extensions.

Join Now