Image Optimization

The default Setup of NuxtDoc uses the Image Service provided by Storyblok. You can use it to resize images on the fly! With Storybloks out of the box image service you can give your customers a high-quality, compelling brand experience at a speed they wouldn’t expect, no matter what device, platform or continent they’re on.

Installation

You won’t have to install anything to use our Image Service - there are no requirements to your system to increase your performance. Since we're using Storyblok as our headless CMS and therefore also upload our images to their platform all we have to do is to implement a quick helper to do so. Have a look at their documentation to see some of the possibilities.

Simple resizing example

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

let example = '//img2.storyblok.com/1000x0/f/39898/1000x664/ab64dad3bc/flowers.jpg'
console.log(resize(example, '500x500'))
// Will give you //img2.storyblok.com/500x500/f/39898/1000x664/ab64dad3bc/flowers.jpg

You can have a look at the NuxtDoc implementation in /plugins/helper.js – resizeImages function. We currently use it to resize the images added in the content field of your doc content-types to fit the 600px of the actual area to improve performance.