[31] 이미지 포맷 png, svg, webp 에 대해서 설명하고 어느 상황에 사용하면 좋을지 설명해주세요.

hyeyoonS commented 1 month ago

📎 질문

이미지 포맷 png, svg, webp 에 대해서 설명하고 어느 상황에 사용하면 좋을지 설명해주세요.

✏ 구술 답변 키워드

이미지 확장자(포맷)의 종류와 특징
- PNG
- SVG
- GIF
- JPG
- AV1F
- WEBP

✏ 서술 답변

PNG(Portable Network Graphics)

래스터 이미지 파일 형식
- 이미지와 그래픽이 픽셀로 구성되어 있음을 의미
- 이미지 확대시 입자가 거칠어지는 픽셀화 나타남
- 이미지를 너무 축소해도 이미지가 희미해진다.
고해상도 지원
- 파일 크기가 크다.
- 이미지를 처리, 공유, 저장 실행하는데 시간이 걸려 페이지 로딩 시간이 길어진다.
비손실압축방식
- 원본이 훼손되지 않고 용량 대비 화직이 좋다.
- 8비트 알파채널을 이용하여 투명, 반투명 모두 지원된다.
- 배경이 투명, 반투명인 경우 png를 사용해야 한다.
용량이 크다.
원본이 훼손되지 않는 대신, 용량이 커질 수 밖에 없다.
사용 목적:

투명도가 필요한 경우: 로고, 아이콘, 투명 배경을 가진 이미지 등에 적합 고화질이 중요한 경우: 사진보다는 그래픽 요소(일러스트, 차트, 스크린샷 등)에 적합 손실 없는 이미지가 필요한 경우: 이미지 품질이 중요한 상황에서 사용

SVG(Scalable Vector Graphic)

벡터 파일 형식
- 라인과 곡선으로 이루어져 있다.
- 파일을 확대하거나 줄였을 때 이미지가 깨지지 않고 그대로 선명하다.
XML로 작성
- 텍스트 편집기에서 열고 편집이 가능하다.
- 값을 조작할 수 있어 색을 변경하거나 애니메이션도 적용시킬 수 있는 등 JavaScript로 조작할 수 있다.
- 접근성과 SEO 측면에서 좋다.
용량이 작은 편
- 기본적으론 작은 편이나, 수학을 기반으로 하여 수학적 계산 능력을 요구한다.
- 그렇기에 단순한 이미지면 상관 없지만 복잡해질수록 크기가 커지거나 속도 저하를 일으킨다.
사용 목적:

벡터 기반 그래픽: 아이콘, 로고, 단순한 일러스트 등에 적합 반응형 디자인: 다양한 화면 크기에 맞게 이미지를 조정해야 하는 경우. 인터랙티브 및 애니메이션: CSS와 JavaScript를 통해 쉽게 애니메이션과 상호작용을 추가할 수 있습니다.

JPG/JPEG(Joint Photographic Expert Group Image)

화소가 매우 높다.
용량이 적다.
투명처리가 불가능 하다.
사진과 그림과 같은 복잡한 그래픽을 효율적으로 저장할 수 있다.
압축률을 조절한다
- 이미지 품질과 파일 크기 사이의 균형을 찾을 수 있다.
일반적으로 웹에서 사용되는 사진이나 배경 이미지에 주로 사용

WebP(Web Picture Format)

손실 압축, 무손실 압축 모두 지원
- 압축률이 좋다고 소문난 JPEG 이미지에 비해 용량은 70% 수준으로 낮다.
PNG 처럼 투명도 표현 가능하다.
GIF 처럼 애니메이션 표현도 가능하다.
아직 모든 브라우저에서 지원되지 않음
사용 목적:

웹 최적화: 파일 크기를 줄여 페이지 로딩 속도를 향상시키고 싶은 경우 대체 포맷 필요: JPEG와 PNG의 장점을 모두 활용하고자 할 때 투명도와 애니메이션: 투명한 이미지나 애니메이션이 필요할 때

AV1F(AV1 Image File Format):

Alliance for Open Media가 개발한 이미지 포맷
손실 압축 사용
- JPEG 이미지의 50% 수준인 용량
- WebP와 비교하여 더 높은 압축률과 이미지 품질 제공
뛰어난 색상 표현, 애니메이션 지원, 투명도 표현
아직 지원하지 않는 브라우저가 많을 수도 있다.
- 최신 브라우저에서 점차 지원되고 있다.

GIF

무손실 압축 방식
256색까지만 지원하는 제한된 색상 팔레트
고화질 이미지에는 적합하지 않지만 간단한 애니메이션 만드는데 주로 사용

Untitled (1)

HaydenDevK commented 1 month ago

PNG

압축된 비손실 이미지 포맷
투명도를 지원
로고, 아이콘, 그래픽 등 투명한 배경이 필요한 이미지에 주로 사용

SVG

벡터 기반의 이미지 포맷
이미지 사이즈가 변화해도 품질 유지
로고, 아이콘, 그래픽 및 다이어그램과 같이 크기 조정이 필요한 이미지에 적합

WebP:

구글에서 개발한 이미지 포맷
풍부한 색상 및 투명도를 지원
손실 압축 및 비손실 압축 지원
일반적으로 JPEG 및 PNG보다 더 작은 파일 크기
웹 페이지의 로딩 시간을 단축하기 위해 주로 사용

Jyophie commented 1 month ago

이미지 포맷 설명 및 사용 시기

PNG (Portable Network Graphics)

특징:

압축 후에도 이미지 품질이 손상되지 않음
알파 채널을 사용하여 투명도를 지원함
고품질의 이미지를 유지

사용 목적:

투명도가 필요한 경우: 로고, 아이콘, 투명 배경을 가진 이미지 등에 적합
고화질이 중요한 경우: 사진보다는 그래픽 요소(일러스트, 차트, 스크린샷 등)에 적합
손실 없는 이미지가 필요한 경우: 이미지 품질이 중요한 상황에서 사용

SVG (Scalable Vector Graphics)

특징:

벡터 그래픽: 픽셀 단위가 아닌 수학적 좌표로 이미지를 정의하여, 크기와 해상도에 상관없이 선명하게 유지됨
이미지 크기 조정 시에도 품질 저하가 없음
XML 기반 텍스트 파일 형식으로, 쉽게 편집 및 검색 가능
복잡하지 않은 그래픽의 경우 매우 작은 파일 크기를 지님

사용 목적:

벡터 기반 그래픽: 아이콘, 로고, 단순한 일러스트 등에 적합
반응형 디자인: 다양한 화면 크기에 맞게 이미지를 조정해야 하는 경우.
인터랙티브 및 애니메이션: CSS와 JavaScript를 통해 쉽게 애니메이션과 상호작용을 추가할 수 있습니다.

WebP

특징:

손실 및 비손실 두 가지 압축 방식을 모두 지원
JPEG 및 PNG보다 파일 크기가 작으면서도 비슷한 품질을 유지
PNG와 같이 알파 채널을 통한 투명도를 지원
GIF 대신 사용 가능한 애니메이션 기능을 지원함

사용 목적:

웹 최적화: 파일 크기를 줄여 페이지 로딩 속도를 향상시키고 싶은 경우
대체 포맷 필요: JPEG와 PNG의 장점을 모두 활용하고자 할 때
투명도와 애니메이션: 투명한 이미지나 애니메이션이 필요할 때

QueenCards / ProjectAnalysis