Add the ImageEngine Delivery Address to the React component and start optimizing all images stored in Contentful.
React Image Component for Contentful
Vue Image Component for Contentful
Add the ImageEngine Delivery Address to the Vue component and start optimizing all images stored in Contentful.
Angular Image Component for Contentful
Add the ImageEngine Delivery Address to the Anuglar component and start optimizing all images stored in Contentful.
How to Start Using ImageEngine
Start Optimizing Images From Contentful
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.
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.
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.