디지털 이미지 종류와 특징

Frontend

2023.04.09.

썸네일: Unsplash의Paul Hanaoka

출처 : 웹 성능 최적화 기법

웹 성능 최적화 기법(루비페이퍼 사) 도서에 대한 핵심 내용과 지식을 정리한 포스트입니다. 포스트에 올라오는 내용은 도서의 일부이기 때문에 더 자세한 내용이 궁금하신 분들은 출처에서 도서를 구매해 읽어보시는 것을 추천드립니다.

4.1 이미지의 중요성

최근 웹 사이트에는 고품질 이미지로 브랜드 가치나 상품을 홍보하는 등의 방법을 사용하고 있다.
인터넷 초창기에는 1K 이상 크기 이미지를 사용하는 것을 상상하기 어려웠지만, 인터넷, 고해상도 디스플레이의 발달과 함께 사용되는 이미지의 크기는 점점 증가하는 추세다.

화소 밀도(pixel density)

화소 밀도란 물리 스크린 공간 안에 얼마나 많은 픽셀이 압축되어 있는가를 의미한다.
화소 밀도는 1x, 2x와 같은 **기기 픽셀 비율(Device Pixel Ratio, DPR)**로 표현한다.
- 기기 픽셀 비율은 단위 길이 안에 존재하는 픽셀의 개수를 상대적으로 나타내는 단위이다.
모니터나 TV의 화소 밀도는 보통 인치당 픽셀 개수인 **PPI(Pixel Per Inch)**로 표현하며, 1인치 안에 10개의 픽셀이면 10PPI, 20개의 픽셀이면 20PPI로 표현한다.
같은 1인치 안에 픽셀 수가 많으면 많을수록 화소 밀도가 높으며, 화소 밀도가 높을 수록 더 선명한 화면을 표현할 수 있다.
- 단위 인치당 픽셀 수가 많다는 의미는 픽셀의 크기가 1/2 로 작다는 뜻과 같다.

웹 이미지는 포인트라는 용어를 사용하기도 하는데 예를 들어 40 픽셀 이미지는 40픽셀의 너비를 가진 이미지 이미지지만, 40 포인트 이미지는 1x에서 40 픽셀 2x에서 80픽셀 3x에서 120픽셀의 너비를 가진 이미지를 의미한다.
사용자가 사이트에 처음 접속해서 보는 가장 크고 특색 있는 이미지를 Hero 이미지 또는 대문 이미지라고 하며, 사용자가 Hero 이미지를 보는 순간 홈페이지가 대부분 로딩되었다고 느끼고 나머지 리소스들을 기다릴 여유가 생긴다.
- 이때, 비즈니스 측면에서는 화려한 이미지들을 사용하도록 요구하지만 고품질 이미지를 그대로 사용하면 웹 성능 문제가 발생할 수 있기 때문에 딜레마가 발생하게 된다.

4.2 디지털 이미지의 종류와 특성

이미지를 잘 사용하려면 이미지 종류와 특성, 기기 타입과 용도에 맞춘 사용법을 알고 있어야 한다.
대표적인 이미지 타입의 PNG는 다음과 같은 특징을 가진다.
- **알파 채널(alpha channel)**이라는 이미지 변환 기법을 사용하여, 핵심 이미지 레이어를 제외한 배경 이미지 레이어를 제거하여 전체 이미지를 투명하게 만들어 사용할 수 있다.
- 같은 품질의 JPEG 대비 파일 사이즈가 커지는 단점도 있기 때문에 투명 기능을 필요로 하지 않는다면 JPEG 타입으로 변환해 사용하는 것이 좋다.

4.2.1 래스터 이미지 vs 벡터 이미지

디지털 이미지는 일반적으로 디지털 화면에 이미지들을 어떻게 표현하는지에 따라 래스터 이미지와 벡터 이미지로 분류한다.

래스터 이미지

일반적으로 사용하는 대부분의 이미지 유형으로, 작은 사각형 모양의 픽셀에 표현하고자 하는 색상 정보를 입력해 컴퓨터로 표현하는 방식
각각의 픽셀이 모여 하나의 큰 이미지를 완성하기 때문에 사이즈가 크거나 품질이 더 좋은 이미지를 만들기 위해서는 그만큼 정보를 담은 픽셀들을 추가해야만 컴퓨터가 정상적으로 표현이 가능하다. (확장성 떨어짐)

벡터 이미지

그리고자 하는 대상의 수학적 정보를 제공하여 그림이 위치할 좌표나 원 또는 사각형 등의 형상, 크기, 색상 등의 정보를 제공하여 컴퓨터가 그림을 그리듯 화면에 표현한다.
벡터 이미지 중 .svg 확장자를 가진 SVG 파일이 W3C 표준 포맷으로 가장 많이 사용된다.
벡터 이미지는 메타 정보를 담고 있어 화면이 커지거나 작아진다고 해서 이 정보가 달라지지 않아 화면 스케일에 상관없이 항상 선명한 이미지를 표현할 수 있다.
SVG 파일은 텍스트 기반 콘텐츠이므로 gzip이나 brotli 같은 텍스트 압축 기법으로 간단히 최적화할 수 있으며, 또는 zopfli 압축 기법으로 svgz 파일을 만들어 사용할 수도 있다.

4.2.2 무손실 이미지 형식 vs 손실 이미지 형식

이미지 정보의 손실을 허용하는지 여부에 따라 이미지 형식을 구분할 수 있다.
- 원본 이미지 정보 손실을 허용하지 않으면 무손실 이미지
- 필요에 따라 이동할 수 있는 형태를 만들기 위해 정보 손실을 어느 정도 허용하면 손실 이미지

무손실 이미지

GIF(Graphic Interchange Format)

인터넷이 활성화된 이래 가장 처음 등장한 이동식 이미지 형태
몇 개의 이미지를 묶어 짧은 움직임을 표현하는 애니메이션 기능 제공
초창기 형식이기 때문에 사용할 수 있는 색이 256 컬러(8bit)으로 매우 제한적
트루 컬러 타입(true color type)인 GIF 이미지로 변형하여 사용할 수는 있지만 파일 사이즈가 커져 비효율적이기 때문에 단순한 이미지 표현에 적합하다.

PNG(Portable Network Graphic)

GIF 단점과 특허 문제를 해결하기 위해 개발된 무손실 타입 이미지
24비트 색상을 사용해 GIF보다 고품질 이미지 표현이 가능(2^24 색상, 16,777,216)
이미지 백그라운드 투명도를 조절해 하나의 이미지에 여러 배경을 바꾸어 이미지를 다양하게 조합할 수 있다.
PNG 형식에는 컬러 팔레트 PNG와 트루 컬러 PNG로 나뉘며, 대부분 웹 사이트에서는 트루 컬러 PNG가 사용된다.

JPEG(Joint Photographic Experts Group)

JPEG는 사진을 저장하는 사실상 표준 형식으로, 디지털 카메라로 만들어지는 RAW 형식 파일은 크기가 너무 커서 네트워크로 전송하거나 웹에 게시하기 어려워 이를 극복하기 위해 나온 형식이다.
JPEG는 사람의 눈이 인식할 수 있는 색상만 남기고 나머지를 제거하는 방식의 기술을 이용하여 이미지 표시에 필요한 정보를 줄인다. (고해상도 이미지를 압축 파일로 저장 가능)
사용자가 품질 값을 결정할 수 있으며, 0-100 범위로 설정할 수 있지만 100으로 설정해도 약간의 품질 손실은 발생한다.
- 따라서 동일한 이미지를 여러 번 편집해야 하는 경우 비트맵이나 PNG 사용 후 편집 완료 시에 JPEG 저장이 권장된다.
JPEG는 디지털 카메라도 널리 사용되며, 압축률이 높아 PNG 보다 파일 크기가 훨씬 작지만, 투명 기능이나 애니메이션 기능은 지원하지 않는다.

JPEG 2000

JPEG의 단점을 보완하기 위해 개발된 이미지 형식으로, 새로운 방식을 사용해 압축률을 높였다.
무손실 압축 및 투명 기능, 애니메이션 기능을 지원한다.
16,24,32 비트 등 다양한 색상을 지원한다.
그러나 대부분 브라우저에서 지원하지 않으며, 사파리 계열 브라우저 및 iOS 크롬에서만 JPEG 2000 형식을 지원한다.

WebP

WebP는 구글에서 개발하고 배포한 이미지 형식이다.
JPEG보다 개선된 공격적 압축 방식을 사용하여 파일 크기를 25~35% 정도 작게 만들 수 있으며, 무손실 압축, 애니메이션 기능, 투명 기능 모두 지원한다.
다른 이미지 형식들에 비해 압축률이 높지만 이미지 품질을 많이 낮추면 화질에 약간 손실이 발생한다.
JPEG와 같은 점진적 데이터 전송 기능은 없기 때문에 일반적인 환경에서는 파일 크기가 작은 WebP를 사용하는 것이 유리하다.

JPEG XR

마이크로소프트사에서 개발한 이미지 형식으로, XR은 eXtended Range의 약자이다.
- 이름에서처럼 JPEG보다 R/G/B에 해당하는 색상 채널당 더 많은 수의 채색을 허용해서 표현할 수 있는 색상 범위를 확장했다.
무손실 압축 및 투명 기능, 점진적 데이터 전송 기능도 지원한다.
현재는 마이크로소프트사의 인터넷 익스플로러와 엣지 브라우저에서만 지원한다.