Image Ratio

import : 
import Image from 'next/image'

component : Image

<Image
      src="/img/static/logo.png"
      alt="logo"
      width={200}
      height={150}
/>

component : Image Priority
No lazyload for LCP(Largest Contentful Paint)

<Image
      src="/img/static/logo.png"
      alt="logo"
      width={200}
      height={150}
     priority
/>

import : 
import {imageLoader} from '@/utils/imageLoader'

component : Image Set URL


<Image
      loader={imageLoader}
      src="logo.png"
      alt="logo"
      width={200}
      height={150}
/>

component : Image Responsive


<Box component="figure" sx={{border:'1px solid var(--color-border)', width:'50%', }}>
      <Image
            loader={imageLoader}
            src="logo.png"
            alt="logo"
            width={200}
            height={150}
            layout="responsive"
      />
</Box>

component : Image Ratio
Ratio 1x1


<Grid container className="grid" spacing={2}>
      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 4, xl: 3 }}>
            <div className="info">
                  <div className="head"><strong>Ratio 1x1</strong></div>
            </div>
            <div className="content">
                  <Box component="figure" className="ratio ratio-1x1" sx={{border:'1px solid var(--color-border)'}}>
                        <Image
                              loader={imageLoader}
                              src="logo.png"
                              alt="logo"
                              width={200}
                              height={150}
                        />
                  </Box>
            </div>
      </Grid>
</Grid>

component : Image Contain
Ratio 1x1


<Grid container className="grid" spacing={2}>
      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 4, xl: 3 }}>
            <div className="info">
                  <div className="head"><strong>Ratio 1x1</strong></div>
            </div>
            <div className="content">
                  <Box component="figure" className="ratio ratio-1x1 img-contain" sx={{border:'1px solid var(--color-border)'}}>
                        <Image
                              loader={imageLoader}
                              src="logo.png"
                              alt="logo"
                              width={200}
                              height={150}
                        />
                  </Box>
            </div>
      </Grid>
</Grid>