XT Adaptive Images User's Guide
Overview and Quick Setup
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.
- Overview and Quick Setup
- How it works
- I visit the site with a Galaxy S5 phone, but resized images are not generated or displayed, why?
- Basic Configuration
- CDN Configuration
- PRO Extra CDN Sets
- Platform Specific Caching
How it works
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:
- The HTML starts to load in the browser and a snippet of JS in the writes a session cookie, storing the visitor's screen size in pixels.
- Joomla generates each page, and calls XT Adaptive Images plugin (onAfterRender).
- XT Adaptive Images parses the page looking for images, and calls a modified version of adaptive-images.com script.
- If no image is generated, the image is not modified.
- If an adapted image is generate, the new image replaced the original image.
- Additionally, if there is at least one CDN is configured, the CDN Url is appended to load the image from the new location.
I visit the site with a Galaxy S5 phone, but resized images are not generated or displayed, why?
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.
PRO Cache Path
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.
Detect Retina displays
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.
PRO Handle HTTPS urls
Select to also handle https urls (secure urls).
PRO Extra CDN Sets
Up to 5 additional CDN domains to distribute files according to associated File Types.
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.
Platform Specific Caching
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.
Joomla 3.5.1 (or superior) Configuration
Additionally, Joomla 3.5.1 has included a new alternative for Platform Specific Caching, this new feature provides a similar functionality:
- This is still a PHP solution.
- Requires Joomla! 😃
- A minor but interesting Cookie setting issue