Usage – Mighty Image | Documentation

When you have completed the installation you can import the package and use the component

Use component

Import the module

import { MightyImage } from 'next-mighty-image';

Add <MightyImage /> component with src ,alt , height and width properties

            <div className="relative ">
                    <MightyImage
                      src={/products/red-chair-2022.png}
                      alt={"A product shot of a red chair"}
                      height={500}
                      width={500}
                    />
            </div>

Properties

Following properties are supported. src, alt, width and height are mandatory

{
    src: string,
    alt: string,
    width: number,
    height: number,
    tranformations: { 
            quality: number, 
            greyscale: boolean, 
            sepia: boolean, 
            boxfit: string,         // 'cover','contain', 'fill', 'inside', 'outside',
            gravity: string,        // 'top','right top','right','right bottom','bottom','left bottom','left','left top',
            croptop: number, 
            cropleft: number, 
            smartcrop: boolean, 
            format: string,         // 'jpeg', 'png', 'webp'
            progressive: boolean, 
    },
  sizes: {
    sm: { w: number, h: number },
    md: { w: number, h: number },
    lg: { w: number, h: number },
  },
  label: {
    text: string,
    top: number,
    left: number,
    color: string,      // Hex of a RGBA color without #
    width: number,
    height: number,
  };
  className: string, 
  onClick: any, 
  loading: string,      // 'lazy', 'eager'
}

Sizing breakpoints

Size	Breakpoint
sm	viewport width <= 768px
md	viewport width <= 1200px
lg	viewport width > 1200px

Examples

Lazy loading, breakpoint sizeing and conversion to Webp

  <MightyImage
                src={/products/red-chair-2022.png}
                alt={"A product shot of a red chair"}
                height={500}
                width={500}
                loading={'lazy'}
                tranformations={{
                  quality: 100,
                  boxfit: 'contain',
                  format: 'webp',
                }}
                sizes={{
                  sm: { w: 200, h: 300 },
                  md: { w: 150, h: 230 },
                  lg: { w: 300, h: 455 },
                }}
              />