[HTML] Img 파일 확장자 정리

img 파일의 확장자별 특징 정리

1. 래스터 이미지
• PNG : JPEG 보다는 화질이 좋으며, 뒷배경을 투명하게 할 수 있다는 특징이 있다. 하지만, 파일 사이즈가 상대적으로 크다.
** 이 때, Png 파일에 이미 뒷배경이 예를 들어, 검정으로 돼있다하면 이를 투명하게 바꿀 수는 없음. 배경이 흰색인 경우에만 가능함.
• JPEG : 화질보다는 용량이 중요한 웹에서 쓰기 좋은 확장자로 정지 이미지의 압축률이 좋은편임. 하지만, 압축에 따른 데이터 손실이 발생하는 포맷.
• GIF : 우리가 잘아는 '움짤' 등에 쓰이는 확장자로, 지원되는 컬러 스펙트럼이 한정적이고 화질이 상대적으로 떨어짐. 하지만, 무손실 압축 알고리즘을 쓰기 때문에 압축을 해도 데이터가 손상되지 않으며 파일 사이즈가 상대적으로 작다.
• WebP : 구글에서 만든 이미지 파일 포맷으로 '웹피'라고 불림. 구글이 웹 고속화를 위해 만든 새로운 파일 포맷으로 아직 모든 브라우저가 지원하는 포맷은 아니지만, 모두가 지원한다면 성능상으로는 다른 포맷을 전부 대체할 정도로 성능이 좋은편.
2. 벡터 이미지
• SVG : 벡터 기반 이미지 파일 포맷으로 어떤 해상도에서도 깨지지 않는 특징을 갖는다. 또한, 상대적으로 파일 크기가 작기 때문에 로딩시간이 적다. 하지만 픽셀 기반이 아닌 대신 모양의 복잡도에 따라 크기도 달라지는 포맷이다. 따라서 너무 복잡한 이미지를 svg 포맷으로 쓰는 것은 적합하지 않다.
래스터 이미지 vs 벡터 이미지 : 서로 경쟁 관계는 아니다. 단지 용도가 다를 뿐이다. 래스터 이미지는 격자 픽셀을 색칠한 이미지이기 때문에 해상도가 바뀌거나 확대하면 깨지게 된다. 그래서 선과 선을 표현한 형식의 사진 이미지에는 쓰지 않고, 풍경 이미지에 적합하다. 이와 달리, 벡터 이미지는 아무리 확대해도 깨지지 않는 특징을 가지고 있기 때문에(픽셀 기반이 아닌 곡선들로 이뤄져있음) 곡선, 직선 등의 이미지에 주로 쓴다.