Skip to content

Integrations

Next.js custom Image loader for Nitrogen AIO

This documentation explains how to create a custom image loader in Next.js to modify image URLs for the Nitrogen AIO. This allows you to optimize images specifically for Nitrogen AIO delivery.

Prerequisites:

  • You must have a domain configured on Nitrogen
  • You must have AIO enabled, please refer this article.
  • Basic understanding of Next.js and Nitrogen AIO.
  • Node.js and npm (or yarn) installed on your development machine.

Steps:

  1. Install package :

    npm i @n7.io/nitrogen-aio-nextjs-loader

  2. Update Next.js Configuration:

    Open your Next.js configuration file, typically located at next.config.js in the root directory of your project. Add the following configuration under the images section:

    const nextConfig = {
        images: {
            // ... other image configurations
            loader: 'custom',
            loaderFile: 'node_modules/@n7.io/nitrogen-aio-nextjs-loader/aio-loader.js',
        },
};

export default nextConfig;

    This configuration tells Next.js to use your custom aioLoader function for all image optimization tasks.

  3. Using the Custom Image Loader: Now you can use the src attribute in your Next.js components to specify image URLs, and the custom loader will automatically modify them for Nitrogen AIO. For example:

    import Image from 'next/image';

function MyComponent() {
    return (
        <Image
        src="/images/my-image.jpg"
        alt="My image"
        width={800}
        />
    );
}

    In this example, the image URL /images/my-image.jpg will be transformed to /images/my-image.jpg?aio=w-800 before being delivered to the browser. Nitrogen AIO will then resize the image to a width of 800 pixels or nearest bucket.

Additional Notes:

  • Do not put aio parameter in src attribute, as the loader constructs this parameter based on the width and height attributes of Image component. If both found, AIO will throw 400 error (Query deserialize error: duplicate fieldaio`).
  • Loader will not work on HTML's img tag, it will apply only to Image component.

Mobile App Image Optimization using Nitrogen AIO

This documentation explains which Accept Headers needs to be included for Images in Mobile App. This allows you to optimize images specifically for Nitrogen AIO delivery.

Prerequisites:

  • You must have a domain configured on Nitrogen
  • You must have AIO enabled, please refer this article.
  • Basic understanding of Mobile App Image Properties and Nitrogen AIO.

Mandatory Headers for Optimized Image Delivery

These are the recommended request headers. Please modify the values based on the user's mobile device and network configuration:

X-Device-Dpr = 1
X-Device-Format = image/avif,image/webp,image/jpeg,image/png
X-Device-Ram = 4096
X-Device-Width = 980
X-Device-Bandwidth = 10
X-Device-Type = app

Description:

  • X-Device-Dpr: Specifies the screen's device pixel ratio to serve the right image quality.
  • X-Device-Bandwidth: Indicates the device’s current internet speed in megabytes per second (Mbps).
  • X-Device-Width: Tells the server the ideal image width of the device screen (in pixels).
  • X-Device-Ram: Shares how much available RAM the device has (in MBs).
  • X-Device-Format: Specifies the image formats supported and available on the device for optimized delivery, such as webp or avif.
  • X-Device-Type: Identifies if the request is coming from a mobile app by using the value "app".