Optimize Storyblok images & videos with TwicPics

This is our step-by-step guide to optimizing Storyblok images and videos with TwicPics.

Storyblok was conceived as a Headless CMS for developers and content creators.

By integrating Storyblok, merchants with zero technical skills can now easily manage their content and fulfill omnichannel strategies. Storyblok with its friendly interface and real-time visual editor enables the best user experience.

Storyblok provides its customers with integrations, add-ons, and plug-ins to its API-driven CMS that can extend functionalities, increase the value, and form a best-of-breed future-proof platform designed to fit any user's needs. Storyblok as an open API-driven architecture enables developer flexibility and productivity, improved user experience, and, most importantly, the ability to integrate their CMS with other API-led technologies.

Let’s say you want to optimize this Storyblok master image with TwicPics: https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg.

1. Go to TwicPics back-office and create a new path to deliver your Storyblok media

First you need to go to TwicPics back-office. Then select your workspace and domain from which you want to deliver your assets to create a new path. If you don’t have any workspace and/or domain yet you can create one. Workspaces are a dedicated close environment for your company and/or projects. A domain is a collection of paths and domain paths map two URLs:

• An output URL — where optimized assets will be served from
• A source URL — the storage where the media will be retrieved from

Taking the example of the subdomain.twic.pics domain:

• If / points to https://media.company.com/
• Then https://subdomain.twic.pics/image.png will point to https://media.company.com/image.png

Here you need to declare your image Source URL (a folder online where your images are stored). That is where you want to set Storyblok as your source. To do so let’s have a look at the structure of a freshly uploaded image in Storyblok:

You could simply declare Storyblok’s root assets domain (https://a.storyblok.com) as your Source URL, but to prevent the use of your domain by others you must add your Storyblok space ID (i.e. 39898) in your source URL: https://a.storyblok.com/f/39898.

Then click on Create:

Well done! Now your setup is done, that means you can access your Storyblok images through your TwicPics domain:

Any asset https://demo_prod.twic.pics/file.png will be mapped to https://a.storyblok.com/f/39898/file.png.

With our example, we’ll get:

https://demo_prod.twic.pics/3310x2192/e4ec08624e/demo-image.jpeg is mapped to our original image: https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg.

Want/Need to keep your space ID in your URLs?

When coding if you struggle to retrieve your filename without the space ID you can keep it just by simply adding it in the name of your path:

Now any asset https://demo_prod.twic.pics/f/39898/file.png will be mapped to https://a.storyblok.com/f/39898/file.png.

2. Integrate TwicPics on your front-end

Now that the setup is done you want TwicPics to auto-magically resize/crop/transform your images in your template according to the user context (device, screen quality & resolution, etc.).

To benefit from context-aware optimizations, you only need to integrate one of our libraries. The libraries understand the end-user device, connection, and CSS, and send requests to the TwicPics API to perform the necessary optimizations.

• You can rely on our Quick Start Guide to help you integrate TwicPics Native in HTML5.
• If you are using JS Framework(s) like React.js, Vue.js, Next.js, Nuxt.js, Angular… Make sure to check the TwicPics Components.

Only rarely will you need to hand-write API requests. Likely, it will only happen when you can't rely on context-aware optimization, e.g. when optimizing the Largest Contentful Paint in the viewport like banner images or videos.