Assets

Storyblok includes a digital asset management system for asset management and delivery. Editors can upload assets in their space’s Asset Library.

For more information on uploading and managing individual assets visit the Assets Management API documentation.

Tip

Learn how to use Storyblok's asset manager in our editor guide.

Asset CDN

Storyblok delivers all assets via an AWS CloudFront CDN. Most assets will be served once from the origin service and then subsequently from the CDN, ensuring minimal latency.

Regional domains

Images are served on different domains depending on the space's region.

Region	URL
United States	https://a-us.storyblok.com, https://a2-us.storyblok.com
Europe	https://a.storyblok.com, https://a2.storyblok.com
Australia	https://a-ap.storyblok.com, https://a2-ap.storyblok.com
Canada	https://a-ca.storyblok.com
China	https://a.storyblokchina.cn

Ensure your app references the correct domain when handling images.

Note

Use the a2 domains in case you are dealing with CORS related limitations.

Custom assets domain

Set up a custom assets domain by following one of the tutorials below:

Set up a Custom Assets Domain Using Amazon CloudFront

Set up a Custom Assets Domain Using Microsoft Azure

Set up a Custom Assets Domain Using Google Cloud

Image Service

On top of the CDN, Storyblok also provides an image service to modify images programmatically. To learn how to use the image service, visit the Image Service API Reference.

Asset MIME types

The following MIME types are supported:

• Image: image/x—png, image/png, image/gif, image/jpeg, image/avif, image/svg+xml, image/webp
• Video: video/*, application/mp4, application/x—mpegurl, application/vnd.apple.mpegurl, audio/webm
• Audio: audio/*
• Text: application/msword, text/plain, application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document

Caution

Spaces without payment info only accept assets with the image/* MIME type.

Unverified spaces accept assets of all MIME types except text/* and application/*.

Obtain image dimensions in the API

See the example below on how to extract the width and height of an image provided by a Storyblok asset URL.

const assetUrl = "//a.storyblok.com/f/51376/664x488/f4f9d1769c/visual-editor-features.jpg"
const dimensions = {
  width: assetUrl.split('/')[5].split('x')[0],
  height: assetUrl.split('/')[5].split('x')[1]
}
console.log(dimensions)

Note that this method only works with unmodified images. If the image dimensions have been altered using the Image Editor, the asset URL will not reflect these changes. Similarly, the asset URL will not reflect these changes if the image has been replaced by one with different dimensions using the Replace Asset app.

To keep track of changing dimensions, use the resolve_assets parameter set to 1 with the stories endpoint in the Content Delivery API. In the assets array of the API response, use the size key in the meta_data object to retrieve the up-to-date dimensions.

"assets": [
    {
      "id": 17075319,
      "content_type": "image/jpeg",
      "content_length": 6333586,
      "created_at": "2024-08-21T08:17:24.429Z",
      "updated_at": "2024-08-21T08:18:02.522Z",
      "deleted_at": null,
      "alt": "",
      "title": "",
      "copyright": "",
      "focus": "",
      "s3_filename": "f/243422/1024x1024/ec86b147a4/national-park.jpeg",
      "meta_data": {
        "size": "400x300"
      }
    }
  ]

Note

Please note that it may take a few minutes for the size property to take into account any updated image dimensions.

Private assets

In the Asset Library, the Private Asset toggle will mark an asset as private and allow access only with an access token, which can be generated in Settings > Asset Tokens.

Private assets can be resolved using the assets endpoint of the Content Delivery API. Find a JavaScript example below.

import { apiPlugin, storyblokInit } from '@storyblok/js';

const { storyblokApi } = storyblokInit({
  accessToken: SPACE_TOKEN,
  use: [apiPlugin],
});

const getSignedUrl = async (filename) => {
  const response = await storyblokApi.get('cdn/assets/me', {
    filename: filename,
    token: ASSET_TOKEN,
  });

  return response.data.asset.signed_url;
};

const assetUrl = await getSignedUrl(
'https://a.storyblok.com/f/184738/2560x1946/d20c274998/earth.jpg'
);

document.querySelector('#app').innerHTML = `
  <img src="${assetUrl}" width="200">
`;

Private assets can also be manipulated using the Image Service. Learn more in the Image Service API Reference.

Related resources

Assets in the Management API