• Cheat sheets
  • Documentation
  • API reference
  • Product updates
  • Sign in
Kontent.ai Learn
  • Try Kontent.ai
  • Plan
  • Set up
  • Model
  • Develop
  • Create
Copyright © 2025 Kontent.ai. All rights reserved.
  • Web
  • Privacy policy
  • Cookies policy
  • Consent settings
  • Security
  • GDPR
  • Overview
  • Manage API keys
  • Hello World
  • Hello Web Spotlight
  • Try sample apps
  • Build apps
  • Decide navigation and URLs
  • Environments
    • Optimize images
    • Optimize performance
    • Enhance SEO
  • Get Developer Certification

Display customized images

Jake Kula, Jan Cerman
3 minutes
Image transformation (API) / Advanced asset management
Download PDF
  • TypeScript
  • .NET
0% complete
With image optimization and art direction in mind, let’s go through how to display customized images in your app so that they appear just as content creators intended.

How customized images are stored

Behind the scenes, customized images are stored as asset renditions with metadata describing how to transform the original image. The following JSON example from Delivery API shows an asset element containing the image. Notice the renditions property in the asset’s value, which specifies how to customize the image.
  • JSON
To display the customized version of the image, you append the default asset rendition’s query to the asset’s url.

Display customized images

When you get a content item with an asset element, check if the asset element specifies an asset rendition and then apply the rendition. Content creators can create only a single customization per image, so it’s safe to use the default rendition for all images.
  • TypeScript
Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!
Sign in
{
  "type": "asset",
  "name": "Image",
  "value": [
    {
      "name": "iStock-1140334771.jpg",
      "description": null,
      "type": "image/jpeg",
      "size": 4858659,
      "url": "https://assets-us-01.kc-usercontent.com/40886722-9bde-00cb-08d7-36b32d4a6d7b/9858cb0a-46de-4d5e-8970-42222e35463d/iStock-1140334771.jpg",
      "width": 3863,
      "height": 2578,
      "renditions": {
        "default": {
          "rendition_id": "7618a0e0-ce51-4748-b404-e0b828861c69",
          "preset_id": "a6d98cd5-8b2c-4e50-99c9-15192bce2490",
          "width": 1600,
          "height": 1200,
          "query": "w=1600&h=1200&fit=clip&rect=1539,0,1600,1200"
        }
      }
    }
  ]
}
The JavaScript SDK can apply asset renditions automatically for you. To automatically use the default asset rendition, provide the defaultRenditionPreset configuration option when initializing the Delivery client.
  • Optimize every image
  • Resize your images
  • Optimize for the web
  • Customize and art direct
  • Display customized images
// Tip: Find more about JS/TS SDKs at https://kontent.ai/learn/javascript
import { createDeliveryClient } from '@kontent-ai/delivery-sdk';

// Specifies which asset rendition to use by default by providing defaultRenditionPreset
const deliveryClient = createDeliveryClient({
  environmentId: 'KONTENT_AI_ENVIRONMENT_ID',
  // Automatically applies the 'default' asset rendition if assets specify it
  defaultRenditionPreset: 'default'
});

// Requests a content item
const response = await deliveryClient.item('my_article')
  .toPromise();

// Gets the first asset in the 'teaser_image' asset element
const asset = response.data.item.elements.teaser_image.value[0];

// Gets the asset's URL. If the asset specifies a rendition, it's automatically applied.
const assetUrl = asset.url;
  • How customized images are stored
  • Display customized images