Next.js

Next.js v10 and above has in-built support for image optimization. Gumlet can be easily integrated with just a few lines of code.

You can use the Next.js image loader component to load images in the correct size from the Gumlet image service. The easiest way is to write a custom image loader like this.

export default function gumletLoader({ src, width, quality }) {
    if(src.includes("<CURRENT_IMAGE_DOMAIN>")){
        let parsedUrl = new URL(src);
        parsedUrl.hostname = "<your_gumlet_subdomain>.gumlet.io";
        parsedUrl.searchParams.set("w", width);
        parsedUrl.searchParams.set("q", quality || 80);
        return parsedUrl.toString();
    } else {
        return `${src}?w=${width}&q=${quality || 80}`;
    }
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  distDir: 'build',
  images: {
    loader: 'custom',
    loaderFile: './utils/imageloader.js',
  },
  //... other config
}

module.exports = nextConfig

For more details on this, please check next.js documentation.

📘
Heads up!
Next.js version 10.0.5 or above is required for this to work.

📘Heads up!

📘
Heads up!