JPG, PNG, GIF, WEBP, SVG

* JPG는 압축률이 훌륭해 사진이나 예술 반야에 많이 사용된다.

 

• 손실압축 (원본이 있을때 다시 jpg로 압축해서 파일을 저장하는것을 추천하지않는다. 즉 여러번 원본을 저장하는걸 피하는것이 좋다.) 그대신 용량이 적게 든다.
• 표현 색상도(24비트, 약 1600만개 색상) 뛰어나 고해상도 표시장치에 적합
• 이미지의 품질과 용량을 쉽게 조절 가능
• 가장 널리 쓰이는 이미지 포맷

====> 높은 압축률(적은 용량)!

 

 

 

* PNG는 GIF의 대체 포맷으로 개발 되었다.

 

• 비손실 압축 (손실이 없는 대신에 용량이 적게 들지는 않는 단점이 있다.)
• 8비트(256 색상) / 24비트(약 1600만개 색상) 컬러 이미지 처리
• Alpha Channel 지원(투명도)
• W3C 권장 포맷

====> 투명도 지원!

 

 

 

* GIF는 이미지 파일내에 이미지 및 문자열 같은 정보들을 저장할 수 있다.

 

• 비손실 압축
• 여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
• 8비트 컬러만 지원(다양한 색상을 포현한느 작업에는 적합하지 않음)

====> 동영상 같은 이미지! (애니메이션)

 

 

 

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

 

• 완벽한 손실/비손실 압축 지원
• GIF 같은 애니메이션 지원
• Alpha Channel 지원(손실, 비손실 모두)
• 아주 좋은 기능을 가지고 있지만 아직 많이 상용화 되기는 힘들다.

====> 완벽한 포맷! 그러나 지원 브라우저가 한계가 있다. ie, safari, android 등등 지원을 안한다거나 환경이 모든게 맞춰져 있지 않다.

caniuse.com/webp (나중에 개발하게 될때 많이 이용하게될 사이트이다.)

Can I use... Support tables for HTML5, CSS3, etc

 

 

* SVG(Scalable Vector Graphics)는 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷이다.

 

• 해상도의 영향에서 자유로움
• CSS로 Styling 가능
• JavaScript로 Event Handling 가능 (코드기반 이루어져있기 때문에 자바스크립트로 핸들링이 가능해서 좋은기능 이지만 쉽지는 않다.)
• 코드 혹은 파일로 사용 가능
• 픽셀단위로 표현하는게 아니라 점이나 선같은 수학적기호로 표현한다.
• 해상도의 영향을 받지 않기 때문에 반응형이라던가 크로스 플랫폼 디바이스에 많이 사용이 된다.

====> 벡터 이미지에 익숙하지 않다면 다루기 조금 까다로울 수 있다.