Once XT Adaptive Images for Joomla plugin is installed and enabled, images will be resized according to the resolutions and stored into the cache path; and finally image filenames are replaced in the page to the new generated files. If there is a configurated CDN, the new images are defined to be loaded from it.
By default, resolutions are 1382,992,768,480, these are the break-points to use (screen widths, in pixels). The cache path is, by default, media/media/xt-adaptive-images.
XT Adaptive Images for Joomla works in a similar way 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 is no need to configure website's .htaccess file (hence no difference between Apache or nginx configuration).
XT Adaptive Images for Joomla does a number of things depending on the scenario the script has to handle but here is a basic overview of what happens when you load a page:
Plugin resizes images according to breaking points and accessing devices. In addition, you page design is independent than the generated files.
For example, an image will be resized to 480px and stored in the folder, according to the visiting small-screen device. If you create a Page where the same image has to be shown to fit 960px-wide design, then browser will 2X scale the image.
Finally, device resolution plays a role that can increase the image width requirements. Here you can check how the new width is calculated: https://github.com/MattWilcox/Adaptive-Images/blob/master/adaptive-images.php#L252
Set breakpoints to match your CSS's Media Queries (they must also match your device-dependent cache configuration). By default, 1382, 992, 768, 480. If you are doing a responsive design then you ought to make these values the same as your CSS's. You can have as many or as few as you'd like, e.g., 1200, 768, 480.
As a handy configuration, if you define one resolution, e.g., 480, all images will be restricted to 480px.
Change the name and location of the media/xt-adaptive-images folder. This path is relative to the Joomla! root.
Quality can be any number from 0 to 100, with 100 being the best (but with largest file-size). Note that you can not control the quality at which GIF or PNG images are saved.
When set to TRUE Adaptive Images will perform a subtle sharpening on any images that it rescales.
You can choose to serve high DPI images to those displays.
A word of caution: such images will look very sharp, but they'll still be pretty big and slow to load.
In addition, XT Adaptive Images has the combined features to allow the integration with a Content Delivery Network (CDN). Hence, once the images are generated into the Cache Path, the CDN Url domain is pre-appended to the images in the page.
A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance. CDNs serve a large fraction of the Internet content today, including web objects (text, graphics and scripts), downloadable objects (media files, software, documents), applications (e-commerce, portals), live streaming media, on-demand streaming media, and social networks. Reference: Content delivery network, from Wikipedia.
If you need to exclude an area from the CDN, you can define it with the following tags:
The root of your website that you have connected to your CDN server.
The domain of your CDN Server.
Select to also handle https urls (secure urls).
Up to 5 additional CDN domains to distribute files according to associated File Types.
By default, Joomla generates a single cache for the whole site, regardless of the client device.
Nowadays, Joomla is increasingly generating HTML output where mobile differs from other devices. In this case, a device-specific cache is required.
Additionally, Joomla 3.5.1 has included a new alternative for Platform Specific Caching, this new feature provides a similar functionality:
Copyright ©2007-2018 Extly, CB - All Rights Reserved.