Image resizing
After uploading an image to Storyblok, you can use the resizing service to optimize, resize, and crop them in various ways.
Section titled Options Options
Section titled Resizing Resizing
Go to your browser and enter in the URL:
a.storyblok.com/f/39898/3267c81723/flowers.jpg/m/500x500
You should see the image with 500px of width and 500px of height. But 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 enter a height of 0:
a.storyblok.com/f/39898/3267c81723/flowers.jpg/m/500x0
Section titled Fit in Fit in
The fit-in argument specifies that the image should not be auto-cropped but rather auto-resized (shrank) to fit in an imaginary box of width and height. 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
a.storyblok.com/f/39898/3267c81723/flowers.jpg/m/fit-in/200x200/filters:fill(CCCCCC)
The output with a grey fill color filters:fill(CCCCCC):
)
Example 2
a.storyblok.com/f/39898/3267c81723/flowers.jpg/m/fit-in/200x200/filters:fill(transparent):format(png)
The output with a transparent fill color filters:fill(transparent) and transformed into a PNG:
:format(png)){kind=spacer}
Section titled Changing the format Changing the format
You can also change the output format of any image you upload. Possible options include “webp”, “jpeg”, “gif”, “png” or "avif".
Example
a.storyblok.com/f/39898/3267c81723/flowers.jpg/m/fit-in/200x200/filters:format(avif)
The output with a jpg picture transformed to an avif:
)
Section titled Adjusting the quality 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.
Only available in JPG format.
Example
a.storyblok.com/f/39898/3267c81723/flowers.jpg/m/200x150/filters:quality(10)
Here's a jpg picture with a compression rate of 10:
)