ImageEngine WordPress Plugin

ImageEngine WordPress Plugin

ImageEngine wordpress plugin

Our recent release of the image optimization service ImageEngine has been well received by the web community. The results are amazing. It is not uncommon to see image byte size reduced by 50% and more. Even if ImageEngine already is quite easy to implement, we’ve just made it even easier. For WordPress users, that is. We just launched a WordPress plugin which will automatically optimize your images on your WordPress site. The WP ImageEngine plugin can be downloaded from the WordPress plugin repository, or simply search for “ImageEngine” from the plugin page in your WordPress dashboard.

Features of the ImageEngine WordPress Plugin

ImageEngine alone, has some great features. Including automatic conversion of images to the best image format (WebP in most cases), HTTP/2 support and support for Client Hints and more. These features are of course also available through the WordPress Plugin. The plugin will also automatically enable Client Hints for your images, so no editing of themes or templates is necessary. The only think you have to do is to register for an ImageEngine account. You can choose the full version or the Lite version which comes with limited, but spacious, monthly use.

Supports WordPress 4.4 and Responsive Images

Introduced in WordPress 4.4, the way images are handled has changed. Now, a subset of the Responsive Images is implemented. I say “a subset” because is not a part of the implementation. Nor is type specification. Also, the different sizes provided by WordPress, can be considered sort of “random” at its defaults, and not a perfect fit for your theme probably. Although you can customize this, the ImageEngine plugin help you serve the optimal image according to the device and browsers capabilities.

ImageEngine in WordPress 4.4 looks like this:

    <img class="size-full wp-image-6" 
    src="//try.lite.imgeng.in/w_4000/h_3000/http://example.com/wp-content/uploads/2015/12/GOPR3747.jpg" alt="DCIM103GOPRO" width="4000" height="3000" 
    srcset="//try.lite.imgeng.in/w_300/http://example.com/wp-content/uploads/2015/12/GOPR3747.jpg 300w, 
            //try.lite.imgeng.in/w_768/http://example.com/wp-content/uploads/2015/12/GOPR3747.jpg 768w, 
            //try.lite.imgeng.in/w_1024/http://example.com/wp-content/uploads/2015/12/GOPR3747.jpg 1024w, 
            //try.lite.imgeng.in/w_1200/http://example.com/wp-content/uploads/2015/12/GOPR3747.jpg 1200w" 
    sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px">

Of course the ImageEngine plugin will work (…maybe even better) with the good old image tag too :

<img class="alignright wp-image-435 size-full" 
src="//try.imgeng.in/w_200/h_200/http://example.com/wp-content/uploads/2015/11/img.jpg" 
alt="small" width="200" height="200">

See the Savings

When you have the account, you can log on your account and actually see how much data you save your end users by using ImageEngine. Remember that every byte counts. Globally the average speed you get on mobile devices is 2Mbps. Saving 1 MB image data, will then save your users of 4-5 seconds of download time. Moreover, it is money saved (depending on the plan) for your user, and the page will render faster and use less battery! If you haven’t tried out ImageEngine yet, enter the url of your site in the test tool below, and see the potential optimization:

PHP API

When you install the plugin, it will automatically optimize all images in posts or pages created in WordPress. If you have images in custom templates or in your theme, there is also a PHP API you can use to display images:
This <?php wpie_get_converted_url( $url_to_convert, $options );?> will output //try.lite.imgeng.in/http://example.com/wordpress44/wp-content/uploads/2015/12/GOPR3747.jpg where the parameters are:

  • $url_to_convert is the full url, including http(s)://, to the image.
  • $options is an array of configuration options. If not set, values from plugin admin page will be used. The array looks like this array("key"=>"xyz","key_type"=>"normal","w"=>0,"h"=>0,"pc"=>0,"fit"=>"")

Configuration Options

ImageEngine_Options_‹_44_—_WordPress

Like most other plugins, WP ImageEngine also has a configuration page. You find it under the settings menu on the WordPress dashboard. The most important thing to do there, is to register for an ImageEngine account to get your unique token. This token is the first part in your hostname to the ImageEngine service. All your images will be prefixed with this.

There is also a switch you can use when you’re developing on a local machine, like localhost, so that images are actually displayed. This is because the local image sources WordPress generate is not accessible from the internet.

The advanced options are in most cases better off left at their defaults. But you can tweak the default width, height (fixed and relative) and the fit method.

So, nothing to wait for if you’re a WordPress user. Install the plugin.