In line with one of our objectives toward improving WordPress performance and ease of use, we have developed an exclusive 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 new created ‘thumbnail’ 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 Uncode → 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 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 the adaptive image fitting the visitor device.

This function has to be activated if you are using page caching system (WP3 Total Cache, Varnish, etc).

Optimize images before upload

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/

Optimize the Adaptive Images

Once your images have been uploaded to your server you can further optimize them thanks to the use of specific image plugins like ShortPixel or the free EWWW Image Optimizer. Before optimizing the images please visit your pages with a desktop computer and a mobile device thus to generate different formats of the Adaptive Images. Otherwise, wait a few days of traffic.

ShortPixel

If you optimize your images with ShortPixel, please activate the option Theme Options → Performance → Register Metadata available from Uncode 2.2. After activating this option, we recommend that you delete the Adaptive Images that have been created, using the command Theme Options → Performance → Delete all AI Images. In this way, they will be regenerated again with the Metadata useful for the operation of the ShortPixel plugin.

EWWW Image Optimizer

If, instead you use the EWWW Image Optimizer plugin, please specify the full path of your image on your server in EWWW Image Optimizer → Advanced Settings → Folders to Optimize, ex:

/var/www/html/uncode/wp-content/uploads/...

Image metadata

In order to generate Adaptive Images, under the hood, Uncode asks WordPress to build ‘thumbnail’ version of the images. For the images creation WordPress utilises images processing library like GD Image Library or ImageMagick, which should be provided by the server. Depending on server configuration, this plugins may lead to undesirable effect that the image metadatas such as copyright information, advanced color informations are stripped from
the images. If you encounter this issue, please contact your hosting and ask to install these libraries required by WordPress.