🍪 Cookie Notice

We use cookies to learn how you interact with our content, and show you relevant content and ads based on your browsing history. You can adjust your settings below. Here's our policy.

Cookie settings
Skip to main content

Access image dimensions of assets in JavaScript

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)
warn:

Please 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, if the image has been replaced by one with different dimensions using the Replace Asset app, the asset URL will not reflect these changes.