1.3.4 • Published 2 months ago

vadimages-nextjs-image-optimizer v1.3.4

Weekly downloads
-
License
ISC
Repository
github
Last release
2 months ago

Vadimages Next.js image optimizer

This is a simple image optimizer for Next.js projects. It uses the sharp library to optimize images and the next/image component to display them.

Installation

npm install vadimages-nextjs-image-optimizer

Requirements

  • Node.js 16 or higher
  • Next.js 12 or higher
  • Set meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> in your layout head

Usage

1. Set environment variables

// In your next.config.js file
module.exports = {
    env: {
        vadImage_imagesPath: "public/assets",
        vadImage_buildFolderPath: "build",
        vadImage_quality: "92",
        vadImage_formats: ['webp', 'avif'].join(','),
        vadImage_optimizationDirName: "/opt/",
        vadImage_imagesSizes: [320, 480, 512, 640, 787, 1024, 1280, 1440, 1920].join(','),
        vadImage_pixelRatio: [1, 2, 3].join(','),

        vadImage_enableUpload: "true",
        vadImage_upload_accessKey: "YOUR_CF_ACCESS_KEY",
        vadImage_upload_secretKey: "YOUR_CF_SECRET_KEY",
        vadImage_upload_endpoint: "https://YOUR_CF_ACCOUNT_ID.r2.cloudflarestorage.com",
        vadImage_upload_domain: "https://pub-YOUR_CF_ACCOUNNT_ID.r2.dev/",
        vadImage_upload_bucket: "R2_BUCKET_NAME",
    },
}
VariableDescription
vadImage_imagesPathThe path to the images folder in your project.
vadImage_buildFolderPathThe path to the build folder in your project.
vadImage_qualityThe quality of the optimized images.
vadImage_formatsThe formats of the optimized images.
vadImage_optimizationDirNameThe name of the folder where the optimized images will be stored.
vadImage_imagesSizesThe sizes of the optimized images.
vadImage_pixelRatioThe pixel ratios of the optimized images.
vadImage_enableUploadEnable or disable image upload to Cloudflare.
vadImage_upload_accessKeyThe access key for the Cloudflare account.
vadImage_upload_secretKeyThe secret key for the Cloudflare account.
vadImage_upload_endpointThe endpoint for the Cloudflare account.
vadImage_upload_domainThe domain for the Cloudflare account.
vadImage_upload_bucketThe bucket name for the Cloudflare account.

2. Setup and run images build command

// In your package.json file
{
  "scripts": {
    "build:images": "vadimages-nextjs-image-optimizer --nextConfigPath ./next.config.js"
  }
}
npm run build:images

3. Use the VadImage component

import VadImage from 'vadimages-nextjs-image-optimizer';

export default function Home() {
    return (
        <VadImage
            src="/assets/image.jpg"
            alt="Image"
            width={1920}
            height={1080}
            mobileSrc="/assets/mobile-image.jpg"
            mobileWidth={640}
            mobileHeight={360}
        />
    );
}

The VadImage component has all the same props as the next/image component, plus the following additional props:

PropDescription
mobileSrcThe path to the mobile image.
mobileWidthThe width of the mobile image.
mobileHeightThe height of the mobile image.
1.3.4

2 months ago

1.3.3

3 months ago

1.3.2

3 months ago

1.3.1

3 months ago

1.2.14

4 months ago

1.2.15

4 months ago

1.2.13

4 months ago

1.2.12

4 months ago

1.2.11

4 months ago

1.2.10

4 months ago

1.2.9

6 months ago

1.2.8

6 months ago

1.2.7

6 months ago

1.2.6

6 months ago

1.2.5

6 months ago

1.2.4

6 months ago

1.2.3

6 months ago

1.2.2

6 months ago

1.2.1

6 months ago

1.2.0

7 months ago

1.1.3

7 months ago

1.1.2

7 months ago

1.1.1

7 months ago

1.0.9

7 months ago

1.0.8

7 months ago

1.0.7

7 months ago

1.0.5

7 months ago

1.0.4

7 months ago

1.0.3

7 months ago

1.0.2

7 months ago

1.0.1

7 months ago

1.0.0

7 months ago