프론트엔드 개발자가 알아야 할 이미지 지식

1. 이미지 용어

그래픽(Graphics)과 사진(Photos)

• 그래픽

웹사이트의 로고, 스케치, 차트, 대부분의 애니메이션과 아이콘이 그래픽에 속합니다. 이러한 이미지는 일반적으로 연속된 선이나 뚜렷한 색상 전환으로 이루어지며, 사용되는 색상의 수가 상대적으로 적습니다.

• 사진

사진은 보통 수백만 개의 색상을 포함하며 부드러운 색상 전환과 그라데이션을 가집니다. 카메라로 찍은 일몰 사진을 상상해 보세요. (모나리자의 미소와 같은) 회화 작품의 이미지도 그래픽보다는 사진에 더 가깝습니다.

이미지 포맷 측면에서 볼 때, GIF는 보통 그래픽을 표시하는 데 사용되고, JPEG는 사진을 표시하는 데 더 적합합니다. PNG는 둘 다에 적합하며, 심지어 팔레트 PNG(palette PNG)를 사용하여 그래픽을 표시하는 것이 GIF보다 나을 때도 있습니다.

픽셀(Pixel)과 RGB

이미지는 픽셀로 구성되며, 픽셀은 이미지의 가장 작은 정보 단위입니다. 픽셀을 설명하기 위해 다양한 색상 모델을 사용할 수 있는데, 컴퓨터 이미지 처리에서는 RGB 색상 모델이 가장 널리 쓰입니다.

RGB 색상 모델에서는 빨강(R), 초록(G), 파랑(B)이 각각 얼마나 포함되어 있는지를 통해 하나의 픽셀을 설명합니다. R, G, B를 구성 요소(또는 채널)라고 부르며, 각 구성 요소의 강도 값은 0부터 255 사이입니다. HTML과 CSS에서는 00~FF 범위의 16진수 구성 요소 값을 자주 사용합니다. 서로 다른 강도의 구성 요소를 조합하여 다양한 색상을 얻을 수 있습니다. 예를 들어:

• 빨간색은 rgb(255, 0, 0) 또는 16진수 #FF0000입니다.

• 파란색은 rgb(0, 0, 255) 또는 16진수 #0000FF입니다.

• 회색 음영은 대부분 세 개의 구성 요소 값이 같습니다. 예를 들어 rgb(238, 238, 238) 또는 16진수 #EEEEEE입니다.

트루컬러 이미지와 팔레트 이미지 포맷

RGB 색상 모델을 사용하면 정확히 얼마나 많은 서로 다른 색상을 표현할 수 있을까요? 정답은 1600만 가지입니다. 256*256*256(또는 2의 24제곱)을 계산하면 16,777,216가지 조합이 나옵니다. 이렇게 많은 색상을 지원하는 이미지 포맷을 트루컬러 이미지 포맷이라고 하며, JPEG와 트루컬러 유형의 PNG가 여기에 해당합니다.

이미지 정보를 저장할 때 공간을 절약하기 위해, 이미지 속 다양한 색상을 추출하여 표를 만드는 기술이 있습니다. 이 표를 주로 팔레트(또는 인덱스)라고 부릅니다. 이 색상표가 있으면 팔레트의 항목과 각 픽셀을 매칭하여 전체 이미지를 다시 그릴 수 있습니다.

팔레트에는 임의의 RGB 색상 값이 포함될 수 있지만, 가장 자주 사용되는 팔레트 이미지 포맷인 GIF와 PNG8은 팔레트에 최대 256가지 색상만 포함할 수 있도록 제한합니다. 이는 미리 정의된 256가지 색상 중에서만 선택해야 한다는 뜻이 아닙니다. 오히려 1600만 개 이상의 색상 중에서 원하는 값을 선택할 수 있지만, 단일 이미지 안에 포함될 수 있는 색상의 최대 개수가 256개라는 뜻입니다.

투명도와 알파 채널(RGBA)

RGBA는 완전히 다른 색상 모델이 아니라 RGB를 확장한 것으로, 추가된 구성 요소 A는 알파(alpha) 투명도를 나타냅니다. 값의 범위 역시 0부터 255까지이지만, 실제로는 프로그램과 라이브러리에 따라 투명도를 0%~100%의 백분율로 정의하거나 0-127의 값으로 정의하기도 합니다. 알파 채널은 이미지 픽셀을 통해 그 아래의 내용이 얼마나 보이는지를 설명합니다.

배경을 설정한 웹페이지를 만들고 그 위에 파란색 이미지를 배치했다고 가정해 봅시다. 이미지의 특정 픽셀 투명도가 0으로 설정되어 있다면, 해당 픽셀 아래의 배경은 보이지 않습니다. 알파 투명도가 최댓값인 100%로 설정되어 있다면, 이미지의 픽셀은 숨겨지고 배경이 "드러나" 보일 것입니다. 50%와 같은 중간 값으로 설정하면 배경과 이미지의 픽셀을 동시에 볼 수 있습니다.

인터레이스(Interlacing)

인터넷 속도가 느릴 때 큰 이미지는 다운로드 진행 상황에 따라 줄 단위로 표시되며, 위에서 아래로 한 줄씩 천천히 나타납니다. 사용자 경험을 향상시키기 위해 일부 이미지 포맷은 연속적으로 샘플링된 이미지에 대해 인터레이스 기능을 지원합니다. 인터레이스를 사용하면 이미지가 완전히 다운로드되기 전에 대략적인 형태를 먼저 볼 수 있어 페이지 로딩이 지연되는 듯한 느낌을 심리적으로 줄일 수 있습니다.

2. 다양한 이미지 포맷의 특징

GIF, JPEG, PNG 이 세 가지 포맷의 차이점은 다음과 같습니다:

GIF

그래픽 교환 형식(Graphics Interchange Format)의 약자로, 팔레트 이미지 포맷이며 다음과 같은 특성이 있습니다:

• 투명도

GIF는 이진(예/아니요) 유형의 투명도를 허용합니다. 즉, 각 픽셀은 완전히 투명하거나(색상 없음) 완전히 불투명해야(단일 색상 포함) 합니다. 이는 가변적인 알파 투명도를 지원하지 않음을 의미합니다. 대신 팔레트의 특정 색상을 투명으로 지정하고, 투명한 픽셀에 이 색상 값을 할당합니다. 따라서 GIF에 투명 픽셀을 설정하면 팔레트 항목 하나를 "소비"하게 됩니다.

• 애니메이션

GIF 포맷은 애니메이션을 지원합니다. 애니메이션을 포함한 이미지는 여러 프레임으로 구성되며, 마치 여러 개의 이미지가 하나의 파일에 들어있는 것과 같습니다. 인터넷 초창기에 반짝이는 글자, 회전하는 @ 기호 등을 만드는 데 남용되었기 때문에 GIF 애니메이션을 짜증 나게 생각하는 사람들이 많습니다. 현재는 광고 배너(지금은 Flash가 주도하고 있지만)나 리치 인터넷 애플리케이션(RIA)의 "로딩 중" 표시기 등에 일부 사용됩니다.

• 무손실

GIF는 무손실 압축을 사용합니다. 즉, 임의의 GIF 파일을 열어 수정하고 저장한 뒤 닫아도 화질 손상이 전혀 없습니다.

• 프로그레시브 스캔

GIF 파일을 생성할 때는 파일 크기를 줄이기 위해 LZW라는 압축 알고리즘을 사용합니다. GIF 압축 시 픽셀을 위에서 아래로 한 줄씩 스캔하므로, 가로 방향으로 반복되는 색상이 많을 때 압축 효율이 좋습니다. 예를 들어 가로 방향의 동일한 색상 줄무늬가 있는 500*10 픽셀(가로 500px, 세로 10px) 이미지가 있다고 합시다. 이 이미지를 90도 회전하면(가로 10px, 세로 500px) 세로 방향의 동일한 색상 줄무늬가 되는데, 이 경우 후자의 파일 크기가 전자보다 커집니다.

• 인터레이스

GIF는 선택적으로 인터레이스를 지원합니다.

GIF는 256색 제한이 있기 때문에, 그보다 훨씬 많은 색상이 필요한 사��을 표시하는 데는 적합하지 않습니다. GIF는 그래픽(아이콘, 로고, 차트) 표시에 더 적합하지만, 그래픽을 표시하는 가장 좋은 포맷은 PNG8입니다. 따라서 애니메이션이 필요할 때만 GIF를 사용해야 합니다.

GIF 포맷에 사용되는 LZW 무손실 데이터 압축 알고리즘은 과거에 특허 보호를 받았으나 2004년에 만료되어 현재는 GIF를 자유롭게 사용할 수 있습니다.

JPEG

JPEG는 사진 전문가 합동 그룹(Joint Photographic Experts Group)의 약자로, 이 표준을 개발한 조직의 이름입니다. JPEG는 사진 저장을 위한 사실상의 표준입니다. 사람의 눈이 색상과 빛의 강약을 어떻게 인지하는지 고려하여 다양한 기술을 통해 이미지 표시에 필수적인 정보를 줄입니다. 따라서 해상도가 높은 이미지를 고도로 압축된 파일로 저장할 수 있으며, 다음과 같은 특성이 있습니다:

• 손실 압축

JPEG는 손실 압축 포맷으로, 사용자가 품질 수준을 직접 설정할 수 있습니다. 이 수준에 따라 얼마나 많은 이미지 정보가 버려질지 결정됩니다. 품질 수준은 0부터 100까지 설정할 수 있지만, 100으로 설정해도 어느 정도의 화질 손실은 발생합니다.

이미지에 여러 번의 편집 작업을 해야 할 때는 무손실 이미지 포맷으로 중간 결과를 저장하고 모든 수정이 끝난 후 JPEG 포맷으로 저장하는 것이 좋습니다. 그렇지 않으면 저장할 때마다 화질이 손상됩니다.

하지만 예외적으로 손실이 없는 작업도 몇 가지 있습니다:

-  회전 (90도, 180도, 270도 회전 시에만 해당)

-  자르기

-  반전 (가로 또는 세로)

-  표준 모드에서 점진적(Progressive) 모드로의 전환 및 그 반대

-  이미지의 메타데이터 편집

• 투명도 및 애니메이션

JPEG는 투명도나 애니메이션을 지원하지 않습니다.

• 인터레이스

기본적인 표준 JPEG(Baseline JPEG) 외에 인터레이스를 지원하는 점진적 JPEG(Progressive JPEG)가 있습니다. 단, Internet Explorer는 점진적 JPEG 이미지를 단계적으로 렌더링하지 않고 다운로드가 완료될 때 한꺼번에 표시합니다.

JPEG는 웹에서 사진을 저장하는 데 가장 적합한 포맷이며 디지털카메라에서도 널리 사용됩니다. 하지만 선이나 선명한 색상 전환을 큰 '색상 블록'으로 만들어버리는 손실 압축 방식 때문에 그래픽 저장에는 적합하지 않습니다.

PNG

PNG(Portable Network Graphics, 휴대용 네트워크 그래픽)는 GIF 포맷의 단점을 보완하고 LZW 알고리즘의 특허 문제를 피하기 위해 등장했습니다. 사실 PNG가 "PNG is Not Gif(PNG는 GIF가 아니다)"의 재귀 약자라는 우스갯소리도 있습니다. PNG의 특성은 다음과 같습니다:

• 트루컬러 및 팔레트 PNG 포맷

PNG 포맷에는 여러 하위 유형이 있지만 크게 팔레트 PNG 포맷과 트루컬러 PNG 포맷 두 가지로 나눌 수 있습니다. 팔레트 PNG 포맷은 GIF 포맷을, 트루컬러 PNG 포맷은 JPEG 포맷을 대체하는 데 사용할 수 있습니다.

• 투명도

PNG는 완벽한 알파 투명도를 지원합니다. 단, Internet Explorer 6에서 이 기능을 사용하면 문제가 발생합니다 (투명한 영역이 옅은 파란색으로 변하거나 계단 현상이 나타나는 등. 더 자세한 문제는 IE6에서 PNG 배경이 불투명해지는 문제에 대한 종합적인 고찰을 참조하세요).

• 애니메이션

관련 실험 및 실제 적용 사례가 존재하지만, 현재까지 애니메이션 PNG(APNG) 포맷에 대한 크로스 브라우징 해결책은 없습니다.

• 무손실

JPEG와 달리 PNG는 무손실 이미지 포맷입니다. 여러 번 편집해도 화질이 떨어지지 않습니다. 따라서 JPEG 이미지 수정 과정의 중간 결과물을 저장하는 데 트루컬러 PNG를 사용하는 것이 매우 적합합니다.

• 프로그레시브 스캔

GIF 포맷과 마찬가지로 세로 방향으로 색상이 반복되는 이미지보다 가로 방향으로 색상이 반복되는 이미지의 압축률이 더 높습니다.

• 인터레이스

PNG는 인터레이스를 지원하며 GIF보다 더 나은 알고리즘을 사용합니다. 이를 통해 실제 이미지의 더 나은 "미리 보기"를 제공하지만, 인터레이스를 지원하는 PNG 이미지는 파일 크기가 더 큽니다.

3. PNG

PNG의 분류

PNG는 PNG8, PNG24, PNG32로 나뉩니다:

• PNG8

팔레트 PNG

• PNG24

트루컬러 PNG, 알파 채널 미포함

• PNG32

트루컬러 PNG, 알파 채널 포함

PNG와 GIF

애니메이션을 지원하지 않는 것을 제외하면 팔레트 PNG는 GIF의 모든 기능을 갖추고 있습니다. 게다가 알파 투명도를 지원하고 대체로 압축률이 더 높아 파일 크기도 작습니다. 따라서 가능한 한 GIF 대신 PNG8을 사용해야 합니다.

단축할 수 있는 대역폭보다 HTTP 요청 비용이 훨씬 크기 때문에, 색상 수가 아주 적은 작은 이미지의 경우 예외적으로 GIF의 압축률이 조금 더 높을 수 있습니다. 하지만 이런 작은 이미지는 어차피 CSS Sprite에 포함되어야 하며, Sprite 이미지를 PNG 형식으로 저장하면 더 높은 압축률을 얻을 수 있습니다.

PNG와 JPEG

이미지의 색상 수가 256가지를 초과할 때는 트루컬러 이미지 포맷인 트루컬러 PNG 또는 JPEG를 사용해야 합니다. JPEG의 압축률이 더 높으며 보통 사진 저장에는 JPEG가 사실상의 표준입니다. 그러나 JPEG는 손실 압축 방식이고 선명한 색상 전환 부분 주변에 큰 색상 블록이 생길 수 있으므로, 다음과 같은 경우에는 PNG를 사용하는 것이 더 적합합니다:

• 이미지의 색상이 256가지를 약간 넘는 경우 눈에 띄는 화질 저하 없이 PNG8 포맷으로 변환할 수 있습니다. 놀랍게도 1000가지 이상의 색상을 제거해도 이미지의 변화를 눈치채지 못할 때가 많습니다.

• 많은 색상을 포함하는 이미지나 소프트웨어 메뉴 캡처 등에서 큰 색상 블록이 생기는 것을 용납할 수 없을 때는 PNG가 더 나은 선택입니다.

4. CSS Sprite 최적화

Sprite를 더 작게 만드는 최적화 원칙들이 있습니다:

• 색상별로 병합하기

예를 들어 색상 팔레트가 비슷한 아이콘들을 함께 그룹화합니다.

• 불필요한 여백 피하기

모바일 기기에서 이미지를 더 쉽게 처리할 수 있도록 합니다.

• 요소를 가로로 배열하기

세로로 배열하는 것보다 Sprite 크기가 약간 작아집니다.

• 색상 수를 256개 이하로 제한하기

이는 PNG8 포맷의 색상 수 상한선입니다.

• 개별 이미지를 먼저 최적화한 후 Sprite 최적화하기

제한된 팔레트 색상 값 내에서 색상 수를 줄이는 것이 더 쉽습니다.

• 크기와 정렬을 조절하여 안티앨리어싱 픽셀 수 줄이기

아이콘이 정사각형에 가까울 경우 보통 가로 또는 세로 방향으로 정렬하여 안티앨리어싱 픽셀 수를 줄일 수 있습니다.

• 대각선 그라데이션 사용 피하기

이러한 그라데이션은 타일 형태로 반복할 수 없습니다.

• IE6에서 알파 투명 이미지 사용 피하기

트루컬러 알파 투명이 필요한 이미지는 별도의 Sprite에 저장합니다.

• 모든 픽셀마다가 아닌 2~3픽셀마다 그라데이션 색상 변경하기

• 로고를 다룰 때는 주의하기

로고는 인식하기 쉬워 아주 작은 변화도 금방 눈에 띕니다.

5. 요약

위의 설명에 따르면 일반적으로 PNG가 가장 좋은 선택이며, 애니메이션에는 GIF, 고화질 사진에는 JPEG를 사용하는 것이 좋습니다.

사실 WebP 포맷도 나온 지 꽤 오래되었으며(2010년), 현재 브라우저 호환성이 완벽하지는 않지만 해결 방안이 존재합니다. 자세한 내용은 WebP 탐구의 길을 참조하세요.

참고 자료

• 《고성능 웹사이트 구축을 위한 고급 가이드(Even Faster Web Sites)》