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.

>>> >> Breaking News - XT Adaptive Images 4.0.0 << <<<<

• NEW: Support of HTML's new responsive image attributes: srcset and sizes
• NEW: Compatibility with Joomla 4

The plugin implements:

• Adaptive Images, to generate images of different sizes to match the desktop and mobile resolutions.
• CDN Integration, to deliver images from your CDN.

Benefits

• Works on your existing site
• Incorporates the latest HTML's new features for desktop and mobile
• 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)

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.

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.

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.
• 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.

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.

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!