고해상도 웹사이트 이미지 포맷

"백문이 불여일견"이라고 합니다. 그렇다면 백 가지 질문보다 더 많은 정보를 제공하는 이미지를 만들려면 어떻게 해야 할까요? 이미지를 사용하여 정보를 효율적으로 전달하기 위해서는 어떻게 해야 할까요? 특정한 네트워크 환경에서 특정한 디바이스의 특정한 브라우저로 전송될 이미지에 맞는 최적의 포맷을 선택하면 이미지가 주는 영향력을 극대화할 수 있습니다.

아래에서는 오늘날 웹사이트에서 가장 많이 사용되는 이미지 포맷인 GIF, JPEG, PNG, 도입된 지 얼마 되지 않은 (특정 브라우저에서만 작동하는) 포맷인 WebP, JPEG 2000, JPEG XR과 JPEG를 대체할 새로운 이미지 포맷인 BPG(Better Portable Graphics)의 기능과 특징, 호환성을 살펴보겠습니다.

GIF

GIF(Graphics Interchange Format)는 광범위하게 지원되며 이식성이 워낙 뛰어난 덕분에 웹상에서 널리 사용되고 있는 비트맵 이미지 포맷입니다.

이미지 하나에서 한 픽셀당 최대 8비트를 지원하며, 하나의 이미지에서 최대 256개의 색을 참조할 수 있습니다. 애니메이션과 1비트 투명도도 지원됩니다. (애니메이션의 경우 프레임 1개당 최대 256색의 개별적인 색상표 사용).

Chrome
Chrome(iOS)
Firefox    
Safari
IE/Edge
Opera


예    


JPEG

JPEG(Joint Photographic Experts Group)는 손실 허용 그래픽 파일입니다. JPEG 이미지에는 .jpg, .jpe, .jif, .jfif, .jfi 등의 다양한 파일 확장자가 있습니다. JPG 파일에는 JPG/Exif(디지털 카메라 및 사진 장비용)과 JPG/JFIF(웹용)의 두 가지 하위 포맷이 있습니다.

JPEG는 최대 1,680만 개의 색을 지원합니다. 애니메이션이나 투명도는 지원하지 않습니다.

Chrome
Chrome(iOS)
Firefox    
Safari
IE/Edge
Opera


예    


PNG

PNG(Portable Network Graphics) 파일은 압축으로 인해 이미지 화질이 저하되지 않는 무손실 포맷입니다. PNG는 GIF(Graphics Interchange Format)의 개선된 오픈 소스 대안으로써 개발되었으며, 현재 인터넷에서 가장 많이 사용되는 무손실 이미지 압축 포맷입니다.

PNG-8은 256색과 1비트 투명도를 지원하고, PNG-24는 24비트와 1,680만 색을 지원합니다. PNG는 알파 채널로 확장형 투명도(불투명에서 완전 투명까지)를 지원합니다.

APNG(Animated Portable Network Graphics) 확장을 통해 애니메이션이 지원됩니다. APNG는 애니메이션 GIF 파일과 비슷하게 작동하는 애니메이션 PNG 파일을 지원하며, 24비트 이미지와 8비트 투명도를 지원하여 GIF보다 더 유연하게 사용할 수 있습니다. 기존 비애니메이션 PNG 파일과 호환됩니다. 현시점에서는 APNG는 널리 사용되고 있지 않으며, 대부분의 브라우저에서 지원되지 않습니다.

Chrome
Chrome(iOS)
Firefox    
Safari
IE/Edge
Opera
기본

예    

>=7
애니메이션 아니요

예    

아니요
아니요

WebP

WebP는 Google이 개발한 손실 허용 압축과 무손실 압축을 모두 사용하는 최신 이미지 포맷입니다. WebP는 2010년에 웹 그래픽에서 사용하는 새로운 손실 허용 압축 표준으로 널리 도입되기 시작했습니다. JPEG처럼 작은 크기로 트루 컬러 그래픽을 재현하면서 이미지 품질은 그대로 유지합니다.

WebP는 24비트와 1,680만 개의 색을 지원합니다. 애니메이션, ICC 프로필, XMP 메타데이터, 알파 채널을 통한 투명도도 지원합니다.

WebP에는 기본 파일 포맷 외에도 확장 포맷과 애니메이션 포맷이 있습니다. 확장 컨테이너를 사용하면 색 프로필, 애니메이션 컨트롤, EXIF, XMP를 비롯한 고급 메타데이터를 임베드할 수 있습니다. 애니메이션 이미지 포맷에는 여러 프레임과 ANIM(전역 애니메이션 파라미터) 및 ANIMF(단일 프레임 정보) 청크가 포함됩니다.

Chrome
Chrome(iOS)
Firefox    
Safari
IE/Edge
Opera
기본 >=9
>=29
아니요  
아니요
아니요
>=11.5
애니메이션 >=32
아니요
아니요   
아니요
아니요
>=20
확장 >=23
>=29
아니요   
아니요
아니요
>=12.1

JPEG 2000

JPEG 2000(JP2)은 손실 허용 및 무손실 이미지 압축 표준이자 코딩 시스템입니다. 2000년 Joint Photographic Experts Group 위원회가 JPEG 표준을 능가하는 포맷을 만든다는 목적으로 개발했습니다. JP2는 모든 색상 비트 심도를 지원하지만, 대부분의 경우 24비트 색이 사용됩니다.

JP2(웨이블릿 기반)는 JPEG(이산 코사인 기반)와 호환되지 않습니다 JP2는 투명도는 지원하나 애니메이션은 지원하지 않습니다.

Chrome
Chrome(iOS)
Firefox    
Safari
IE/Edge
Opera
아니요

아니요
>=5
아니요
아니요

JPEG XR

JPEG XR(eXtended Range)은 손실 허용 및 무손실 압축 표준이나 연속 톤 사진 이미지를 위한 파일 포맷으로, Microsoft가 개발하여 HD Photo라는 이름으로 특허를 출원한 기술을 바탕으로 개발되었습니다. JPEG XR은 최대 32비트 색상 심도와 알파 채널을 통한 투명도를 지원합니다. 애니메이션은 지원하지 않습니다.

Chrome
Chrome(iOS)
Firefox    
Safari
IE/Edge
Opera
아니요
아니요 아니요     아니요
>=10
아니요

BPG

BPG(Better Portable Graphics)는 품질이나 파일 크기가 문제가 되는 경우 JPEG 이미지를 대체하기 위해 개발된 새로운 이미지 포맷입니다. BPG는 압축률이 높아 비슷한 화질의 JPEG보다 파일 크기가 훨씬 작습니다. BPG는 무손실 압축과 손실 허용 압축을 지원하며, (알파 채널을 통한) 투명도, 애니메이션, 임베디드 메타데이터(색 프로필, XMP 및 EXIF 메타데이터)를 지원합니다. BPG는 색 채널당 14비트를 지원합니다(JPEG는 채널당 8비트 지원).

현재 BPG를 네이티브로 지원하는 브라우저는 없습니다. BPG 이미지를 사용하려면 56KB(gzip 압축한 크기)의 JavaScript 라이브러리가 필요합니다.

요약

다음 표에는 위에서 다룬 이미지 포맷의 기능과 특징이 요약되어 있습니다.

GIF
JPEG PNG: 기본 PNG: 애니메이션
JPEG 2000
JPEG XR
WebP: 기본 WebP: 확장 WebP: 애니메이션
인덱스 색

아니요


아니요
아니요 아니요 아니요 아니요  
풀 컬러
아니요

예  
예  
이진 투명도

아니요
예   아니요
아니요 아니요 아니요 아니요  
완전 투명도
아니요 
아니요 
예  
아니요
아니요
아니요
아니요  
Chroma 서브샘플링
아니요

아니요   아니요  예 
4:2:0 4:2:0 4:2:0  
프로그레시브 로딩


예  

아니요
아니요
아니요  
애니메이션
아니요
아니요  

아니요 아니요 아니요
아니요
예  
손실 허용 압축


예  



예  
무손실 압축
아니요
아니요
예  

아니요
예  
바이트 절약
좋지 않음
일반적임
좋지 않음  
일반적임
좋음
좋음 좋음
좋음
좋음  

Akamai Image Manager로 다양한 온라인 이미지 포맷을 관리하는 방법을 알아보십시오.