Next.js 반응형 이미지 컴포넌트 구현방법 - 반응형 이미지 최적화

import { getImageProps } from 'next/image';
 
export default function ResponsiveImage() {
  const commonProps = { alt: '반응형 이미지 예제', sizes: '100vw' };
 
  const {
    props: { srcSet: desktopSrcSet },
  } = getImageProps({
    ...commonProps,
    width: 1440,
    height: 800,
    src: '/images/desktop.jpg',
  });
 
  const {
    props: { srcSet: tabletSrcSet },
  } = getImageProps({
    ...commonProps,
    width: 768,
    height: 1024,
    src: '/images/tablet.jpg',
  });
 
  const {
    props: { srcSet: mobileSrcSet, ...imgProps },
  } = getImageProps({
    ...commonProps,
    width: 375,
    height: 667,
    src: '/images/mobile.jpg',
  });
 
  return (
    <picture>
      <source media="(min-width: 1024px)" srcSet={desktopSrcSet} />
      <source media="(min-width: 768px)" srcSet={tabletSrcSet} />
      <img
        {...imgProps}
        srcSet={mobileSrcSet}
        style={{ width: '100%', height: 'auto' }}
      />
    </picture>
  );
}

// ... 생략
import desktop from '/desktop.jpg';
import tablet from '/tablet.jpg';
import mobile from '/mobile.jpg';
 
export default function ResponsiveImage() {
  const common = { alt: '반응형 이미지 예제', sizes: '100vw' };
  const {
    props: { srcSet: desktop },
  } = getImageProps({
    ...common,
    quality: 80,
    src: desktop,
  });
  const {
    props: { srcSet: tablet, ...rest },
  } = getImageProps({
    ...common,
    quality: 70,
    src: tablet,
  });
  const {
    props: { srcSet: mobile, ...rest },
  } = getImageProps({
    ...common,
    quality: 70,
    src: mobile,
  });
 
  return (
    <picture>
      <source media="(min-width: 1000px)" srcSet={desktop} />
      <source media="(min-width: 500px)" srcSet={tablet} />
      <source media="(min-width: 500px)" srcSet={mobile} />
      <img {...rest} style={{ width: '100%', height: 'auto' }} />
    </picture>
  );
}

import React from 'react';
import { getImageProps, ImageProps, StaticImageData } from 'next/image';
 
interface IResponsiveImage extends Omit<ImageProps, 'src'> {
  desktop: StaticImageData | string;
  tablet: StaticImageData | string;
  mobile: StaticImageData | string;
}
 
const ResponsiveImage = ({
  desktop,
  tablet,
  mobile,
  alt,
  priority = false,
  fill = false,
  quality = 100,
  loading,
  placeholder,
  className,
}: IResponsiveImage) => {
  const commonProps = {
    alt: alt,
    sizes: '100vw',
    quality: quality,
    priority: priority,
    fill: fill,
    loading,
    placeholder,
  };
 
  const {
    props: { srcSet: desktopSrcSet },
  } = getImageProps({
    ...commonProps,
    src: desktop,
  });
 
  const {
    props: { srcSet: tabletSrcSet },
  } = getImageProps({
    ...commonProps,
    src: tablet,
  });
 
  const {
    props: { srcSet: mobileSrcSet, ...imgProps },
  } = getImageProps({
    ...commonProps,
    src: mobile,
  });
 
  return (
    <picture>
      <source media="(min-width: 1240px)" srcSet={desktopSrcSet} />
      <source media="(min-width: 768px)" srcSet={tabletSrcSet} />
      <source srcSet={mobileSrcSet} />
      <img
        {...imgProps}
        srcSet={mobileSrcSet}
        alt={alt}
        className={className}
      />
    </picture>
  );
};
 
export default ResponsiveImage;

import ResponsiveImage from './ResponsiveImage';
import desktop from '/desktop.jpg';
import tablet from '/tablet.jpg';
import mobile from '/mobile.jpg';
 
export default function App() {
  return (
    <ResponsiveImage
      desktop={desktop}
      tablet={tablet}
      mobile={mobile}
      alt="반응형 이미지 예제"
      fill
      quality={80}
      // ... 다른 속성들
    />
  );
}