Optimize your Storyblok images with Image Engine

Storyblok provides a free service for processing and serving your images through a CDN. With such service you can resize, crop, rotate, change format and apply many other transformations to your assets.

Even though the Image Service is available by default on any plan, you can use other services on top of our CDN to process and serve your images.

Image Engine

Image Engine is an effective service for optimizing your images and improving the performance of your web-based projects. You can use it in combination with Storyblok without any special configuration.

There are 2 main setup options for your Image Engine project. Depending on your preferences regarding flexibility, security and URL structure you can use a different configuration for your origin. There’s no best practice for the setup, that is really up to your needs and preferences.

Structure of the URL of an image

Let’s start by inspecting the construction of an asset stored in Storyblok:

https://a.storyblok.com/f/[ Space ID ]/[ Width x Height ]/[ Unique identifier ]/[ Filename ]

• Space ID: the id of the Storyblok space the asset belongs to.
• Width x Height: it’s the size of the image in pixels. For example: 1000x300.
• Unique identifier: a unique string generated for each asset. Not relevant to this tutorial.
• Filename: the filename of the asset.

Single Space Setup

If you want to set up your engine to pick images just from one space and have shorter URLs, you can do so by creating an origin in Image Engine with these settings:

• Origin URL: https://a.storyblok.com
• Advanced Options - Path: /f/[ Space ID ]

For example, if your domain in Image Engine is www.example.com and the URL of your asset is https://a.storyblok.com/f/201477/2400x1651/e84838fc00/cat.jpg, the final URL will be https://www.example.com/2400x1651/e84838fc00/cat.jpg.

Your Engine will pick images directly from your space without including the space ID in the URL. This fact has 2 benefits:

• Shorter URLs: since you don’t have to include the space id, the URL of your asset will be shorter.
• Increased security: since you are taking assets just from a specific space, nobody can abuse your engine with their own space. Let’s say that another Storyblok user wants to use your engine with assets from their space, they won’t be able to do so since you removed the space id in the path

Multi-Space Setup

If you want to use images from multiple spaces and you don’t mind having slightly longer URLs, you can setup up your origin this way:

• Origin URL: https://a.storyblok.com
• Advanced Options - Path: /f

For example, if your domain in Image Engine is www.example.com and the URL of your asset is https://a.storyblok.com/f/201477/2400x1651/e84838fc00/cat.jpg, the final URL will be https://www.example.com/201477/2400x1651/e84838fc00/cat.jpg.

In this way, you will just get rid of the f in the URL of the asset but you will still have to include the space ID. This means that you can include images from multiple spaces since the space is not fixed. What is a scenario that involves serving assets from multiple spaces? A simple example is when you refactor your Storyblok project in a new space, but you still reference the content to assets from the old space.

Storyblok and Image Engine

In conclusion, Storyblok and Image Engine can be easily used together, allowing you to serve optimized images with your favorite stack.