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:
- By way of an Image CDN plugin for WordPress that we have provided (recommended)
-
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
-
Sign up for an ImageEngine Account
-
Input your Delivery address URL
Enter your ImageEngine Delivery Address:
Image: the plugin settings: -
Check the box to enable ImageEngine
-
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. -
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.
-
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
Note: Using the plugin, documented above, is recommended. However, we understand that special use-cases exist that may preclude the usage of the plugin. The following alternative is provided to offer an alternative deployment method to ensure your image content is globally cached and optimized for every device. |
- Find your theme in the wp-content/themes folder
Open the functions.php file in the themes folder. - 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;
}
Note: this code will only change the image references in content reachable by the filter the_content. You may want to add your custom hooks to replace all image references:add_filter('the_sidebar', '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:
Note: Remember to update the domain images.example.com in the code to reflect your ImageEngine domain. |
// 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');
Comments
0 comments
Please sign in to leave a comment.