ImageEngine

ImageEngine is an intelligent image CDN for optimizing, compressing and resizing images. ImageEngine will enhance your responsive images by enabling support for HTTP2, automatic webp / jpeg-2000 conversion, Client Hints and more.

It is likely that ImageEngine will shave off 50-60% of data traffic generated by images on your site. To better support mobile devices, ImageEngine relies on WURFL for server side device detection in cases where responsive images and Client Hints fall short.

Registration is required to use ImageEngine. You can sign up for a free 30 day trial.

Images weight is by far the most important challenge to address when optimizing a web page for the plethora of devices on the web today. This is why ImageEngine will instantly give your users a better experience by reducing load time of your page. Not to mention the reduced data cost.

ImageEngine works as a CDN proxy. By referencing the ImageEngine servers and providing the full URL to the original image as a parameter, ImageEngine will identify the device, and its capabilities, and resize and optimize the image accordingly.

Client Hints

ImageEngine can take information derived from client hints and automatically make decisions on how to best optimize your image content. You can include client hints in the header of your index.html by adding the following meta tag <meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width">

HTTP2 support

HTTP will give additional performance improvement on the network level. ImageEngine supports HTTP2 over SSL, which means that if you serve your sites and images by https://, ImageEngine will automatically serve all images over HTTP2.

WebP

WebP is a lightweight image format with great quality. WebP is well supported by browsers. ImageEngine will detect if the end user's browser supports WebP and automatically convert any format to WebP to increase performance.

JPEG 2000

JPEG 2000 is a much better image solution than the original JPEG file format. Using a sophisticated encoding method, JPEG 2000 files can compress files with less loss of, what we might consider, visual performance. In addition, the file format is less likely to be affected by ‘bit errors’ and other file system errors due to its more efficient coding structure. ImageEngine will detect if the end user's browser supports JPEG 2000 and automatically convert any format to JPEG 2000 to increase performance.

Installation

The easiest way to use react-imageengine is to install it from NPM and include it in your own React build process.

npm install react-imageengine --save

Usage

import ImageEngine, { ImageEngineConfig } = from 'react-imageengine';

ImageEngineConfig.domain = 'mysite.com.imgeng.in'

<ImageEngine src={"/image.jpg"} width={20} height={30} htmlAttributes={{alt:'Image alt tag'}}/>

Note : src parameters are required other parameters are optional

Picture element

import ImageEngine, { Picture, Source, ImageEngineConfig } = from 'react-imageengine';

ImageEngineConfig.domain = 'mysite.com.imgeng.in'

  <Picture>
    <Source 
    srcSet="/images/adventure-american-bison-bison.jpg" 
    crop={"500,500,2500,1500"}
    media="(max-width: 639px)"  
    htmlAttributes={{
      alt: "ImageEngine image",
      className: "my-class"
    }} />
    <Source 
    srcSet="/images/adventure-american-bison-bison.jpg" 
    width={"300"}
    height={"300"}
    fitMethod={"cropbox"}
    media="(min-width: 640px) and (max-width: 1023px)"  
    htmlAttributes={{
      alt: "ImageEngine image",
      className: "my-class"
    }} />
    <Source 
    srcSet="/images/adventure-american-bison-bison.jpg" 
    width={"auto_500"}
    media="(min-width: 1024px)" 
    htmlAttributes={{
      alt: "ImageEngine image",
      className: "my-class"
    }} />
    <ImageEngine
    src="/images/adventure-american-bison-bison.jpg"
    htmlAttributes={{
      alt: "ImageEngine image",
      className: "my-class",
      width: "500px"
    }}
  />
  </Picture>

Note : src parameters are required other parameters are optional

Directives

The following directives are available as props in your component

width
height
compression
format
fitMethod
passThrough
sharpness
rotate
percentageOfScreen
crop
inline
stripExifData

Check the ImageEngine Documentation for the list of available settings.

HTML Attributes

HTML Attributes like the alt tag can be defined in the htmlAttributes prop, which requires an object to properly pass the attributes to the img tag

Example

htmlAttributes={{
  alt:'Example alt tag',
  className:'example-class'
}}

Registered user

ImageEngine requires you to enter your ImageEngine domain into the ImageEngineConfig variable in order to pull from that URL.

import ImageEngine, { ImageEngineConfig } = from 'react-imageengine';

ImageEngineConfig.domain = 'mysite.com.imgeng.in'

<ImageEngine src={"/image.jpg"} width={20} height={30} htmlAttributes={{alt:'Image alt tag'}}/>

#To run this example

git clone
cd example
npm install
npm start
example runs create-react-app

joelopresti/react-imageengine