What are image profiles?

A single image can be used in many ways; as a hero image on a landing page, or a featured image in a blog, or a product image in a store catalog. It might also be used in an email campaign or a social media post. Because there are so many reasons to reuse images, you need a way to optimize your images for use in different places.

In Acoustic Content, image profiles are used to store predefined sets of image dimensions for all the ways an image will be used. Here's how your team uses image profiles when working with Acoustic Content.

Your hub manager

Your hub manager, in collaboration with your site designer and developer, creates the perfect image profile for each place an image is rendered.

Imagine your content composers are required to regularly launch new product lines. They need to display a product image in different media such as desktops, tablets, and smartphones. You might create the following rendition definitions in an image profile:

Table 1. Image profile settings. The table shows the label and key along with a set width and height for desktop, tablet, and smartphone.
Label Key Width Height
Desktop desktop 1600 450
Tablet tablet 1024 400
Smartphone smartphone 768 280

When a hub manager adds an image element to a content type, they select which image profile to associate with that element. So, if they're creating a content type for a page that includes a banner image, they choose a banner image profile they created previously.

Figure 1. Image profile applied to an image element in a content type
The image shows a content type with various elements. The image element is highlighted. A callout notes that the image element has the CityCool web image profile applied to it. The renditions are as follows: Desktop 500 x 250, mobile 300 x 150, and feature 200 x 100.

Your creative team

When your creative team uploads assets to your hub, they select the image profiles to use with each asset. The same is true for assets sourced from Shutterstock. Acoustic Content automatically creates different renditions for an image based on the renditions defined in each image profile assigned to the asset. Each rendition saves a different scale and crop of the original image. You'll probably want to review and update the renditions generated by your hub just in case your CEO's head gets cropped by mistake in a publicity shot.

Your composers

When composers create content, they can either select images from your hub's asset collection using a palette, or they can upload their own images.

Figure 2. Multiple renditions are created from one source image
The figure shows an image being uploaded into a content item. After the single source image is uploaded, multiple renditions of that image are created based on the image profile.

Different things can happen when selecting or uploading an image:

  • If the image selected by the composer from the palette is already mapped to the same image profile used by the image element, then the content item inherits the renditions from the selected image asset.

  • If the image selected by the composer isn't mapped to the same image profile, or if a composer uploads their own image, then the image profile is automatically assigned to the image asset. Acoustic Content then creates renditions on the image asset as defined in the image profile. Again, you'll probably want to review and update the renditions generated by your hub just in case your featured product is out of frame.

  • If the image element in the content form hasn't been assigned an image profile, no additional renditions are created.

When a composer uploads an image to an image element, they can configure the element to either accept all updates from the original asset or to retain the original version of the image and any renditions. In most cases, composers don't need to change the default value of "Accept all updates". By maintaining images and their renditions in the asset collection rather than in individual content items, you only need to go to one place to update an image everywhere it's used. Composers only choose not to accept updates from the original asset if a particular piece of content needs an image to remain unchanged for some reason.

Your developers

Now, here's some nerdy stuff for any developers reading this topic. After an asset or content item's status is changed to published, developers use APIs to retrieve the different image renditions. Akamai serves both the original image and each rendition. Renditions are applied "at the edge" so only a single image is stored in your hub and Akamai. This feature helps images to render super fast in a website or app. Pretty cool, huh!

Figure 3. API calls for specific renditions of a source image
The figure shows the content item with the image element highlighted. Call outs extend from the source image to a tablet, desktop, and mobile device to represent APIs calling specific renditions of the source image.