In line with one of our objectives toward improving WordPress performance and ease of use, we have developed anexclusive feature designed save you the time and trouble of having to define a size every time you add an image to your content.
All you need to do is upload all of your images using the highest available resolution. Uncode Adaptive Images system will do the rest, and deliver images with the correct resolution to every browser and device (even retina). This will dramatically improve mobile device performance without compromising image quality.
This feature is activated when the theme is installed. You can however deactivate it if you wish, in the Theme Options > Performance options.
You can also use these options to monitor how much disk space this function is using, and if you choose, you can erase all recently created images without erasing the original version.
You will also notice the text area image sizes range features several values. These values represent the breakpoints the adaptive image system is using to create versions of your images. These values have been optimized to work in the best way possible, so only change them if you are confident in what you are doing (the values must be comma separated).
We recommend optimizing your images before uploading them as shown in this link.
Asynchronous adaptive images
To increase the already good performance of Uncode even further, from this version we have implemented a new great feature called Asynchronous adaptive image. With this option you will improve your pages loading time and all the ratings from website metrics tools (PageSpeed, GTMetrix etc.)
To activate this option you need to go to Theme Options > Performance and set the Asynchronous adaptive image option.
When activated this function all the images will be first loaded with a very low resolution to reduce dramatically the loading time of your page. Once the page is loaded the images will be replaced by hi-res image.
This function has to be activated if you are using page caching system (WP3 Total Cache, Varnish, etc).
Delete all images
This option, when chosen, deletes all images. It states your current total usage and storage of images being used by the adaptive image system. By clicking this button, you will delete all images and free space. Note that this gives you the option to erase all images you have created, without erasing the original version.
These are options to make mobile performance more efficient:
- Use Current Mobile Orientation Width: Activate to use the current mobile orientation width (portrait or landscape) instead of the max device's width (landscape).
- Limit Device Density: Activate to limit the pixel density to 2 when generating the most appropriate image for high pixel density displays.
- If you activate the following options you can also use these Image Sizes Range
258,375,414,516,750,828,1032,1440,2064,2880, note that upon request, Uncode will create more versions of Adaptive Images on your server.
This option, when selected, adjusts image compression quality. Simply drag the slider to specify the preferred compression. The specified compression, is the quality of your images calculated as a percentage. As an image is compressed, its quality is lessened. Image compression can be useful however in high-density websites.
Image size range
A third adaptive image option defines image size. When Uncode is activated, this option is already filled with values of all the breakpoints the adaptive image system is using to create versions of your images. To add your own sizes, simply enter your preferred values, separated by commas, after you click save all, the images will adapt to the new sizes.
Important: These values for the image sizes have been fine tuned to work in the best way possible. Make sure you know what you are doing if you intend to change them.
By activating the option Apache Server Configs inside Theme Options > Performance you can use the HTML5 boilerplate for the file .htaccess. This will add a collection of boilerplate configurations that can help your server improve the web site’s performance and security, while also ensuring that resources are served with the correct content type, and are accessible.
Important: Should you experience a malfunction of any kind after having activated this option, you can resolve the problem this way: Find the file .htaccess inside the root folder of WordPress and remove the content between the tags # BEGIN HTML5 Boilerplate and # END HTML5 Boilerplate. Save the file, return to the Performance options, deactivate it, and save the options.
Images optimization notes
Before you upload your next photo, logo, or image to your media library, think about the quality and file size of the image. You don’t want to make the mistake of uploading enormous files. Your customers won’t wait around for that picture to load and leave your site. The secret just properly save all your images for web, before uploading.
Photoshop Save for Web
The Photoshop “Save for Web” tool is a simple and easy way to prepare your JPEG files for the web, helping with the trade-off between file size and image quality. In Photoshop editor File > Save for Web.
ImageOptim + JPEGmini
If you want to super-optimize your images the combination of these two tools is killer:
- ImageOptim is a free app that makes images take up less disk space and load faster, without sacrificing quality: https://imageoptim.com/
- JPEGmini reduces image size by up to 80% without compromising quality: http://www.jpegmini.com/
Optimise for speed & performance
If you are interested in performance tips please follow this article: