크기가 큰 이미지 개선하기

이미지 파일 용량 줄이기

1.이미지 최적화 (압축)

• Lossless 압축(무손실 압축) : 품질 유지, 불필요한 메타데이터 제거 (PNG,GIF)
  • 약 40% 절감
  • PNG나 GIF는 색상 정보 외에도 불필요한 정보(메타테이터)가 들어있음
  • Lossless 압축도구를 사용하면 불필요한 정보는 지워지고 이미지 픽셀은 유지
  • 예시) 로고, 텍스트가 많은 이미지
  • 도구 예시) TinyPNG, ImageOptim, PNGGauntlet
• Lossy 압축(손실 압축) : 약간의 품질 손실 허용, 용량을 크게 줄임 (JPEG,WebP)
  • 약 80% 절감
  • png를 jpeg로 변환하는 것 만으로도 용량이 줄 수 있다.
  • 예시) 풍경 사진
  • 도구 예시) Photoshop Save for Web, Squoosh, TinyJPG

2. 포맷 번경

• PNG -> JPEG : 배경 투명하지 않을 경우
• JPEG -> WebP,AVIF(최신 브라우저 지원 시 더 효울적)
  • WebP : JPEG보다 약 30% 더 작음
  • AVIF : WebP 보다 더 작음 (지원 여부 확인 필요)

이미지 해상도 줄이기 (크기 조절)

1. 사용 환경에 맞게 리사이징

• 화면에 300px로 표시될 이미지라면 원본도 300px정도면 충분
• srcset 속성을 사용하여 디바이스 해상도에 따라 적절한 이미지 제공

<img 
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="예시 이미지"
/>

2. 썸네일 사용

• 리스트 페이지나 미리보기에는 저해상도 썸네일 -> 상페 페이지에서 고해상도 이미지

이미지 전송 최적화

1. CDN 사용

• 이미지 서버를 CDN에 두면 사용자와 가까운 서버에 빠르게 전달

2. Lazy Loading 적옹

• 초기 화면에 안 보이는 이미지는 스크롤할 때 로드

<img src="image.jpg" loading="lazy" alt="지연 로딩 예시" />

---

부가 질문

WebP와 AVIF란?

WebP란?

• Google이 개발한 차세대 이미지 포맷
• JPEG보다 25%~30% 더 작은 용량으로 비슷한 품질
• 무손실, 손실 모두 지원
• 투명 배경도 지원 (PNG 대체 가능)

AVIF란?

• Alliance for Open Media에서 만든 최신 포맷
• 차세대 영상 코덱인 AV1을 이미지로 사용
• WebP보다 더 강력한 압축 성능
• 압축 효율이 아주 좋으나 처리 속도는 느림
• 파일 지원 툴, 지원 브라우저가 일부 제한적

사용 사례

• picture 태그 사용
• WebP만 적용해도 충분히 용량 낮출 수 있음

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="예시 이미지">
</picture>

Next.js에서는?

• <Image>는 next/image 빌드시 WebP,AVIF 등을 자동으로 생성
• 원본이 PNG/JPEG이어도 자동으로 생성
• blur placeholder, lazy loading, 사이즈 조절까지 지원

"use client";

import Image from "next/image";

type ThumbnailProps = {
  src: string;
  alt: string;
  width: number;
  height: number;
};

export default function Thumbnail({ src, alt, width, height }: ThumbnailProps) {
  return (
    <Image
      src={src}            // 원본은 PNG/JPEG이어도 OK
      alt={alt}
      width={width}
      height={height}
      placeholder="blur"   // LQIP(저화질 이미지) placeholder
      blurDataURL="/placeholder.png" // 선택: blur 이미지 직접 지정
      quality={75}         // 1~100: 75는 적당히 균형 좋음
      sizes="(max-width: 768px) 100vw, 50vw" // 반응형
    />
  );
}

=> Next.js의 Image 태그를 사용하는 것만으로도 최적화 가능
=> 자동 리사이징, 포맷 변경, lazy loading이 자동으로 적용

CDN이란?

• Content Delivery Networt
• 전 세계 여러 곳에 분산 배치된 캐시 서버(엣지 서버) 네트워크
• 이미지가 한국 서버에만 저장되어 있으면 다른 지역 사용자가 접속할 때 로딩 속도가 느려짐
• 원본 서버에서 한번 가져온 정적 파일을 가장 가까운 서버에 캐싱하는 방법
• 전 세계 어디서 접속해도 가장 가까운 엣지 서버가 대신 제공
• 정적 리소스를 대부분 저장

CDN 작동 흐름

1. 사용자 이미지 요청
2. CDN 엣지 서버에 캐시가 있으면 바로 제공 (원본 서버까지 안 감)
3. 캐시가 없는 경우-> 원본 서버 -> 엣지 서버에 저장 -> 다음 요청시 캐시 제공

CDN 연결 방법

1. 이미지 업로드 -> S3버킷 같은 저장소에 저장
2. CloudFront 등과 연결
3. 사용자 요청 -> CDN이 대신 응답
4. Cache-Control 헤더로 TTL(Time To Live) 관리

CDN 장점

• 로딩 속도 빠름
• 트래픽 절감 : 원본 서버가 직접 모든 요청을 처리하지 않기 때문
• 안정성 : 한 지역 장애 시 다른 엣지 서버로 대체 가능, 글로벌 네트워크
• SEO : Core Web Vitals 점수 개선