[코딩기초] 이미지 형식 jpg, gif, png 차이점, 장단점

웹사이트의 반은 이미지라고 해도 과언이 아니다. 때문에 웹 퍼블리셔라면 이미지 형식의 차이 정도는 기본으로 알고 있어야 한다. 어떤 경우에는 jpg를 사용해야 하고, 어떤 경우에는 png를 사용해야 하는지 당연히 구분할 줄 알아야 한다. 디자이너와 협업할 때도 이러한 기본 지식이 없으면 커뮤니케이션이 불가하기 때문에 이번 기회에 알아두도록 하자.

 

 

 

 

목차

1. JPG
2. PNG
3. GIF

 

 

 

 

GIF,JPG,PNG 비교표

	GIF	JPG	PNG
압축	O	O	O
화질	좋지 않음	보통	좋음
용량	작음	작음	다소 큼
투명도	투명 O 반투명 X	투명 X 반투명 X	투명 O 반투명 O

 

 

 

JPG

우선, JPG의 정식 명칭은 JPEG(Joint Photographic Experts Group)이며, 둘은 같은 확장자이다. 이전 DOS를 사용했던 때에는 확장자명이 최대 3글자밖에 쓸 수 없었기 때문에 JPG로 줄여서 쓰기 시작했고, 지금은 둘 다 사용이 가능해졌다. 가장 널리 사용되는 그래픽 파일 형식으로, 1/20까지 압축이 가능하며 다양한 이미지를 저장하는 데 효과적이다.

 

JPG 장점

불필요한 정보는 삭제하여 용량이 큰 사진을 작게 만든다. 즉, 압축 성능이 월등히 뛰어나 다른 형식의 파일보다 가벼우므로 웹 사이트 로드가 훨씬 더 빠르다. 

 

JPG 단점

원본이 훼손되는 손실압축방식을 사용하기 때문에 세밀한 패턴이나 선, 문자 등이 있는 이미지의 경우 GIF나 PNG보다 화질이 저하될 수 있다. 저장 시 압축률을 조정하여 퀄리티를 높게 해 주면 압축하지 않은 형식(BMP, RAW, TIFF)과 비슷한 높은 화질을 구현할 수 있다.

 

JPG의 사용

많은 컬러가 섞여있는 실사 이미지, 인물 사진, 풍경 사진인 경우 사용하면 좋다. 이러한 이미지의 경우 PNG로 저장하면 비손실 압축으로 용량이 너무 커지므로 웹사이트 속도 저하에 영향을 줄 수 있으므로 압축 성능이 좋은 JPG를 사용해야 한다.

 

 

 

PNG

PNG(Portable Network Graphics)는 GIF에 저작권 관련 문제가 있어 GIF 대체해 누구나 무료로 쓸 수 있는 형식을 개발하자고 한 데에서 탄생된 확장자이다. 이미지의 모든 데이터를 유지한다.

 

PNG 장점

비손실압축방식으로 원본이 훼손되지 않는다. 용량 대비해 화질이 좋은 편이다. GIF의 단색 투명층과는 다르게 8비트 알파채널을 이용한 투명층을 제공하므로 투명, 반투명 모두 지원된다. GIF와 달리 트루 컬러(1,600만 색)를 지원한다.

 

PNG 단점

원본이 훼손되지 않는 대신 손실을 피한 압축방식이기 때문에 용량이 커질 수밖에 없다. GIF의 장점은 모두 가져왔지만 애니메이션 기능은 제공하지 않는다.

 

PNG의 사용

실사가 아닌 단순한 형태의 일러스트 이미지(웹사이트의 로고나 페이지 내에 불릿, 아이콘 등) 같은 경우 화질이 깨끗해야 하므로 PNG로 저장하는 것이 좋다. 또한 배경이 투명이거나, 반투명인 이미지의 경우 PNG를 사용해야 한다. 

 

 

 

GIF

GIF(Graphics Interchange Fomat)는 그래픽을 압축해 빠르게 전송하려는 목적으로 만들어졌다. 애니메이션으로 많이 사용되는 파일 형식으로 무손실 압축방식을 사용한다. 

 

GIF 장점

JPG에 비해 압축 성능은 떨어지지만 이미지 손상이 적고 용량이 작아서 전송 속도가 월등히 빠르다. 한 파일에서 복수 이미지 사용이 가능하며, 이를 활용하여 애니메이션 효과를 구현할 수 있다. 투명도를 구현할 수 있다.

 

GIF 단점

GIF 형식은 8비트로 256색만 지원하기 때문에 사실적인 이미지의 경우 색 정보가 손실되어 PNG나 JPG보다 훨씬 화질이 떨어진다. 때문에 이미지에 계단 현상이 일어날 수 있다. 반투명은 지원하지 않는다.

 

GIF의 사용

투명 배경이 필요한 아이콘을 저장할 때 사용할 수 있다. 또한, 웹페이지에 영상 대신 단순한 애니메이션을 넣고 싶은 경우 GIF 이미지를 활용하면 좋다.