Skip to main content

Image Optimization

Usage

Usage is as simple as setting the width and height of the images you want to optimize (a requirement of next/image). If you have image optimizations turned on in the config, those images wll be optimized.

Image Style Issues

Since next/image needs to edit the image element, it may sometimes cause issues with image styles set up in Webflow. If you're experiencing issues with images, try disabling the optimizeImages option.

If you would just like to disable image optimization for one or a few images, you can add a custom attribute of data-next-ignore="true" to the image in Webflow, and DesignSync.js will not convert it to a next/image.