npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@uponcommerce/nieo

v1.7.0-beta.2

Published

Use [Next.js advanced **\<Image/>** component](https://nextjs.org/docs/basic-features/image-optimization) with the static export functionality. Optimizes all static images in an additional step after the Next.js static export.

Downloads

1

Readme

Next.js Image Export Optimizer

Use Next.js advanced <Image/> component with the static export functionality. Optimizes all static images in an additional step after the Next.js static export.

  • Reduces the image size and page load times drastically through responsive images
  • Fast image transformation using sharp.js (also used by the Next.js server in production)
  • Conversion of JPEG and PNG files to the modern WEBP format by default
  • Serve the exported React bundle only via a CDN. No server required
  • Automatic generation of tiny, blurry placeholder images
  • Minimal configuration necessary
  • Supports TypeScript
  • Supports remote images which will be downloaded and optimized
  • Supports animated images (accepted formats: GIF and WEBP)

Placement of the images:

  • All images that should be optimized are stored inside the public folder like public/images (except for the statically imported images and remote images). The images are then referenced in the src attribute of the <ExportedImage /> component.

Installation

npm install @uponcommerce/nieo

# Or
yarn add @uponcommerce/nieo
pnpm install @uponcommerce/nieo

Configure the library in your Next.js configuration file:

// next.config.js
module.exports = {
  images: {
    loader: "custom",
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
  transpilePackages: ["@uponcommerce/nieo"],
  env: {
    nextImageExportOptimizer_imageFolderPath: "public/images",
    nextImageExportOptimizer_exportFolderPath: "out",
    nextImageExportOptimizer_quality: 75,
    nextImageExportOptimizer_storePicturesInWEBP: true,
    nextImageExportOptimizer_exportFolderName: "imagesOptimized",

    // If you do not want to use blurry placeholder images, then you can set
    // nextImageExportOptimizer_generateAndUseBlurImages to false and pass
    // `placeholder="empty"` to all <ExportedImage> components.
    nextImageExportOptimizer_generateAndUseBlurImages: true,
  },
};
  1. Add the above configuration to your next.config.js

  2. Change the default values in your next.config.js where appropriate. For example, specify the folder where all the images are stored (Defaults to public/images)

  3. Change the export command in package.json

    {
    -  "export": "next build && next export",
    +  "export": "next build && next export && nieo"
    }

    If your Next.js project is not at the root directory where you are running the commands, for example if you are using a monorepo, you can specify the location of the next.config.js as an argument to the script:

    "export": "next build && next export && nieo --nextConfigPath path/to/my/next.config.js"

    If you want to specify the path to the output folder, you can either do so by setting the nextImageExportOptimizer_exportFolderPath environment variable in your next.config.js file or by passing the --exportFolderPath argument to the script:

     "export": "next build && next export && nieo --exportFolderPath path/to/my/export/folder"
  4. Change the <Image /> component to the <ExportedImage /> component of this library.

    Example:

    // Old
    import Image from "next/image";
    
    <Image
      src="images/VERY_LARGE_IMAGE.jpg"
      alt="Large Image"
      width={500}
      height={500}
    />;
    
    // Replace with either of the following:
    
    // With static import (Recommended)
    import ExportedImage from "@uponcommerce/nieo";
    import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg";
    
    <ExportedImage
      src={testPictureStatic}
      alt="Static Image"
      layout="responsive"
    />;
    
    // With dynamic import
    import ExportedImage from "@uponcommerce/nieo";
    
    <ExportedImage
      src="images/VERY_LARGE_IMAGE.jpg"
      alt="Large Image"
      width={500}
      height={500}
    />;

    The static import method is recommended as it informs the client about the original image size. For image sizes larger than the original width, the next largest image size in the deviceSizes array (specified in the next.config.js) will be used for the generation of the srcset attribute.

    For the dynamic import method, this library will create duplicates of the original image for each image size in the deviceSizes array that is larger than the original image size.

  5. In the development mode, either the original image will be served as a fallback when the optimized images are not yet generated or the optimized image once the image transformation was executed for the specific image. The optimized images are created at build time only. In the exported, static React app, the responsive images are available as srcset and dynamically loaded by the browser.

  6. This library also supports remote images. You have to specify the src as a string starting with either http or https in the ExportedImage component.

    import ExportedImage from "@uponcommerce/nieo";
    
    <ExportedImage
      src="https://example.com/remote-image.jpg"
      alt="Remote Image"
      fill
      style={{ objectFit: "cover" }}
      priority
    />;

    In order for the image optimization at build time to work correctly, you have to specify all remote image urls in a file called remoteOptimizedImages.js in the root directory of your project (where the next.config.js is stored as well). The file should export an array of strings containing the urls of the remote images. Returning a promise of such array is also supported.

    Example:

    // remoteOptimizedImages.js
    module.exports = [
      "https://example.com/image1.jpg",
      "https://example.com/image2.jpg",
      "https://example.com/image3.jpg",
      // ...
    ];
    // Or with a promise
    module.exports = new Promise((resolve) =>
      resolve([
        "https://example.com/image1.jpg",
        "https://example.com/image2.jpg",
        "https://example.com/image3.jpg",
        // ...
      ])
    );

    At build time, the images will be downloaded each time (as they might have changed) and optimized if an image is not yet in the cache or the image changed.

  7. You can output the original, unoptimized images using the unoptimized prop. Example:

    import ExportedImage from "@uponcommerce/nieo";
    
    <ExportedImage
      src={testPictureStatic}
      alt="Original, unoptimized image"
      unoptimized={true}
    />;
  8. Overriding presets in next.config.js:

    Placeholder images: If you do not want the automatic generation of tiny, blurry placeholder images, set the nextImageExportOptimizer_generateAndUseBlurImages environment variable to false and set the placeholder prop from the <ExportedImage /> component to empty.

    Usage of the WEBP format: If you do not want to use the WEBP format, set the nextImageExportOptimizer_storePicturesInWEBP environment variable to false.

    Rename the export folder name: If you want to rename the export folder name, set the nextImageExportOptimizer_exportFolderPath environment variable to the desired folder name. The default is nextImageExportOptimizer.

  9. You can still use the legacy image component next/legacy/image:

    import ExportedImage from "@uponcommerce/nieo/legacy/ExportedImage";
    
    import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg";
    
    <ExportedImage src={testPictureStatic} alt="Static Image" layout="fixed" />;
  10. Animated images: You can use .gif and animated .webp images. @uponcommerce/nieo will automatically optimize the animated images and generate the srcset for the different resolutions.

    If you set the variable nextImageExportOptimizer_storePicturesInWEBP to true, the animated images will be converted to .webp format which can reduce the file size significantly. Note that animated png images are not supported by this package.

How it works

The <ExportedImage /> component of this library wraps around the <Image /> component of Next.js. Using the custom loader feature, it generates a srcset for different resolutions of the original image. The browser can then load the correct size based on the current viewport size.

In the development mode, the <ExportedImage /> component falls back to the original image if the optimized images are not yet generated. In the exported, static React app, the responsive images are available as srcset and dynamically loaded by the browser.

All images in the specified folder, as well as all statically imported images will be optimized and reduced versions will be created based on the requested widths.

The image transformation operation is optimized as it uses hashes to determine whether an image has already been optimized or not.

Warning Version 1.0.0 is a breaking change. It follows the changes introduced in Next 13.0.0 which replaces the next/image component with next/future/image. If you are using Next 12 or below, please use version 0.17.1.