Simplify image workflow and optimize visual experiences with imgix and Contentful

Pushing the frontiers of digital experiences

imgix is a leading provider of end-to-end image and video processing. It enables developers and creators to deliver a better end-user experience and website performance — all while reducing costs. 

"Our customers push the frontiers of digital experiences. When they need advanced image and video capabilities at scale, we help them leverage digital asset management and delivery solutions like imgix." 

Allan White, Senior Enterprise Solutions Engineer at Contentful.

With an API at its core, Contentful allows creators to organize and structure content how they want, by building custom content models instead of dealing with rigid templates. imgix, as an API-based visual media solution, works extremely well with Contentful on multiple levels: 

1. Creators can search, filter, and select images from a variety of storage without leaving Contentful.

2. Developers have full control over image delivery, finding the right balance between compression, file format, size, and other creative effects using imgix’s Rendering API.

3. Editorial users don't need to worry about image size or quality impacting delivery, and the Contentful App Framework ensures a consistent, native editorial experience.

How the imgix Contentful app works

The imgix app is built on top of the imgix Management API to help users interface with some of the same features that they might expect when using Asset Manager. In its current state, users can choose a source from their imgix account, search, and select an image from their source to add to their content model.

1. Configuration 

Upon installation, users will configure their app using an API key generated via the imgix Dashboard. This key will require permissions for Sources and Image Manager Browse.

2. Add imgix to your content model

Of the many content types that users can choose from, imgix specifically integrates with the JSON object content type. This allows the app to deliver the image with its associated metadata to the developer. Users can designate a field to use imgix by navigating to that field’s Appearance tab and selecting the app.

3. Search, browse, and select an image

From any instance of a field using the imgix app, users can open a modal to search and browse their images. From here, they can select an image to add, replace an image, or clear a selection from the field.

How to transform images using the imgix Rendering API

Optimizing and transforming images is easy with imgix. One of its most powerful parameters is auto, which automates a baseline level of optimization, compression, and format conversion. 

Once users have configured and deployed an imgix Source, they can begin making asset requests to imgix. These requests differ slightly for each imgix Source type. To find out more, check out the imgix onboarding guide. For the Rendering API, all requests have the same basic structure:

Once the base URL for the assets is set up, users can start applying URL parameters to modify their images to their specifications. 

We will demonstrate a powerful set of parameters below — the full range of what's available can be found in the Rendering API documentation.

On the left, we have the original image:

• The image file size: 8.65 MB

• The image dimensions: 3621×3076

• The image file format: jpeg

Now, a number of transformations are applied. Not only do users get to change the look and feel, but they can significantly optimize the image performance. The rendered image has a file size of 40.5 kB. It’s a 99.5% reduction from the original image.

• auto=compress,enhance: Tells imgix to optimally compress the file size and enhance the color. 

• w=800&h=3400: Sets the width and height of the image.

• fit=crop: Tells imgix how to deal with the extraneous data caused by the change in dimensions.

• crop=top: Tells imgix to crop from the top of the image, down.

• q=60: Reduces the image quality slightly to improve compression (default is 75).

• hue=20: Changes the hue, or tint, of each pixel in the image.

• con=20: Adjusts the contrast of the image.

Lastly, a logo watermark is overlaid using mark, mark-align, mark-pad, mark-scale.

Setting default parameters for the source

If there is a set of parameters that works well across all images, users can set them as defaults so that they're applied to all images automatically (users can override them on a per-image basis as needed). For example, if they want to set up standard cropping, they would simply add the fit and crop parameters as defaults in the Source. Check out this video to follow along.

Let imgix future-proof your visual media

Visual media is one of the most impactful elements on websites and apps, but it’s also one of the most challenging for developers and creators.

Managing and delivering the various sizes and formats of media at scale in the desired output formats can be daunting to even the most technically sophisticated teams — especially while balancing quality and size to achieve a rich experience without compromising speed. 

imgix is built to streamline the visual media workflow for editorial and engineering teams, which gives customers robust image and video processing and ensures fast and reliable content delivery.

To get started, simply create a free imgix account, connect imgix to your existing file source, and install the imgix app in your Contentful account. 

• Get an imgix demo or talk to our product specialists

• Learn more about the Contentful imgix App

• Create a free imgix account

• Try Contentful for free