아카마이 테크놀로지스 / 김현도 이사
2. 이미지 최적화 아키텍쳐 구성
이처럼 다양한 접속 장비들의 종류와 운영체제, 브라우져등에 대응하면서도 최적화된 이미지 전송 아키텍처를 구성하기 위해 고려해야할 사항들이 있다.
○ 벡터 이미지와 래스터 이미지 구분
- 레스터 이미지는 우리가 사용하는 대부분의 이미지 유형이다. 작은 사각형 모양의 픽셀에 표현하고자 하는 색상정보를 입력하는 비트맵(bitmap)이라고도 부른다. 색상정보에는 빨간색, 초록색, 파란색, 투명도가 포함된다.
- 벡터 이미지는 그림 자체가 가진 정보를 바탕으로 정점과 정점 사이를 수학적으로 계산하여 그림을 표시하는 방식이다. 이미지를 만드는 개별 픽셀 정보를 채우지 않아도 되며 수학식으로 만들기 때문에 상대적으로 파일의 크기가 작다. 가장 중요한 특징인 확대나 축소를 거쳐도 이미지가 가지고 있는 정보에는 변함이 없기 때문에 화면의 크기나 해상도에 상관없이 항상 선명한 이미지를 제공한다.
○ 올바른 이미지 형식 사용하기
대체로 웹페이지에서는 JPG파일이 주로 사용되며 PNG파일이 가장 많이 쓰이는 이미지 형식이다. 사용 목적에 따라 다음과 같이 구분된다.
- JPEG(Joint Photographic Experts Group)
고화질의 이미지 손실을 최소화하면서도 효율적으로 압축하여 용량을 줄이는 방식으로 호환성이 좋기 때문에 가장 많이 사용된다. JPEG형식의 이미지는 상대적으로 적은 용량으로도 색상과 선명도 부분에서 좋은 효과를 주며 그라데이션 처리에 유리하지만 문자나 선, 세밀한 격자 이미지등이 포함되었다면 품질 저하가 관측된다. - JPEG 2000
이미지 압축율을 높였으며 무손실 압축, 투명기능, 애니메이션 기능과 함께 좀 더 다양한 색상을 지원하는 형식이다. JPEG의 후속기술로 개발되었으며 Apple의 Safari브라우져와 iOS용 Chrome 브라우저를 제외한 대부분의 웹 브라우저에서는 지원하지 않으며 jp2, jpx를 확장자로 사용한다. - JPEG XR
마이크로소프트에 의해 개발되었으며 윈도우 미디오 포토용 포맷으로 사용된다. 이 형식은 RGB에 해당하는 색상 채널을 더 확장하여 더 풍부한 이미지 표현이 가능하다는 장점이 있지만 인터넷 익스플로러와 엣지 브라우져에서만 지원하고 있다. - JPEG XL
기존 JPEG를 대체할 목적으로 시작되었으며 로열티 없는 손실/무손실 이미지를 지원하는 포맷이며 Free Lossless Image Format(FLIF), Google Pik, Free Universal Image Format(FUIF) 기술 기반이다. WebP등을 포함한 기존 포맷보다 효율적인 성능을 보이는 케이스가 있다. - PNG(Portable Network Graphics)
JPG와는 다르게 비손실 압축 방식을 사용하며 알파채널을 이용한 투명레이어를 활용할 수 있다. 스크린샷 데이터와 같이 이미지에 포함되는 색상이 단순하고 배경이 제거된 형태의 아이콘이나 워터마크용 이미지에 사용된다. - AVIF
AV1-based Image Format의 약자이며 AOMedia에서 개발한 이미지 형식이다. AV1 코덱에 의해 생성된 Index프레임을 이미지로 사용할 수 있도록 수정했으며 GIF, JPG, PNG등의 전통적인 이미지 형식을 대체하기 위한 목적이었으며 높은 압축효율이 강점이다. 넷플릭스는 2020년부터 자사의 서비스중 썸네일 이미지 형식으로 AVIF를 채택하고 있다. - WebP
2010년 구글이 발표한 새로운 이미지 형식이며 JPG와 PNG를 대체하기 위해 개발되었다. 웹이미지에 대한 뛰어난 무손실 압축율을 가지고 있다. VP8 비디오 코덱의 기술에 기반한 영상 압축 방식을 사용한다. Animated WebP로 애니메이션을 지원하면서도 기존 GIF에서 가지는 256색의 제한에 자유롭다. 인터넷 익스플로러를 제외한 대부분의 브라우저와 호환된다. - GIF
1989년에 개발된 이미지 형식이며 이후 JPG가 개발되기 전까지 이미지 파일들은 대부분 GIF를 사용했다. 움직이는 애니메이션을 지원하지만 256가지의 색상만(8비트) 지원하기 때문에 섬세한 색을 표현하는 이미지에는 적합하지 않다. - SVG
벡터 이미지 형식을 지원하며 Scalable Vector Graphics의 약자이다. svg 확장자를 가지며 실제 데이터는 XML이기 때문에 텍스트 편집기로 수정이 가능하며 높은 브라우져 호환성을 갖고 있다.
<svg 파일 내의 XML 데이터 예제>
○ 네트워크 대역폭을 고려한 이미지 전송 품질
- 사용자들의 인터넷 접속 속도를 결정짓는 네트워크 대역폭은 접속 장비의 성능, 네트워크 제공 사업자의 인프라와 주변 환경에 따라 매우 가변적으로 움직인다. 안정적인 네트워크 대역폭을 이용한 사용자에게는 상대적으로 높은 품질의 이미지를 전송하더라도 전송시간의 증가는 미미한 수준이기 때문에 사용자 경험에는 큰 문제가 발생하지 않는다.
불안정한 네트워크 대역폭을 이용한 사용자는 이미지 품질을 희생하더라도 높은 압축율을 적용한 이미지를 제공하는 것이 효율적이다.
○ 디바이스 스크린 해상도와 이미지 변환 정책
- 스크린 해상도는 화소 밀도와 연관이 있으며 화소 밀도는 스크린 공간안에 얼마나 많은 픽셀이 압축되어 있는가를 가리킨다. 모니터나 TV 또는 스마트 디바이스의 화소밀도는 PPI(Pixel Per Inch)라고 표현되며 1단위 인치안에 얼마나 많은 픽셀이 있느냐를 나타내며 화소 밀도의 증가는 보다 선명한 이미지를 나타낼수 있게 된다. 따라서 스크린 사이즈마다 최적의 화소 밀도 정책을 유지하기 위한 이미지 변환 정책이 필수적이며 각 이미지 유형마다 다르게 처리하는 무손실 압축과 어느정도의 이미지 정보를 누락시킴으로써 파일의 크기를 줄이는 손실 압축 방법이 있다.
- 손실 압축의 경우 인간의 인지 능력이 채색차이에 둔감하고 명암차이에 민감하다는 특성을 이용한 것으로 JPEG 이미지 형식의 경우 품질저하를 크게 체감하지 않고 효율적으로 사이즈를 줄일 수 있는 품질 지수는 95~75%가량이라고 알려져 있다.
- 품질 지수를 평가하기 위한 가장 대표적인 알고리즘은 SSIM(Structural Similarity)이며 이미지의 구조적 정보를 이용하여 품질 차이를 계산한다. 구조적 정보는 밝기와 명암정보, 그리고 이 두 값의 상관관계를 의미하며 SSIM의 결과값은 0과 1로 나타내는데, 1에 가까울수록 원본과 동일한 품질이라는 의미이다.
○ 적절한 지각 품질 선택 - Perceptual Quality
- 지각 품질이란 사람이 이미지를 보고 인지하는 품질을 말한다. 동일한 이미지라도 명암의 변화에 따라 느끼는 품질이 다르게 느껴지는데, 예를 들어 아래 네장의 이미지는 동일한 사물을 담고 있지만 일반적으로 가장 선호되는 이미지는 첫번째 내지는 네번째 이미지이며, 다른 두장의 이미지보다 더 나은 명암정보를 갖고 있기 때문이다.
- 이와 같은 원리를 이용하여 지각 품질을 조정하면서 이미지 크기를 압축시킬 수 있다. 아래 예제 에서는 395KB의 원본 이미지를 적절한 수준의 명암비 조정을 통해 50% 가까운 수준으로 압축하여 196KB까지 낮추었지만 지각 품질은 유지했다.
- 이러한 Perceptual Quality의 조정은 일종의 정보 왜곡현상(Distortion)을 일으키기 때문에 각기 다른 이미지들에 동일한 압축수준을 적용하는 것이 아닌 각각 이미지들의 특성을 고려하여 최대 압축 수준을 정의해야 한다.
저작권정책
K-ICT 클라우드혁신센터의 저작물인 『[2부] 클라우드 환경에서의 이미지 최적화 트렌드』는 K-ICT 클라우드혁신센터에서 아카마이 테크놀로지스 김현도 이사에게 집필 자문을 받아 발행한 전문정보 브리프로, 클라우드 지원포털의 저작권 정책에 따라 이용할 수 있습니다. 다만 사진, 이미지, 인용자료 등 제3자에게 저작권이 있는 경우 원저작권자가 정한 바에 따릅니다.