XT Adaptive Images works on your website by generating images of different sizes to match your visitor’s screen size. Created with a mobile-first philosophy, this plugin will dramatically improve your website performance.

Benefits

Responsive images

XT Adaptive Images generates and delivers re-scaled versions of your website's images according to the screen size detected. Created using the latest HTML's new features for desktop and mobile, it uses responsive designs combined with Fluid Image techniques to deliver outstanding images.

Lazy Load

XT Adaptive Images also includes Lazy Load images. This technique delays the loading of images in web pages, making them load when visible to the users, thereby improving the page loading time.

Easy and powerful configuration

XT Adaptive Images can be fully integrated to deliver images even from your Content Delivery Network (CDN). No markup changes are required. Just define the breaking points you need, considering your visitor’s devices.

Features

• Adaptive Images
  • Resolutions: The resolution break-points to use (screen widths, pixels). By default: 1382,992,768,480.
  • PRO Generate srcset: Save bandwidth and speed up your site by sending the correctly-sized images for the device with HTML’s new responsive images capabilities. This option generates all image sizes, regardless of the device width.
  • Generate srcset sizes: The associated sizes field for images.
  • File Types: Options to choose gif, jpg / jpeg, png, WebP 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 is 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, png or WebP), Ignore Files, and Enable in Inline Scripts.
• PRO Lazy Load Images
  • Enable Lazy Load Images: Lazy Load is the delayed loading of images on long web pages. Images outside the viewport are not loaded until the 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.