본문 바로가기
프론트엔드

이미지 파일 정리

by step 1 2021. 4. 10.
반응형

비트맵

 

정교하고 다양한 색상을 자연스럽게 표현

확대/축소 시 계단 현상, 품질 저하

 

- JPG

손실 압축(용량이 적음)

표현 색상도가 뛰어남

이미지의 품질과 용량을 쉽게 조절 가능

가장 널리 쓰이는 이미지 포맷

주의: 반복적으로 수정 저장하는 행위 주의

 

- PNG

비손실 압축

투명도 지원

W3C 권장 포맷

 

- GIF

비손실 압축

여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)

8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)

 

- WEBP

JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷.

완벽한 손실/비손실 압축 지원

GIF 같은 애니메이션 지원

Alpah Channel 지원(투명도)

지원되는 브라우저 확인 필요(IE 지원 불가)

 

벡터

 

확대/축소에서 자유로움, 용량 변화가 없음

정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움

아이콘, 로고같은 이미지의 적합(크기를 자유롭게 조절해도 깨지지 않음)

 

- SVG

해상도의 영향에서 자유로움

CSS와 JS로 제어 가능

파일 및 코드 삽입 가능

반응형

'프론트엔드' 카테고리의 다른 글

VS Code 작성한 파일 화면에서 확인  (0) 2021.04.10
VS Code 태그 자동 수정  (0) 2021.04.10
VS Code 자동 줄맞춤  (0) 2021.04.10
VS Code 한글화  (0) 2021.04.10
특수 문자 용어  (0) 2021.04.10