Skip to main content

Can I optimize KurocoFiles images with Nuxt Image or next/image?

The approach for optimizing images served from KurocoFiles differs depending on your framework and hosting environment.

When using Next.js​

When using KurocoFront​

KurocoFront supports static file hosting only and does not support server-side image processing. Therefore, Next.js image optimization (/_next/image) is not available. Use one of the following options:

  • Use the <img> tag directly
  • Set unoptimized: true in next.config.js to disable optimization while continuing to use the <Image> component
  • Configure a custom loader so that the <Image> component uses KurocoFiles' dynamic image conversion
next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
};

When you use the <img> tag directly or set unoptimized: true, images are served directly from KurocoFiles. If the browser supports WebP, KurocoFiles converts the image to WebP before delivery. However, images are not switched according to the screen width via srcset.

Responsive images with a custom loader​

If you need to serve images according to the screen width via srcset, configure a custom loader. The custom loader adds the width parameter to each image URL generated by the <Image> component, and KurocoFiles resizes the image using dynamic conversion of images. This works with static export via output: 'export'.

next.config.js
module.exports = {
  output: 'export',
  images: {
    loader: 'custom',
    loaderFile: './src/lib/kurocoImageLoader.js',
  },
};
src/lib/kurocoImageLoader.js
'use client';

export default function kurocoImageLoader({ src, width, quality }) {
  // Return non-KurocoFiles images as-is
  if (!/^https:\/\/[^/]+\.kuroco-img\.app\//.test(src)) {
    return src;
  }
  const url = new URL(src);
  url.searchParams.set('width', String(width));
  if (quality) {
    url.searchParams.set('quality', String(quality));
  }
  return url.toString();
}

With this configuration, the <Image> component outputs a srcset like the following:

<img srcset="https://sample.g.kuroco-img.app/v=1717413612/files/topics/sample.jpg?width=640 640w,
             https://sample.g.kuroco-img.app/v=1717413612/files/topics/sample.jpg?width=750 750w,
             ...">
info

By default, KurocoFiles' dynamic image conversion does not enlarge images beyond their original size. If a width larger than the original image width is specified, the image is served at its original size. For details, see enable.

When using a hosting service that supports server-side processing​

In environments such as Vercel or Netlify that support server-side processing, you can use next/image as-is, with responsive support and format conversion handled by the hosting service.

However, images from external domains such as kuroco-img will cause an error in the <Image> component unless explicitly added to remotePatterns in next.config.js.

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.g.kuroco-img.app',
      },
    ],
  },
};

When added to remotePatterns, Next.js (the hosting service) fetches the original image from KurocoFiles and performs resizing and format conversion. If you add dynamic conversion of images parameters such as width to src, the image converted by KurocoFiles is further converted on the Next.js side.

If you want image conversion to be handled only by KurocoFiles, you can also use the custom loader in this environment. In that case, output: 'export' in next.config.js is not required. When using the custom loader, images are served directly from KurocoFiles, and the hosting service's image optimization is not used.

When using Nuxt.js​

With Nuxt Image (@nuxt/image), you can configure the Fastly Provider to leverage KurocoFiles' Fastly image transformation directly from the <NuxtImg> component.

Set baseURL to the domain of the image URLs included in API responses (https://xxxx.g.kuroco-img.app).

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    provider: 'fastly',
    fastly: {
      baseURL: 'https://sample.g.kuroco-img.app',
    },
  },
});
pages/index.vue
<template>
  <NuxtImg src="/files/topics/sample.jpg" width="640" quality="80" />
</template>

width and quality specified on the <NuxtImg> component are added to the image URL as query parameters with the same names. In the example above, https://sample.g.kuroco-img.app/files/topics/sample.jpg?width=640&quality=80 is output to src. In addition, srcset includes a URL with width=1280 for high-resolution displays. You can also specify an image URL starting with https:// obtained from the API directly in src.

For available parameters, see Dynamic conversion of images.

Support

If you have any other questions, please contact us or check out Our Slack Community.

Contact form
Join Kuroco Slack community