이미지의 파일형식

이번에 SCSS를 공부하면서 asset을 추출하는 과정에서
이미지의 파일 형식 차이에 대해 알고 있으면 좋을거 같아서 정리

Bitmap vs Vector

Bitmap

• 픽셀들의 조합으로 그려지는 이미지 표현 방식
• 주로 사진 이미지에 사용됨
• 크기를 줄이고 늘리면 원본 이미지에 손상이 가는 것이 특징
• 늘릴 수록 1픽셀의 색상 정보 데이터는 더 많은 픽셀의 색을 입혀야됨.
• 래스터 그래픽스(Raster graphics)라고도 불림
• 파일의 형식: .jpg .jpeg .png .gif

Vector

• 점과 점을 연결해 수학적 원리로 그림을 그려 표현하는 방식
• 늘리고 줄여도 손상되지 않음
• 사진과 같은 복잡한 그림을 표현하려면 컴퓨터에 엄청난 부담을 주기 때문에 웹에서는 잘 사용되지 않음
• 최근에는 컴퓨터 하드웨어의 발달로 웹사이트의 로고, 아이콘 등에 사용됨
• 파일의 형식: .ai .eps .svg

참고 웹사이트 : https://imweb.me/faq?mode=view&category=29&category2=33&idx=71515

Bitmap: PNG vs JPG

PNG

• 비손실압축 방식이라 원본이 훼손되지 않음
• 용량은 JPG보다 높은 편

JPG

• 손실압축으로 원본 자체가 훼손됨.
• 용량은 PNG보다 낮은 편.

두 이미지 파일을 선택하는 기준

• 글자가 많은 이미지 경우 블러효과가 생기는 현상으로 PNG파일을 사용
• 뒷 배경이 투명한 경우 PNG파일 사용
• 그림 파일 용량을 줄이기 위해 JPG파일 선호 (용량이 크거나, 실사기반)
• 결론적으로, 퍼포먼스를 우선시 할 건지 퀄리티가 중요한지 판단하고 사용.

참고 웹사이트 : https://blogchannel.tistory.com/269

그 외 참고 웹사이트

해상도 관련 & 레스터, 벡터 이미지 관련
https://shlee1353.github.io/2019/09/26/css-raster-vector/