React Image Optimization

Improve web performance with ImageEngine’s React component. By optimizing images and delivering via its CDN, ImageEngine will accelerate page loading, improve SEO, and increase sales conversions.

Check out the ImageEngine React component. All you need is a free trial, no credit card required.

Install: npm i @imageengine/react

NPM Documentation

Start Free Trial
hero
work

Detect Mobile Devices

Mobile optimization is an image CDN's first and most critical step. It detects the requesting device model and all capabilities that impact image size and quality.

Learn morearrow right
work

Optimize Images

An image CDN will leverage the device’s parameters to automatically resize, compress and convert large original images into optimized images with next-generation file formats, like WebP and AVIF. Frequently, an image CDN like ImageEngine will reduce the image payload by up to 80%.

Learn More >arrow right
work

Deliver Through Our CDN

Image CDNs like ImageEngine have edge servers strategically positioned around the globe. By pushing optimized images closer to requesting customers with logic to deliver immediately from cache, often providing a 50% faster web page download time than traditional CDNs.

Learn morearrow right

How to Start Using ImageEngine

A traditional content delivery network (CDN) focuses on pushing content as close as possible to the requesting user. Typically, they do this by having edge servers at many Points of Presence (POPs) all over the world. The idea is that by caching content and reducing the geographic distance, a traditional CDN will improve speed and reduce the burden on a company’s origin server.

There are several problems with the traditional CDN model when it comes to images. A traditional CDN does not know the screen size of the requesting device. Whether it is an Apple laptop, a Samsung Galaxy S9 smartphone, an Apple iPad Air 2, or a Motorola G3 smartphone, a traditional CDN will send the same large original image. And since the business model of traditional CDNs are based on a price per gigabyte delivered basis, they have no interest in optimizing the payload. Given their huge infrastructure investment, traditional CDNs need to keep data payloads large to pay for their legacy network costs.

An image CDN takes a radically different approach by changing the original static image into dynamic content by optimizing the image in different ways based on where the image is viewed. This requires intelligent, device-aware edge servers. Because an image CDN reduces image payload and response time so dramatically, it is no longer necessary to build out a CDN with thousands of POPs. Virtual cloud-based edge servers effectively serve the entire globe from only a few dozen locations. This enables an image CDN to deliver quickly to a range of devices at a lower cost.

ImageEngine’s React component will take your original image, detect the requisition device, optimize, compress, and resize, and then deliver the image via its CDN.

This article explores the easiest technique to get started with the integration of ImageEngine in React. This is a React beginner friendly article, but in case you’re completely new to React, you can brush up the basics from their documentation and those are enough for implementing the code discussed here. We will walkthrough the following topics:

  1. ImageEngine Component vs HTML Image Tag
  2. Installing the ImageEngine NPM package for React
  3. Implementation and Demo

You can also refer to the ImageEngine React.js documentation

After implementing ImageEngine, all of your images will be delivered in the most optimal image format, including next generation image formats like WebP, AVIF, and JPEG 2000. Image and video file formats are constantly evolving. However, developers and designers should not have to manually transform images and generate new code to deliver image variants to the devices and browsers that support them. An image CDN automatically manages all of the complexity of selecting the optimal image format for a device or browser. For example, ImageEninge can use Google’s WebP file format to deliver optimized images to the Chrome browser. Likewise, it can deliver WebP or JPEG 2000 to Apple’s Safari browser. For animated GIFs, an image CDN can convert them into MP4s or animated WebPs. ImageEngine also offers AVIF, of the newest image formats. All of these next-gen image formats are typically 30% more effective than a standard JPEG--and that is before further device-driven compression or resizing. At the end of the optimization cycle, image CDNs can reduce image payload up to 80%.

Headless CMSs are an exciting trend that many web developers, enterprises, and eCommerce companies are adopting. By separating the content and database of the CMS from the front-end framework like React, developers can free themselves from rigid templates of traditional CMS.

React is an increasingly popular JavaScript front-end framework that works with most headless CMS like Contentful, Magnolia, Graphcms, Sanity, Prismic, Butter, Contentstack, Dotcms, Mura, Cockpit, Craft, Zesty.io, Kontent.ai.

There are many reasons to consider using an image optimizing component for React with your headless CMS.

  • Your website is slow

53% of people abandon a mobile page after 3 seconds. Consequently 3 seconds is the minimum, but aim for under 1 second. Test your site on a third party speed test tool to see if it meets this requirement. Some sites are webpagetest, PageSpeed Insights by Google, and ImageEngine’s demo.

  • A large proportion of your payload is images

The average webpage is almost 2MB, and 50% of that payload is images. Frequently these images are much larger than they need to be, especially for mobile devices. (You could manually resize and serve different sized images, but it’s simply impractical to

  • A large site with hundreds or thousands of images

If you’ve only got a handful of images to optimize, then the task is relatively easy. But with thousands of images, optimization and management challenges can quickly multiply the scale of your workload.

  • Your website is dynamic, or if you regularly find yourself adding new images

Many commerce sites, for example, regularly add new products, and the accompanying images. And social media sites regularly handle huge quantities of user-generated images.

  • Your customer base is international

CDNs maintain edge servers around the globe with cached images, close to the end user. If you have users spread out from New York to Singapore, from Milan to Cape Town, an Image CDN will ensure that your data has a shorter, and therefore speedier, journey to the user.

  • Your customers depend on mobile networks, especially mobile networks that are slow

Many markets now find that over 50% of their visitors access sites using a mobile network. Unfortunately, many people are still not on 4G, let alone 5G networks. An image CDN tailors the file to supply the largest image needed, and nothing larger. The result is a faster, better mobile UX.

Optimized images combined with a CDN will generate a range benefis for websites using a React front-end framework. Benefits fall into categories five categories:

  • Improved web performance
  • Better SEO
  • Streamlined image workflow and code
  • Improved conversions and sales
  • Lower delivery costs

ImageEngine provides a number of controls over how the image is presented. You can use ImageEngine directives to do so without modifying the source image. Below is a list of the directive that are available in the React image component.

directives?: { // Define desired width. width?: number // Set width to auto (with fallback). autoWidthWithFallback?: number // Define desired height. height?: number // Adjust compression. // Possible range: 0-100. compression?: number // Define desired output format. outputFormat?: | "png" | "gif" | "jpg" | "bmp" | "webp" | "jp2" | "svg" | "mp4" | "jxr" // Define desired fit method. fitMethod?: "stretch" | "box" | "letterbox" | "cropbox" // Don't apply any optimizations to the origin image. noOptimization?: true // Adjust sharpness. // Possible range: 0-100. sharpness?: number // Define rotation. // Possible range: -360 to 360. rotate?: number // Use WURFL to calculate screen's width and then scale the image accordingly. // Possible range: 0-100 (float). scaleToScreenWidth?: number // Crop the image [width, height, left, top]. crop?: number[] // Convert the image into a data url. inline?: true // Keep EXIF data. keepMeta?: true }

Get a demo

Test your site with our ImageEngine demo tool and see what improvements can be made.

see demo here

Start for free

Try ImageEngine for 30 days - Up to 100 GB of Smart Bytes included.

start free trial