in Resources

Faster and Simpler Image Optimization for Wordpress

As much as 34% of all live websites and over 60% of CMS-built websites are powered by WordPress. WordPress’ popularity is based on the claim that they take care of the technical details, enabling anyone to build and manage a website.

WordPress makes creating and managing posts and pages and including other content, like images, a breeze. Using images is a no-brainer for making websites more attractive and engaging. However, they are one of the main contributors to slower page load times which will lead to a performance hit. That’s bad news for your user experience and even search engine rankings.

Unfortunately, WordPress doesn’t feature much built-in image optimization. The responsive images specification has been a part of WordPress core since 4.4. By inspecting an image on a WordPress page, you’ll see that up to four variants are automatically generated under the srcset attribute:

WordPress Image code

That’s a clear win for WordPress website admins, but there is still so much room for improvement.

That’s where an image CDN with automated image optimization, like ImageEngine, can kick things up a notch. ImageEngine uses WURFL device detection and globally positioned device-aware servers to get the exact context an image is accessed from.

This allows for more advanced image optimization, covering a wider range of devices, particularly mobile. The core steps of ImageEngine’s automatic image optimization are:

  • Automatically detect the accessing device, it’s operating system, and browser software
  • Resize images exactly to the optimal dimensions and pixel ratio
  • Compress and render images in the most efficient file format

While stock-standard responsive image syntax in Wordpress with three or four variants can yield a 63% reduction in image payload size, these extra steps can result in an 84% reduction:

Payload reduction

To make matters worse for the responsive images specification, the devices, software, resolutions, and pixel densities we use are constantly changing. Being dependant on the responsive images specification can’t and won’t prepare you for every scenario.

How to add ImageEngine optimization to WordPress

Ok, disclaimer time: this solution is not completely code-free. However, even if you just have a passing knowledge of how web development, hosting, and databases work, you should have no trouble following these steps.

Step #1: Sign up for an ImageEngine account and get your domain token

You can sign up for a no-commitment 30-day trial to take ImageEngine for a spin and assess the results here.

By going through the steps, you’ll get a subdomain token where your images will be served from, something like images.mysite.com.

Optionally, you can also add the following CNAME DNS record to serve images from the shortened version of the domain token:

DNS Configuration

Step #2: Update your image src attributes

To enable ImageEngine to serve automatically optimized images, you’ll need to update the src attribute for images on your site with the new domain they will be served from.

Where your <img> tag src attributes used to look like this:

<img src="http://mysite.com/wp-content/uploads/2019/11/citylights.jpg> 

They will have to be updated to:

<img src="http://images.mysite.com/wp-content/uploads/2019/11/citylights.jpg">

Or

<img src="http://images.mysite.com.imgeng.in/wp-content/uploads/2019/11/citylights.jpg">

Once again, ImageEngine will provide you with examples of what this should look like in the dashboard:

Images

There are a number of ways you can do this on a WordPress website, with varying degrees of automation and difficulty. Custom or third-party themes and plugins my interfere if they use custom hooks, locations, etc. However, these methods should work for most situations.

Step #3.1: Do it manually

You could go the old-fashioned route, by editing every page or post on your site with images while using the code editor.

Then search for all image tags and update the src attribute. So, from this using the original file location:

<img src="http://mysite.com/wp-content/uploads/2019/11/citylights.jpg">

To this using the newly created ImageEngine domain token:

<img src="http://images.mysite.com/wp-content/uploads/2019/11/citylights.jpg">

Step #3.2: Use a SQL query to update live image URLs

Assuming you can access phpMyAdmin and run SQL queries, this is perhaps the easiest and most convenient option.

Go to phpMyAdmin, and run the following SQL query against the database for your WordPress site:

UPDATE wp_posts SET post_content = REPLACE(post_content,'Your origin URL or domain','Domain received from ImageEngine’)

Before you run it, swap in your own domain, e.g. mysite.com, and your domain for serving images, e.g. images.mysite.com as above.

The downside is that you will have to run this script every time you add new images to your site. So, it’s best to add images in bulk and then run this script to update your images in one go.

Step #3.3: Edit your WordPress theme’s function.php file

Going with this option, you’ll add some server-side script that will execute each time a visitor loads your website to update all the image src attributes. Adding this code should cover any existing images as well as any future ones.

The code uses an add_filter() function and a string replace operation to replace your domain in image src attributes with your ImagEngine token. This code should be copied and pasted at the bottom of the functions.php file:

add_filter('the_content', 'cdn_urls');
function cdn_urls($content) {
    $scheme ="http";

    if (is_ssl() || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')) {
        $scheme ="https";
    }

    $domain = "mysite.com"; //Replace with your domain
    $rep = $scheme."://images.mysite.com"; //Enter the domain you created with ImageEngine
    $tof1 = $scheme."://".$domain;
    $tof2 = $scheme."://www.".$domain;

    $content = str_replace($tof1."/wp-content/uploads", $rep."/wp-content/uploads", $content);
    $content = str_replace($tof2."/wp-content/uploads", $rep."/wp-content/uploads", $content);

    return $content;
}

Step #4 (Optional): Accept Client Hints

While you’re in your functions.php file, this is also a good opportunity to enable client hints. Through client hints, ImageEngine will receive even more detailed information about the viewport size to optimally resize images.

The code snippet below, also tells the browser to preconnect to ImageEngine to speed up the process:

function wp_add_ie_meta() {
?> 
    <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width, Save-Data"/>

    <link rel="preconnect" href="//images.mysite.com" crossorigin> <?php //Replace domain with your ImageEngine domain
}

add_action('wp_head','wp_add_ie_meta');

Step #5: Adjust the automatic image optimization settings

Despite ImageEngine’s extensive automation of image optimization, it still provides users with a level of control. You can give ImageEngine commands through image URLs and adjust settings from within the dashboard.

You can find a full list of URL parameters and how to use them in the documentation over here. With a bit of coding know-how, it shouldn’t be too hard to combine with the methods above using classes or ids to filter images further.

In the dashboard, you can paint in broad strokes by setting the TTL, image format, image size, etc. for images served by ImageEngine:

Image Settings

The case for ImageEngine

You might ask, why not just use a regular CDN? The answer is because a general-purpose CDN treats most content as static. The need for the responsiveness images specification show that images simply aren’t, and shouldn’t be treated as, static content.

Why not use a DAM like Cloudinary? The main purpose of a DAM (digital asset management) tool is providing convenient storage, file management, and image editing features. They usually don’t have a built-in CDN but may come bundled with a general-purpose CDN. You can think of ImageEngine as a serverless, headless DAM.

Another option is a responsive image plugin for WordPress with a built-in image CDN. These are a step in the right direction, and you can lean on the convenience of using a plugin built for WordPress. However, most still rely heavily on user direction and the responsive image specification.

In short, an image CDN like ImageEngine leverages greater contextual awareness thanks to WURFL device detection and its globally positioned device-aware edge servers that gives it the edge. Conventional optimization methods rely on hardcoding a finite number of derivatives and picking the best of the bunch, mostly based on viewport size.

ImageEngine’s adaptive nature makes a broader range of optimization measures possible for a more future-proof solution.

Subscribe To The Weekly Newsletter

Get weekly updates to your email