WallyLog
css

이미지 파일 형식과 압축 방식 정리

🖼 이미지 파일 형식과 압축 방식 완전 정리 – PNG, JPG, WebP, SVG 차이와 원리

이미지를 다루다 보면 JPG, PNG, SVG, WebP 같은 다양한 확장자를 접하게 됩니다.
“어떤 걸 써야 하지?”, “왜 SVG는 확대해도 안 깨질까?”, “WebP는 왜 요즘 많이 쓰지?”
이런 궁금증이 생기셨다면, 이 글이 도움이 될 거예요.

🔍 이미지 확장자별 특징 요약

111.jpg

💡 이미지 압축이란?

압축이란, 이미지 데이터를 더 적은 용량으로 저장하는 기술입니다.
압축 방식은 크게 두 가지로 나뉩니다:

🔧 손실 압축 (Lossy)

  • 일부 데이터를 의도적으로 버리고 용량을 줄임
  • 사람이 보기엔 티가 안 나지만 정보는 줄어듦
  • 다시 원래대로 복구 불가
    📌 예시: JPG, WebP(손실), GIF

🛠 무손실 압축 (Lossless)

  • 데이터 구조를 정리해서 정보 손실 없이 압축
  • 품질 그대로 유지됨
    📌 예시: PNG, WebP(무손실), SVG

🗂 이미지 압축은 언제 일어날까?

타이밍 예시 설명 저장 시 스마트폰 사진, Photoshop 저장 JPG, HEIC 등 자동 압축 업로드 시 인스타, 블로그, 쇼핑몰 서버에서 자동 압축/변환 수동 압축 TinyPNG, Squoosh 직접 압축하여 최적화 웹사이트 배포 React, Vue 앱 빌드 시 WebP 자동 변환 및 최적화

❗ 예시 상황

  • PNG 이미지를 업로드했는데 서버에 JPG로 저장됨 → 손실 압축 발생
  • 배경 투명도가 사라지고 화질이 흐려짐 → 압축 손실 증거

✏️ SVG의 원리와 좌표 시스템

SVG는 비트맵 이미지가 아니다

  • SVG는 픽셀로 저장된 이미지가 아닌, “그림을 그리는 코드”
  • 수학적 명령어로 도형을 정의 → 벡터 방식
  • 그래서 확대해도 깨지지 않고, 용량도 작음
    (깨지지 않는 이유는 화면을 확대 축소해도 다시 계산해서 그리기 때문이다)

예시

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="skyblue" />
</svg>
  • cx="50", cy="50"은 좌표 (50,50) 위치에 원 중심
  • r="40"은 반지름 40 단위
  • 픽셀 단위가 아니라 뷰박스(viewBox) 기준의 비례 좌표

📐 SVG 좌표의 기준 – ViewBox

<svg width="200" height="200" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" />
</svg>
  • viewBox="0 0 100 100" → 내부 좌표 공간이 100×100
  • cx="50" → 중심에서 50% 위치 (좌표값이지만, 비율로 작동)
  • 브라우저가 비례적으로 확대/축소해서 표현함

퍼센트 단위와의 차이

  • SVG 내부 좌표는 실제 숫자지만 비례적으로 해석됨
  • 일부 속성은 % 사용 가능 (x="10%", width="80%" 등)
  • 대부분은 수치 기반 좌표를 사용하지만, 퍼센트처럼 동작함

✅ 결론

  • 이미지 포맷은 용도와 목적에 따라 적절히 선택해야 함
  • WebP는 품질과 용량 모두 잡을 수 있는 최신 포맷
  • SVG는 픽셀 개념이 아닌 벡터 좌표로 작동 → 확대해도 깨지지 않음
  • 그러나 SVG는 간단한 이미지엔 적합하지만 복잡한 이미지의 경우 연산 과정에서 웹 렌더링이 더욱 느려질수있다
  • 압축 방식(손실/무손실)을 이해하면 효율적 이미지 처리 가능
모든 게시글 보기