Magento 2.x

We have two methods of integrating ImageEngine with a Magento 2.x site:

1. Directly modifying the Base URLs in your Magento 'web' settings.
2. Installing a module that we have created for the purpose of integrating with Magento.
   The module incudes some additional features to improve performance. If you have the option of installing modules, this is the recommended alternative.

In both cases, to implement ImageEngine’s image optimization for Magento 2.x, 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 the 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.

Take note of your delivery address, as it will be needed for both of the suggested deployment methods.

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

Base Media URL modification method: 

Intro

Magento has built-in support for CDNs usage via its base URL system. Specifically, you will change the base media URL.
Changing the base URL will only impact URLs generated by Magento. If you have CMS blocks, CSS, or pages that use “hard-coded” URLs with your domain name, they will need to be configured manually to use an ImageEngine Delivery Address URL if you want them to take advantage of the CDN.

For more information, please see Magento's documentation for this method.  

Set up your Magento website to use ImageEngine:

1. Identify whether or not your site uses the /pub/ directory. 
   A simple way to check this is to right-click an image on the site and “Open in a new tab”. The URL in your address bar should contain /media/ or /pub/media/. If you see /pub/ in the URL, your site is not using /pub/ as the document root, and therefore /pub/ must be included in the URLs you configure shortly.
   
   
2. Test a URL to confirm that things will work before configuring Magento to use the ImageEngine Delivery Address. If you did not open an image in the last step, do so now. Then all you need to do is replace your domain in the address bar with your configured ImageEngine Delivery address domain, leaving the rest of the URL the same. 
   Where the URL is: 
   https://www.mydomain.com/pub/media/catalog/product/image.jpg
   The URL should be changed to:
   https://sampledeliveryaddress.cdn.imgeng.in/pub/media/catalog/product/image.jpg
   Load the new URL in your webbrowser, and if the image loads, you are ready to proceed. If the image does not load, contact our support team before proceeding: support@imageengine.io.
   
   
3. Log in to your Magento Admin Panel.
4. Navigate to Stores > Configuration > Web.
   In the General settings click on the “Web” section.
   

5. Open up the “Base URLs” settings. 
   

6. Update your base media URLs to use your ImageEngine Delivery Address. What you will put here will depend on your Delivery Address and the usage of /pub/. The trailing slash `/` is vital on these links, so ensure you do not forget it.  

   For the Base URL for user media Files you should use either:
   https://<your_delivery_address>/pub/media/ or https://<your_delivery_address>/media/

   Whether you use /media/ or /pub/media/ will depend on whether or not your URL in steps 1 and 2 contained /pub/.

   Note: You must also make this change to “Base URLs (Secure)” if you are serving HTTPS traffic
    
7. Save your Configuration.
8. You must clear your website’s cache so that pages are rebuilt using CDN URLs. To perform the cache flush, navigate to System->Cache Management. 

   

   1. Check the "Page Cache" box
   2. Click "Flush Catalog Images Cache"
   3. Click "Flush Magento Cache" 
9. Once finished, verify that images are being served by ImageEngine.  

ImageEngine module for Magento

By using the ImageEngine module for Magento, image references and references to other static content will be automatically changed. Additionally, the module will enable client hints and resource hints to further optimize images. 

Please pay attention to the supported PHP versions:

7.1.0|~7.2.0|~7.3.0|~7.4.0|~8.1.0 

Install the Magento Module using Composer

The ImageEngine Magento module is available on pagagist.org and can be installed using composer:

# Install the module with Composer
composer require scientiamobile/module-magento2-image-cdn-imageengine

Next, the module can be enabled locally in your Magento instance:

# Enable the module
magento module:enable scientiamobile/module-magento2-image-cdn-imageengine

Make sure to regularly check for new versions.

 Configuring the Magento module

1. Go to Stores in the application menu and select Configuration:
   

2. You should see tab labeled "ImageEngine" on the left.

3. Log into your ImageEngine account via control.imageengine.io to access your account dashboard. Copy the “Delivery Address” from the Engine screen.

4. Going back to the module configuration in Magento, paste the ImageEngine Delivery Address into the “ImageEngine Delivery Address” field. Be sure to include http:// or https:// in front of the Delivery Address. 
   

5. Confirm that media is located un the  /media/ media folder of your site. If not, change the path so it matches your setup.

6. Enable the module globally.

7. Save the configuration. 

You may have to purge the cache in Magento.

ImageEngine is now configured. Verify that images are now served with ImageEngine.

You can fine-tune the image delivery in the ImageEngine control panel.