WordPress

To implement ImageEngine’s image optimization for a WordPress - or Woo-commerce site, you will first need to sign up for an ImageEngine account, if you do not already have one. During the signup process, you’ll be asked for the website domain where you intend to use ImageEngine and origin URL for the majority of the images. For more information about signing up, please refer to this article: Getting Started: Signup.

Once signed up, you will be issued a unique delivery address following this pattern: “aabbcc.cdn.imgeng.in.” Custom delivery addresses may also be made after the initial signup process is complete. For more information, see our article here: Creating new delivery addresses

Take note of your delivery address, as we will need it in the next steps!

Below we provide two options for implementing ImageEngine: 

1. By way of an Image CDN plugin for WordPress that we have provided (recommended)

2. Directly adding code to your theme

Note: Regardless of method, upon completion of integration with Wordpress, your Wordpress site's images will be using the ImageEngine delivery address. The Original images are still available - The integration has simply rewritten the image URLs to use the specified ImageEngine Delivery address. 

Plugin Method

This 5-minute video covers the plugin set process!

Download the Image CDN plugin from the WordPress plugin store. You can do this by logging into the admin section of your WordPress site, clicking the "Plugins" option, then "Add New" in the left menu. Next, search for “ImageEngine” in the search box in the top right corner. Choose "Install Now" on the ImageEngine plugin.

Configure the Image CDN Plugin with ImageEngine

1. Sign up for an ImageEngine Account

2. Input your Delivery address URL

   
   Enter your ImageEngine Delivery Address:
   Image: the plugin settings:
   
   
   

3. Check the box to enable ImageEngine

4. Test the Configuration

   Ensure that the "enabled" checkbox is marked, and then click the “Test Configuration” button. This will verify that the provided delivery address is able to serve images using the origin coupled with the provided delivery address.
   If the test failed, please verify your delivery address, then check your engine settings within your ImageEngine account.

5. Save the settings! 

   Click “Save Changes” and verify that your site is serving images through the delivery address. You can do this by “view source” or “inspect element” and verify that the IMG elements have an SRC attribute referencing the delivery address.

6. Optional: Adjust advanced settings and default values

Image: Advanced settings: 

6.1 WordPress URL Path

If you have your WordPress installed in a specific path of your main site, such as "https://foo.com/blog" you may enter the path to the WordPress installation here.

6.2 Included Directories

Assets in the provided directories will be served through the delivery address. Commas must separate the directories ",".

By default, the content in wp-content and wp-includes are served through the delivery address.

6.3 Exclusions

If you want certain file extensions or entire directories to be excluded and not served through the delivery address, enter the exclusions (directories or extensions) separated by commas ','.

6.4 Relative Path

If you use relative paths to images in your theme, check this box.

6.5 CDN HTTPS Support

Whether or not to use the provided delivery address for HTTPS connections. Note: This is disabled by default, and can be the reason for unexpected behavior. If your site is using https://, try to enable CDN HTTPS Support.

6.6 ImageEngine Directives

If you want to append directives to image URLs, you can input the directives here.

Always make sure to save your configuration

Click “Save Changes” and verify that your site is serving images through the delivery address. You can do this by “view source” or “inspect element” and verify that the IMG elements have an SRC attribute referencing the delivery address.

(Optional)Using Image CDN Plugin Filters

In most cases, you will not need to use these WordPress filters because the Image CDN plugin automatically rewrites all image URLs for you, however, Image CDN filters are available if you are working with custom themes or other plugins and find that some URLs are not being rewritten.

image_cdn_url will rewrite the given image/asset URL, for example:

<!-- Update /wp-content/logo.jpg to use the Image CDN >
<?php echo apply_filters( 'image_cdn_url', '/wp-content/logo.jpg' ); >

image_cdn_html will rewrite all image/asset URLs in the given HTML, for example:

// Update all images (bg.png and logo.jpg) to use the Image CDN
$html = '<div style="background-image: url(/wp-content/bg.png);"><img src="/wp-content/logo.jpg"/></div>';
$html = apply_filters( 'image_cdn_html', $html );

Note that the filters will only be run if the Image CDN plugin is activated and enabled (“Enable CDN support” is checked).

ImageEngine without Plugins

1. Find your theme in the wp-content/themes folder
   Open the functions.php file in the themes folder.
   
   
2. At the end of the file add the following code.
   The lines to modify are "$domain", the website's domain, and "$rep = $scheme." the ImageEngine delivery address. 
   

   // Adding CDN Support (ImageEngine)
   
   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";
     }
   // Enter your domain name here...
     $domain = "mycoolwebsite.com";
   // Enter the ImageEngine delivery address or the CNAME Domain...
     $rep = $scheme."://images.example.com";
     $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;
   }

add_filter('the_sidebar', 'cdn_urls');
add_filter('the_footer', 'cdn_urls');
add_filter('your_custom_hook', 'cdn_urls');

3.Add Client Hints
Client Hints enables the browser to send more detailed information about what size the image should be, relative to the viewport size. Resource Hints will speed up the connection to ImageEngine by telling the browser as early as possible to connect to the ImageEngine server. You can enable both by adding the snippet of code below in your functions.php file:

// Add meta for Client Hints and Preconnect Resource Hint.
function wp_add_ie_meta() {
echo '<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width, Save-Data">'."\n";
echo '<link rel="preconnect" href="//images.example.com">'."\n";
}
add_action('wp_head','wp_add_ie_meta');