벡터 vs 비트맵 이미지 비교

동일한 이미지를 벡터와 비트맵으로 비교하고 확대해서 차이점을 확인해보세요

확대 레벨 조정

1x
1x2.75x4.5x6.25x8x

벡터 이미지 (SVG)

LOGO

벡터 이미지 특징:

  • 수학적 공식으로 정의된 도형
  • 무한 확대 가능 (해상도 독립적)
  • 선명한 경계선 유지
  • 작은 파일 크기 (단순한 도형의 경우)
  • 로고, 아이콘에 적합

비트맵 이미지 (PNG)

비트맵 이미지 특징:

  • 픽셀(점)로 구성된 격자 구조
  • 확대 시 픽셀이 보임 (해상도 의존적)
  • 계단 현상 (Aliasing) 발생
  • 사진에 적합
  • 복잡한 이미지는 큰 파일 크기

현재 확대 레벨에서의 차이점

벡터 이미지

• 선명하고 깨끗한 경계선
• 매끄러운 곡선
• 색상 전환이 부드러움

비트맵 이미지

• 적당한 품질 유지
• 미세한 픽셀 경계 시작
• 원본 해상도 내에서 양호

언제 어떤 형식을 사용할까요?

벡터 이미지 (SVG) 사용 시기

  • 로고, 아이콘, 브랜드 마크
  • 단순한 일러스트레이션
  • 다양한 크기로 사용해야 하는 그래픽
  • 프린트용 고해상도 출력물
  • 웹사이트의 확장 가능한 그래픽

비트맵 이미지 (PNG/JPG) 사용 시기

  • 사진, 복잡한 이미지
  • 그라데이션이 많은 이미지
  • 디지털 아트, 페인팅
  • 스크린샷, 화면 캡처
  • 고정된 크기로만 사용하는 이미지
메인 페이지 홈으로 프레임레이트 비교