Sign up for ImageEngine

To implement ImageEngine’s image optimization for React, you will first need to sign up for an ImageEngine account, if you do not already have one. During the signup process, you will specify the website domain that will use ImageEngine and the origin URL for most 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”. You may create Custom delivery addresses after the initial signup process is complete. For more information, see our article here.

Take note of your delivery address, as we will need it in the next step.

Setup Your Project 

If you don’t have an existing react app, make a new one using the command line

npx create-react-app image-engine-example

NPM Package Method:

First, install the Image Engine NPM package 

 npm i @imageengine/react 

Integrate ImageEngine Into Your App

We will only be working in "App.js". Make sure to delete all the code from it.

Import ImageEngine Components

In the "App.js" file, import the necessary components from the ImageEngine NPM package like so: 

import { ImageEngineProvider, Image } from "@imageengine/react"

Add the "ImageEngineProvider" component inside your app’s main div. This allows all child components to access images from ImageEngine. 

Note: A "stripFromSrc" prop may be passed into the "ImageEngineProvider" which will remove all instances of that string in the "src" path of child images. Useful to replace hostname references in the origin image url, with the ImageEngine delivery address. For example, if an image has an absolute URL like “https://old.cdn.com/images/example.png”, and the “stripFromSrc” property is set to “https://old.cdn.com”, “https://old.cdn.com will simply be replaced with the ImageEngine delivery address provided in the deliveryAddress prop.

Insert Delivery Address

Make sure to modify the code below to insert your own "deliveryAddress" which is provided to you after signing up for an ImageEngine account. You can also find it in your ImageEngine dashboard.

 return (
   <ImageEngineProvider
     deliveryAddress="https://blazing-fast-pics.cdn.imgeng.in">
    {/* or, for local development:
        deliveryAddress="http://localhost:3000"
    */}
      </ImageEngineProvider>
 )

Insert "Image" Component 

Lastly, add an  "Image" component inside the "ImageEngineProvider" and pass an "src" prop which is the path of the image after the "delivery Address".

  <Image src="/images/pic_2.jpg"/>

Note: If your images are being hosted locally by your React app, then set your delivery address to “http://localhost:3000”. Now the "src" path of your images corresponds to the "public" folder in your React project. Using localhost as the origin will not provide any image optimization. Only images coming from ImageEngine will provide optimization.

Completed App.js example

Your final App.js should look like this:

import { ImageEngineProvider, Image } from "@imageengine/react"

function App() {
 return (
   <ImageEngineProvider
     deliveryAddress="https://blazing-fast-pics.cdn.imgeng.in">
    {/* or, for local development:
        deliveryAddress="http://localhost:3000"
    */}
     <Image src="/images/pic_2.jpg"/>
   </ImageEngineProvider>
 )
}

export default App;

Using Directives

If you want more granular control over how the image is presented, you may use ImageEngine's directives. Use the "directives" prop to do so without having to modify the source image.

<Image src="/images/pic_2.jpg" directives={{
             outputFormat : 'webp',
             rotate: 45,
             inline: true
         }}/>

For more information refer to the npm documentation, or see an example app.

Webpack Method:

To configure ImageEngine with React apps built with webpack, all you have to do is declare in the file-loader the publicPath like so. ImageEngine will automatically pull your image content into the service and deliver the perfectly optimized image content to your end-user. 

Here is the sample code snippet to add to your webpack.config.js file:

{
 test: /\.(jpe?g|png|gif|svg)$/i,
 use: [
        {
          loader: 'file-loader',
          options:
                   {
                     publicPath: 'https://images.mysite.com/'
                   }
         }
       ]       
}

When you run your WebPack build you will see that the image URL is properly referencing the ImageEngine delivery address from the publicPath. 

Warning: Keep in mind that if you are using this in a local environment that the image will appear broken unless the image is available on a publicly accessible staging or production server. This will be true for any pull-based CDN. Based on this, we recommend this configuration for staging or production.

Using Directives

If you want more granular control over how the image is presented, you may use ImageEngine's directives to do so without having to modify the source image.

Method: using a template string in a JSX expression is a great way to declare ImageEngine directives. Simply add the query string to the end of the image URL with the desired settings like so:

<img src={`${logo}?imgeng=/f_webp/w_300/`} alt="Logo" />

You can learn more about directives on our documentation page on the topic.

React and Webpack are powerful tools that enable developers to create incredible applications. ImageEngine can be a useful tool in simplifying your image management workflow and can greatly improve the performance of your site, especially if there is a lot of image content.  

Testing

The easiest way to see if ImageEngine is serving your images is by opening the Chrome developer tools (or similar tool) and filtering the requests under the Network tab. You may have to refresh the page to see the results.  Find an image request expected to be served by ImageEngine and verify that ImageEngine is indeed serving the image by making sure that the 'Server' response HTTP header has the value “ScientiaMobile ImageEngine” For more information on locating ImageEngine served content, see this blog article: How to Inspect Images And See ImageEngine Optimization

Troubleshooting

If you are having trouble getting images to serve properly, there are a few easy ways to narrow down the problem. The easiest way is to manually concatenate the "deliveryAddress" of your project and the "src" of your image and directly visit that url in your browser.

For the example above, the delivery address was “https://blazing-fast-pics.cdn.imgeng.in” and our image path was “/images/pic_2.jpg”. Concatenating them together results in the valid image “https://blazing-fast-pics.cdn.imgeng.in/images/pic_2.jpg”.

 If no image comes up in your project, then you should check that your origin is correct in the ImageEngine console and that the images exist at that origin