Image resizing

After you have uploaded an image to Storyblok you can use the resizing service to optimize, resize and crop them for your needs.

If you use the Storyblok rendering service you can just call the resize helper:

{{ blok.image | resize:'300x300' }}

# Example using lazyloaded responsive images with lazysizes.
# https://afarkas.github.io/lazysizes/
<img
  src="{{ blok.image | resize:'100x0' }}"
  data-sizes="auto"
  data-src="{{ blok.image | resize:'300x0' }}"
  data-srcset="{{ blok.image | resize:'300x0' }} 300w,
  {{ blok.image | resize:'600x0' }} 600w,
  {{ blok.image | resize:'900x0' }} 900w" class="lazyload img-responsive" />

For self hosted or client side projects it would be the easiest way to write a helper function like the following example in javascript:

Example in Javascript

function resize(image, option) {
  var imageService = '//img2.storyblok.com/'
  var path = image.replace('//a.storyblok.com', '')
  return imageService + option + path
}

var example = '//a.storyblok.com/f/39898/bd04dbf53c/amp_blog.jpg'
console.log(resize(example, '500x500'))
// Will give you //img2.storyblok.com/500x500/f/39898/bd04dbf53c/amp_blog.jpg

Example in PHP

<?php

function resize($image, $option) {
  $imageService = '//img2.storyblok.com/';
  $path = str_replace('//a.storyblok.com', '', $image);
  return $imageService . $option . $path;
}

$example = '//a.storyblok.com/f/39898/bd04dbf53c/amp_blog.jpg';

echo resize($example, '500x500');
// Will give you //img2.storyblok.com/500x500/f/39898/bd04dbf53c/amp_blog.jpg

Options

Resizing

Go to your browser and enter in the url:

img2.storyblok.com/500x500/f/39898/3267c81723/flowers.jpg

You should see the image with 500px of width and 500px of height. Just play with it in the url to see the image change.

If you just want it to be proportional to the width, enter a height of 0, like:

img2.storyblok.com/500x0/f/39898/3267c81723/flowers.jpg

Fit in

The fit-in argument specifies that the image should not be auto-cropped but auto-resized (shrinked) to fit in an imaginary box of width and height, instead. To fill out the box with a color you can use the fill filter filters:fill(CCCCCC) with a hexadecimal RGB expression (without the “#” character).

Example 1

img2.storyblok.com/fit-in/200x200/filters:fill(CCCCCC)/f/39898/3267c81723/flowers.jpg

The output with a grey fill color filters:fill(CCCCCC):

Img

Example 2

img2.storyblok.com/fit-in/200x200/filters:fill(transparent):format(png)/f/39898/3267c81723/flowers.jpg

The output with a transparent fill color filters:fill(transparent) and transformed to a png:
Img

Changing the format

You can change the output format of the image. Possible options are “webp”, “jpeg”, “gif” or “png”.

Example

img2.storyblok.com/fit-in/200x200/filters:format(gif)/f/39898/3267c81723/flowers.jpg

The output with a jpg picture transformed to a gif:

Img

Changing the quality

You can also change the compression rate of the jpg image using the quality filter. The value can be 0-100.

Example

img2.storyblok.com/200x150/filters:quality(10)/f/39898/3267c81723/flowers.jpg

The output with a jpg picture with a compression rate of 10:

Img

Documentation