How ImageEngine can Optimize Contentful CMS For Faster Web Performance

This content originally appeared on Codrops and was authored by advertiser

A headless CMS is a content management system with only a back-end configuration. The content repository is accessible through a RESTful API for display on any platform. The only focus is to create, manage and deliver structured content wherever it’s needed. Contentful is a headless content infrastructure, especially designed so that everyone without writing code can publish or update the content. It has a separate images API to handle images as it’s a powerful way to attract user’s attention and have the potential to create an impact. In this article, we will review how ImageEngine’s API can transform images better than the native API of Contentful. ImageEngine displays images the way users want and creates a faster website.

How Does Contentful API Manage Images?

Contentful image API refers to images as assets and allows manipulation and retrieval of image files. The asset URL is appended with a specified field to convert and manipulate the image file. An image of more than 20MB is treated as an asset and its size is reduced for uploading. The contentful API image processing includes:

1. Retrieval

The original image can be retrieved from that same asset’s URL.

2. The image can be converted to a different format

JPEGs: Image detail progressively improves until it’s downloaded fully and displays the image as quickly as possible.

PNGs: The PNG is an 8-bit image format, supports up to 256 colors, and is mostly used for simple icons or images.

WebP: This format compresses images on the web while providing a rich image of superior quality.

3. Resizing and cropping the image

Crop: The image can be resized to the required width and height. Images up to 4000 pixels can be uploaded.

Resizing: Resize images with specific dimensions through the padding, filling, scaling, dropping, or thumbnail.

Specify focus: The focus area can be selected for resizing. The values accepted are center, top, right, left, bottom, top_right, top_left, bottom_right, bottom_left, face, and faces. The circle radius in pixels is taken to crop the image for rounded corners.

4. Manipulate Image

The image quality can be altered and can be expressed in percentage. Set the RGB values for background color while setting the pad fit type and corner radius.

How Does ImageEngine Manage Images?

ImageEngine’s image management process adopts next-level optimization techniques to help websites achieve maximum performance. The developer might need to modify the HTML of the site to change the way images are displayed in native apps.

ImageEngine provides automatic image optimization based on client hints, WURFL device detection, and information such as resolution, optimal size, format, and compression. Its auto-mode supports diverse sizes, resolution, and much more which is compatible with desktop and mobile as well. It ensures that the user will get a quality image in the lowest possible size.

ImageEngine’s CDN receives an image request and then carefully searches for efficient edge servers. The servers detect the requesting browser and device to extract details such as:

• Device screen size
• Screen resolution
• Device pixel ratio
• Viewport size
• Supported image formats

So it generates different versions based on device size, capability, or compression rate. It embeds unique edge servers and its cache serves fast service even with several versions.

Format Conversion

After the device detection, the most suitable image format is automatically chosen. It’s performed through manual verification, WURFL device detection, and advanced systems. It confidently converts the image to a device supported format while reducing its size to improve the website experience.

Resizing

To provide a great user experience, the image is resized perfectly to fit in the viewport. With the help of client hints, it can handle Retina like high-resolution displays and would make sure to serve the appropriate image size according to the needed pixel size.

Metadata & Compression

The embedded metadata is removed for image optimization. Image compression is performed according to device screen size without compromising the image visual quality.

Client Hints

The Blink-based browsers support client hints, and it sends viewport details for generating perfectly optimized images. With this information, ImageEngine will automatically deliver the lowest possible file size with the best visual quality.

How to Integrate ImageEngine to Contentful?

It’s easy to integrate the ImageEngine image optimization API with Contentful to manipulate, convert, and transfer the image files for quick retrieval. To configure ImageEngine API with Contentful:

Step 1: Sign up for an ImageEngine Account to get started with optimizing images and obtaining a delivery address for faster web page loading.

Step 2: Next, define the origin of the images. Enter the URL of the Contentful-powered website, or simply enter the Contentful API base URL: images.ctfassets.net (read-only) as image origin location.

Step 3: An ImageEngine delivery address is generated. Copy this delivery address.

Step 4: Update the image tags to direct image requests to ImageEngine by replacing any occurrences of the default Contentful image API (images.ctfassets.net) with the new ImageEngine delivery address just provided.

For example, if the original image tag looked like this:

<img src="https://images.ctfassets.net/yadj1kx9rmg0/wtrHxeu3zEoEce2MokCSi/cf6f68efdcf625fdc060607df0f3baef/quwowooybuqbl6ntboz3.jpg"/>

Then modify the image tag URL with the ImageEngine Delivery Address to look like this:

<img src="https://<ImageEngine-Delivery-Address>/yadj1kx9rmg0/wtrHxeu3zEoEce2MokCSi/cf6f68efdcf625fdc060607df0f3baef/quwowooybuqbl6ntboz3.jpg"/>

Contentful Image API vs ImageEngine Image API

Contentful API Image

The Contentful optimized image has a content length of 46967 bytes in PNG format. As shown below.

ImageEngine Optimized Image

The ImageEngine optimized the same PNG image to WebP format and reduced content length to 7924 bytes. As shown below.

Therefore, ImageEngine compresses the image far better than the Contentful without compromising with the content quality.

Thus, by directing image requests to the ImageEngine Delivery Address, ImageEngine will automatically detect the device, optimize the image, and deliver via its global server network. This will greatly accelerate image loading time, decrease the physical distance between the user and content cached on the network, and maintain the image quality.

Step 5: Tune-up the account with the help of the ImageEngine control panel. The settings can be modified, set engine origins, and customize the delivery addresses.

Let’s compare ImageEngine’s image and Contentful published image.

Contentful	ImageEngine
JPG Format – 629 KB	JPG Format – 314 KB
PNG Format – 631 KB	PNG Format – 387 KB
WebP Format – 329 KB	WebP Format – 297 KB

As you can see, the image size published by Contentful is significantly larger than ImageEngine’s optimized image, but there is negligible visual difference between the two. In addition to these formats, ImageEngine can also convert images to the new AVIF format which is not possible with Contentful API.

Conclusion

Organizations can integrate Contentful CMS with ImageEngine’s image optimization API and CDN to gain competitive advantages. One such advantage is climbing to the better spots on the search engine result pages. The faster speed has a direct connection with the improved user experience of the website and when the user experience improves, it improves the core web vitals that help in the achievement of goals related to the long-term presence on search engines.

The post How ImageEngine can Optimize Contentful CMS For Faster Web Performance appeared first on Codrops.

This content originally appeared on Codrops and was authored by advertiser