웹 이미지 파일 확장자

웹 이미지

크게 비트맵 이미지, 벡터 이미지로 구분

비트맵(Bitmap)

• 픽셀이 모여 만들어진 정보의 집합
• 래스터(Raster)이미지라고도 부름
• 정교하고 다양한 색상을 자연스럽게 표현
• 확대/축소 시 계단현상 발생(품질 저하)
• 고해상도의 경우 파일의 크기가 큼
• 확장자 : jpg, png, gif 등

벡터(Vector)

• 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지
• 확대/축소에서 자유로움
• 용량의 크기가 작은 편
• 정교한 이미지(인물, 풍경 등)을 표현하기 어려움
• 이미지 구성 객체가 많아질 수록 그래픽 처리 시간도 많이 소요
• 확장자 : ai, svg 등

---

확장자 별 이미지 타입 설명

1. JPG/JPEG (Joint Photographic coding Experts Group)

• Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용
• 손실 압축
• 표현색상도(24bit, 약 1600만 색상)가 뛰어남
• 이미지의 품질과 용량을 쉽게 조절 가능
• 가장 널리 쓰이는 포맷 중 하나

2. PNG(Portable Network Graphics)

• GIF의 대체 포맷으로 개발
• 비손실 압축
• 8bit(256색상) / 24bit(약 1600만 색상) 컬러 이미지 처리
• Alpha Channel 지원(투명도)
• W3C 권장포맷

3. GIF(Graphics Interchange Format)

• 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
• 비손실 압축
• 여러장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
• 8bit색상만 지원: 다양한 색상표현에 부적합

4. WEBP(WebP)

• JPG,PNG,GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
• 완벽한 손실/비손실 압축 지원
• GIF와 같은 애니메이션 지원
• Alpha Channel 지원(손실, 비손실 모두)

5. SVG(Scalable Vector Graphics)

• 마크업 언어(HTML, XML)기반의 벡터 그래픽을 표현하는 포맷
• 해상도의 영향에서 자유로움
• CSS와 JS로 제어가능
• 파일 및 코드 삽입 가능

📝 사실은 내가 보려고 기록한 것 😊
피드백 댓글, 메일은 언제나 환영합니다!