Image Optimizer for Contentful

Contentful is one of the leading headless CMS. It helps address website developer’s increasing need for flexibility and control. Using the Contenful’s API, front-end developers can use JavaScript frameworks like React, Vue, or Angular to quickly deploy content and designs in various web pages and apps.

A headless CMS like Contentful holds potentially thousands of images. How quickly images are rendered has a huge impact on user experience. This is why developers and designers need to focus on streamlining how they access, optimize, cache, and deliver images in a performant way.

ImageEngine is an image CDN that provides a simple solution for accelerating performance, and saves you time and delivery costs. With its multiple components and plugins for React, Vue, and Angular, ImageEngine makes it easy for developers to achieve superior image performance scores on tools like Google’s PageSpeed Insights.

If you are already using a Contentful, then how can you integrate image optimization into your front-end system?

There are a number of options for integrating ImageEngine. From the headless CMS side, the only thing required is to store high-quality, large images in your CMS. Don’t worry about their size or format in the CMS. ImageEngine will pull the images and perform optimization immediately and tailor them specifically for any requesting device. Next, you will need to sign up for a free trial from ImageEngine.

To set up an ImageEngine account that pulls images from Contentful, all you need to do is to create a user account and set images.ctfassets.net as your image origin. images.ctfassets.net is where all images are served from when using Contentful. At the end of the signup process, you will receive a Delivery Address. You will need to copy this and insert it after installing the ImageEngine component. For your front end, ImageEngine offers components for many popular JavaScript frameworks.

• React: Overview; NPM Package ; Documentation
• Angular: Overview; NPM Package ; Documentation
• Vue: Overview; NPM Package ; Documentation

ImageEngine automatically selects and uses the most effective next-gen image formats like WebP, JPEG-2000, animated GIF to MP4s, AVIF, and more.

By making the image format selection process automatic, ImageEngine streamlines your code and workflow. No longer do you have to manually or bulk convert images. In real time, ImageEngine evaluates the requesting device, determines the best format, and converts to next-gen image formats.

Origin Image formats

Your origin image can be in any of the following formats:

• JPG
• PNG
• GIF *
• BMP
• WEBP
• JPEG2000
• SVG **
• TIF

Rotation of animated GIFs is not supported. SVG files are not resized or converted, just optimized and compressed.

Note: the maximum file size of origin images is 5 MB. It is also good practice to publish images in high resolution to account for high PPI devices.

Output Image Formats

• WEBP
• JPEG2000
• AVIF
• PNG
• JPG
• GIF
• SVG
• MP4
• JPEG XR
• BMP

ImageEngine will automatically select the format which serves the best visual quality at the lowest byte size. You can override this behavior using directives or custom settings.

Note: AVIF is presently available by directive only.

Here is an example using the ImageEngine React Component . Start by signing up for an ImageEngine account and Delivery Address.

Once you have your ImageEngine Delivery Address, you are ready to start using the React component

Install the library using the npm install command in the terminal in the root folder of the project. Save option is added to be saved as a dependency for the project.

npm i @imageengine/react --save

A bonus for ImageEngine’s library is that it natively supports TypeScript, giving a smooth integration with the typescript react projects as well.

The next step is adding a provider to the root component in the React project. Generally, this is the App.tsx or App.jsx file.

First, import the ImageEngineProvider:

import { ImageEngineProvider } from "@imageengine/react"

Second, add the image provider to the root component with your specific delivery address like:

https://gecvpk4e.cdn.imgeng.in

This is the host that serves the images from ImageEngine.

<ImageEngineProvider deliveryAddress="YOUR IMAGE DELIVER ADDRESS">
     <div className="App">    
     </div>
</ImageEngineProvider>

Finally, import the image component from ImageEngine and replace the image element. Here is an example

import { Image } from "@imageengine/react"

function ShoppingCart () {
  return (
    <section>
      <Image
        src="pick-ups/custom/unstoppable.jpg"
      />
    </section>
    ...
  )
}

ImageEngine provides an automated Image Speed Test to analyze your web page’s current performance and the improvements you can expect by using ImageEngine. The test provides widely accepted metrics used by Google, WebPageTest and other web analytics tools, but focuses on the metrics relevant to image optimization.

The ImageEngine Image Speed Test uses Google’s Lighthouse tool in the background to analyze your current web page. Next, it simulates the same webpage if ImageEngine were to optimize all of the current images. For mobile device results, it runs a simulation modelled on a Samsung Galaxy J3 running over a 4G mobile network connection. For desktop results, it models a laptop using a cable connection. Finally, it provides a comparison between the current page and ImageEngine simulation.

This speed test will give you an idea of how much each image and each page will benefit from an automatic image-optimizing CDN like ImageEngine. Typically, a website with images stored in Contentful can reduce their image payload up to 80%, with no perceptible impact on quality.

Performance is not always the first thing designers and developers consider when designing a website. But performance has a huge impact on eCommerce sales, conversion rates, and SEO. That’s why setting aside budget and time to solve image performance issues yields substantial benefits.

The most compelling reason to work on image performance is the upside from sales or website conversions. Google estimates that the average website on mobile takes around 9 seconds to load. However, 75% of users will consider abandoning a site that takes over 5 seconds to load.

Companies like Amazon and Walmart have closely scrutinized the relationship between load times and sales conversion rates. For Amazon, they estimate that for every 100 milliseconds they accelerate their site, it increases revenue by 1%. For them, that means millions of dollars. But even if you are a relatively small company, performance boosts sales and pays for the time you put into it.

Images are a big reason why websites load slowly. The average website payload is 2MB in 2021, and 50% of that is images. Frequently, images are larger than they need to be and can be optimized for size with no impact on quality…if you do it right.

However, image optimization can be challenging. Knowing the requesting device screen dimensions, pixel density, ability to handle next-gen image formats becomes very complicated. That is where ImageEngine comes in. It simplifies and offloads all the complexity to an expert image optimization solution.

Even before users come to your site, performance has a critical impact. You may have heard of Google’s latest Page Experience update to their search engine ranking algorithm. It integrates a new set of performance metrics called Core Web Vitals. These metrics are:

Largest Contentful Paint (LCP): Measures the render time (in seconds) of the largest image or text block visible within the viewport, relative to when the page first started loading. Typically, the largest image is the hero image at the top of pages.

First Input Delay (FID): Measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.

Cumulative Layout Shift (CLS): Measures the layout shift that occurs any time a visible element changes its position from one rendered frame to the next. LCP is an image-centric performance metric. The more optimized your images are (particularly your hero images at the top of a page), the faster your LCP will be.

Why do Core Web Vitals matter? Isn’t SEO ranking all about content relevance, backlinks, and domain authority? Yes, but now performance matters more than it did a year ago. In a market where websites are constantly jockeying to match their competition’s pages (for content relevance, keywords, and other SEO issues), performance is making a difference in keyword search engine rankings.

ImageEngine customers that have optimized their images have improved their Core Web Vitals and PageSpeed Insights scores and seen search ranking improve dramatically. Frequently this means moving onto the first search results page, or even the #1 or #2 spot.

When they hear “image optimization,” many web designers think of the practice of generating multiple image sizes, multiple file formats (JPEG, PNG, WebP, AVIF), and massive amounts of code using tags to select appropriate variants. While this approach works, it leaves much to be desired and often yields a sub-standard optimization and a maintenance headache.

That is where the automatic settings of an image CDN like ImageEngine solve yet another problem. ImageEngine detects mobile devices and their image-related parameters, optimizes images for these parameters, and then delivers images through its global CDN. In most cases, the automatic mode of ImageEngine will provide optimization up to 80% on most images, with no perceptible impact on quality.

There is no need to use the picture element with its source tag to achieve great image optimization with next-gen image formats. With ImageEngine, you can use the image component for your front-end framework (React, Vue, Angular), and simply insert the ImageEngine Delivery Address. The entire optimization process becomes automatic, and much faster and optimized.