[Image] JPEG, PNG, BMP, GIF, SVG, Webp에 대해 알아보자

각 이미지 타입에 대해 알기 전 먼저 알아야할 몇 가지 요소에 대해 정리하고 넘어가보겠습니다.

 

1. Lossless(무손실) & Lossy(손실)

Lossless: 이미지를 압축해도 이미지의 Quality는 손상되지 않는 것

Lossy: 이미지를 압축하여 크기를 줄이지만 이미지의 Quality는 손상되는 것, 만약 이미지를 손실 압축 포맷으로 변환하여 계속해서 저장하게 되면 이미지의 퀄리티는 점점 나빠짐

 

2. Indexed color & Direct Color

Indexed Color: 제작자에 의해 Color Map이라는 곳에 제한된 수의 색상 (256가지의 색상)을 가진 Palette로만 저장할 수 있는 속성

Direct Color: 제작자가 직접 선택하지 않은 수천가지의 컬러를 저장할 수 있는 속성

 

이제 각 이미지 타입별로 정리해보겠습니다.

JPEG  (Joint Photograph Expert Group)

• 정지 화상을 위해 만들어진 손실 압축 파일 형식 - Lossy / Direct
• 인간의 눈으로 확인 할 수 없는 정보를 제거하는 방법으로 디테일한 사진 이미지를 가능한한 작게 만들도록 디자인
• 약간의 손실을 감수하고 작은 크기로 사진을 저장하는데 유용하고 상대적으로 훨씬 작기에 웹에서 많이 사용
• 그라데이션이 표현된 이미지가 있다고 가정하면 GIF 타입 보다 JPEG 타입으로 된 이미지가 더 적은 파일 사이즈와 좋은 퀄리티를 가짐

JPEG는 왜 손실되는걸까?

JPEG는 이산 코사인 변환에 의존하기 때문입니다. (이산 코사인 변환에 대한 내용은 여기를 참고해주세요)

계산은 복잡하지만 압출 알고리즘은 전체 이미지를 보고 이미지의 어떤 픽셀이 주변의 픽셀과 유사한지를 확인하고 같은 값을 가진 픽셀 그룹의 픽셀을 병합하기 때문에 손실이 발생합니다.

 

PNG (Portable Network Group)

• 무손실 압축 파일 형식 - Lossless
• 일반적으로 텍스트, 선, 아이콘, 로고 등을 저장하는데 적합하고 투명 배경이 필요한 경우에도 사용
• GIF는 에니메이션이 가능하고, 투명한 것을 표현 가능
• 에니메이션이 필요한 컨텐츠인 경우 이 파일 포맷을 사용 가능

무손실이 가능한 이유는 뭘까?

GIF DCT 압축에 의존하는 JPEG와 달리 PNG는 GIF 및 TIFF 형식과 동일한 LZW압축 방식을 사용

PNG의 2단계 LZW 압축은 이미지 데이터에 포함된 비트 문자열을 가져온 다음 이미지 파일 내에 저장된 코드북에 보관된 단축코드와 시퀸스를 일치시킨다. 그 결과 고품질을 유지하는 더 작은 파일을 생성

 

PNG-8 - Indexed

• GIF같이 에니메이션을 지원X
•  IE6같은 오래된 브라우저에서 지원 문제
• 포토샵 같은 중요한 소프트웨어에서 이 포맷을 구현하기가 어렵다는 점

PNG-24 - Direct

• JPEG처럼 수천가지의 컬러를 가지면서 무손실 압축인 훌륭한 포맷
• 이미지를 압축하는 면을 제외하면 BMP와 유사한데, 파일을 좀 더 작게 만드는 것
• JPEG ,GIF,PNG-8보다 파일사이즈가 커서 이 포맷을 사용하길 원한다면 좀 더 고려 필요
• 보여지는 퀄리티는 조금 상승되었을 뿐, PNG24로 저장된 이미지는 JPEG로 저장된 사진 보다 5배이상

WEBP

• 2010년 구글에서 만든 이미지 포맷 형식 - Lossless, Lossy 모두 지원
• Lossy의 경우 JPEG보다 30%작고 Lossless의 경우, PNG보다 20~30% 정도 작아짐
• 단점이라면 아직 아이폰 safari 브라우저에서는 원활하지 못한 방식

BMP (Bitmap) 

• Bit 들의 Map - Lossless / Indexed & Direct
• 오래된 포맷
• 압축을 전혀 하지 않는 BMP로 저장하면 아주 큰 사이즈로 저장
• 디코딩할게 별로 없어서 속도가 매우 빠름 + 여러가지 masking 등의 작업 편리 -> 예전 윈도우 프로그래밍, 모바일 초기 프로그래밍 때 사용

GIF (Grahics Interchange Format)

• Lossless / Indexed Only
• BMP보다 좋은 압축 알고리즘 -> 파일 사이즈: GIF < BMP
•  로고, 라인 그리기 등 간단한 이미지에 사용하면 좋음
• GIF는 에니메이션이 가능하고, 투명한 것을 표현 가능
• 애니메이션이 필요한 컨텐츠인 경우 이 파일 포맷을 사용

SVG (Scalale Vector Graphics)

• vector 파일 포맷 - Lossless / Vector
• 2차원 벡터 그래픽을 표현하기 위해 XML 기반의 파일 형식
• Vector 포맷 파일은 픽셀 대신에 라인과 곡선으로 이루어져 있기에 확대, 축소에도 깨짐X
• 모든 화면에서 선명하게 보여주기 좋으며 로고 같은걸 표현하기 좋음
• 적은 용량 해상도 관계없이 깔끔한 표현이 좋지만 간단하지 않으면 오래 걸릴 수도 있음

 

<정리>

현재 앱 개발을 하다보면 많이 PNG와 JPEG를 사용하게 되는데 용량을 줄일 때 Webp에 대해 고려하는 것도 좋을 것 같습니다.

 

<참고>

https://medium.com/@wodbs135/%EC%B4%88%EA%B8%89-%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%86%8D%EB%8F%84-%EA%B0%9C%EC%84%A0%EA%B8%B0-da3610509231

https://hello-imawesome.tistory.com/74

https://soeunlee.medium.com/web에서-png-gif-jpeg-svg-중-어떤-것을-사용하면-좋을까요-6937300e776e