Getting started with Image Optimization

This guide will help you get started with using Edgenivo Image Optimization in your project, showing you how to import images, add the required props, and deploy your app to Edgenivo. Edgenivo Image Optimization works out of the box with Next.js, Nuxt, SvelteKit, and Astro.

• A Edgenivo account. If you don't have one, you can sign up for free.
• A Edgenivo project. If you don't have one, you can create a new project.
• The Edgenivo CLI installed. If you don't have it, you can install it using the following command:
  pnpmyarnnpmbun

  Terminal

  pnpm i -g vercel

  Terminal

  yarn global add vercel

  Terminal

  npm i -g vercel

  Terminal

  bun add -g vercel

1. Import images

   Next.js provides a built-in next/image component.

   app/example/page.jsx

   import Image from 'next/image';

   app/example/page.tsx

   import Image from 'next/image';

2. Add the required props

   This component takes the following required props:

   • src: The URL of the image
   • alt: A short description of the image
   • width: The width of the image
   • height: The height of the image

   When using local images you do not need to provide the width and height props. These values will be automatically determined based on the imported image.

   The example below uses a remote image with the width and height props applied:

   app/example/page.jsx

   <Image
     src="https://images.unsplash.com/photo-1627843240167-b1f9d28f732e"
     alt="Triangular frames arranged concentrically, creating a tunnel against a dark background."
     width={1920}
     height={1080}
   />

   app/example/page.tsx

   <Image
     src="https://images.unsplash.com/photo-1627843240167-b1f9d28f732e"
     alt="Triangular frames arranged concentrically, creating a tunnel against a dark background."
     width={1920}
     height={1080}
   />

   If there are some images that you wish to not optimize (for example, if the URL contains a token), you can use the unoptimized prop to disable image optimization on some or all of your images.

   For more information on all props, caching behavior, and responsive images, visit the next/image documentation.

3. Deploy your app to Edgenivo

   Push your changes and deploy your Next.js application to Edgenivo.

   When deployed to Edgenivo, this component automatically optimizes your images on-demand and serves them from the Edgenivo CDN.

Now that you've set up Edgenivo Image Optimization, you can explore the following:

• Explore limits and pricing
• Managing costs