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.

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.

Ensure your app references the correct domain when handling images.

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 Opens in new tab
• Set up a Custom Assets Domain Using Microsoft Azure Opens in new tab
• Set up a Custom Assets Domain Using Google Cloud Opens in new tab

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

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"
      }
    }
  ]

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