Image resizing

After uploading an image to Storyblok, you can use the resizing service to optimize, resize and crop them in a wide variety of ways.

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.
  src="{{ blok.image | resize:'100x0' }}"
  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 wise to write a helper function like the following example in javascript:

Example in Javascript

function resize(image, option) {
  var imageService = '//'
  var path = image.replace('//', '')
  return imageService + option + path

var example = '//'
console.log(resize(example, '500x500'))
// Will give you //

Example in PHP


function resize($image, $option) {
  $imageService = '//';
  $path = str_replace('//', '', $image);
  return $imageService . $option . $path;

$example = '//';

echo resize($example, '500x500');
// Will give you //



Go to your browser and enter in the url:

You should see the image with 500px of width and 500px of height. But go ahead and play with the dimensions in the URL, and you’ll see the image change accordingly.

If you want the dimensions to be propositional, you can just enter a height of 0:

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

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


Example 2

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

Changing the format

You can also change the output format of any image you upload. Possible options include “webp”, “jpeg”, “gif” or “png”.


The output with a jpg picture transformed to a gif:


Adjusting the quality

You can also change the compression rate of the jpg image using the quality filter. The value can be anything between 0 and 100. Note: only available for JPG format.


Here’s a jpg picture with a compression rate of 10: