웹에 날개를 달아주는 웹 성능 최적화 기법 Chapter4

By Gyumyung Lee
book

웹에 날개를 달아주는 웹 성능 최적화 기법

  • 본 책을 읽고 책의 내용을 간략하게 정리한 글입니다.

Chapter 4. 이미지 최적화

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

  • 이미지를 잘 사용하려면 우선 이미지의 종류와 특성을 잘 파악하고, 사용될 기기 타입과 용도에 맞춰 적절한 이미지를 선택해야 함
  • PNG 파일
    • 알파 채널이라는 이미지 변환 기법 사용
    • 알파 채널은 핵심 이미지 레이어를 제외한 배경 이미지 레이어를 제거하여 전체 이미지를 투명하게 만들어 사용한다는 장점 존재
    • 같은 품질의 JPEG 대비 파일 사이즈가 커진다는 단점 존재
    • 투명 기능이 필요하지 않다면 JPEG 타입으로 변환하여 사용하는 것이 사이트 성능을 위해 더 나은 선택
래스터 이미지 vs 벡터 이미지
  • 래스터 이미지
    • 우리가 사용하는 대부분의 이미지 유형
    • 작은 픽셀에 표현하고자 하는 색상 정보를 입력해 컴퓨터로 표현하는 방식
    • 사이즈가 크거나 품질이 좋은 이미지를 만들기 위해서는 그만큼의 정보를 담은 픽셀들을 추가해야만 컴퓨터가 정상적으로 표현 가능
    • 확장성은 떨어짐
  • 백터 이미지
    • 그리고자 하는 대상의 수학적인 정보 제공
    • 그림이 위치할 좌표, 원 또는 사각형 등의 형상, 크기, 색상 등의 정보를 제공하여 컴퓨터가 그림을 그리듯 화면에 표현
    • SVG 파일이 W3C 표준 포맷으로 가장 많이 사용
    • 메타 정보를 가지고 있어 화면 스케일에 상관 없이 항상 선명한 이미지 표현 가능
    • 그림이 복잡해지면 표현하기 위한 정보가 기하급수적으로 늘어나 수학적으로 표현하는 데 많은 제약
무손실 이미지 vs 손실 이미지
  • 무손실 이미지: 원본 이미지의 정보 손실을 허용하지 않는 이미지
    • GIF
      • 가장 처음으로 등장한 이동식 이미지 형식
      • 몇 개의 이미지를 묶어 짧은 움직임을 표현하는 애니메이션 기능
      • 초창기 형식이기 때문에 사용할 수 있는 색이 256 컬러 (8 bit)로 매우 제한적
    • PNG
      • 256 컬러만 사용할 수 있는 GIF의 단점과 특허 문제를 해결하기 위해 개발된 형식
      • 24 bit 색상을 사용
      • 알파 채널로 이미지 백그라운드 투명도를 조절해 하나의 이미지에 여러 배경을 바꾸어 이미지를 다양하게 조합 가능
  • 손실 이미지: 필요에 따라 이동할 수 있는 형태를 만들기 위해 정보 손실을 어느 정도 허용하는 이미지
    • JPEG
      • 사람의 눈으로 인식할 수 있는 색상만 남기고 나머지를 제거하는 기술로 이미지를 표현하는 데 필요한 정보를 줄임
      • 사용자가 품질 값 결정 가능
    • JPEG 2000
      • JPEG 압축 방식과 달리 새로운 방식을 사용하여 이미지 압축률을 높임
      • 무손실 압축 및 투명 기능, 애니메이션 기능 지원
      • 사파리 계열 브라우저와 사파리 라이브러리를 사용해 만들어진 iOS용 크롬에서도 지원
    • JPEG XR
      • JPEG에 비해 R/G/B에 해당하는 색상 채널당 더 많은 수의 채색을 허용해 표현할 수 있는 색상 범위 확장
      • JPEG 2000이나 WebP와 마찬가지로 무손실 압축 및 투명 기능을 지원하고 점진적 데이터 전송 기능도 지원
      • 점진적 데이터 전송 기능 지원
      • 현재 마이크로소프트사의 인터넷 익스플로러와 엣지에서만 지원
    • WebP
      • 구글에서 개발하고 배포한 이미지 형식
      • JPEG 보다 개선된 공격적인 압축 방식으로 파일 크기를 25~35% 작게 만들 수 있음
      • 무손실 압축 및 투명 기능, 애니메이션 기능 지원
      • 이미지 품질을 많이 낮추면 화질에 약간의 손실이 발생하며 JPEG의 점진적 데이터 전송 기능은 갖추지 못함
- GIF PNG JPEG JPEG 2000 JPEG XR WebP
압축률 보통 보통 높음 매우 높음 매우 높음 매우 높음
압축 방식 무손실 무손실 손실 손실/무손실 손실/무손실 손실/무손실
애니메이션 지원 미지원 미지원 지원 지원 지원
투명 미지원 지원 미지원 지원 지원 지원
점진적 전송 지원 지원 지원 지원 지원 미지원
지원 브라우저 모든 브라우저 모든 브라우저 모든 브라우저 사파리 크롬
오페라
안드로이드
파이어폭스(v65+)
사파리(v14+)		 인터넷 익스플로러
엣지

이미지 변환 기법

무손실 압축
  • 무손실 압축을 하려면 각 이미지 유형을 다르게 처리해야 하나, 대체로 스크립트를 통해 압축을 자동화할 수 있다는 장점 존재
  • 무료로 배포되는 라이브러리의 명령어들을 이용해 자동화하는 방법을 알아둬야 함
  • GIF
    • 앞서 언급했던 내용처럼 256 색상만으로 만들어지므로 애니메이션이 포함되지 않다면 압축률이 더 높은 PNG8이나 브라우저에 특화된 이미지 형식으로 변경하는 것 추천
  • PNG
    • 구분자인 첫 8바이트의 서명을 제외하고 청크 형태로 이미지 정보 저장
    • 이미지 정보를 저장하는 것은 핵심 청크
  • JPEG
    • 다음과 같은 메타 데이터들이 포함됨
      • 주석 및 공백
      • 어도비 포토샵 같은 편집 애플리케이션 정보
      • 카메라 제조사 및 모델, 촬영 날짜, 사진 위치 정보, 축소판 또는 오디오와 같은 EXIF 정보
    • 메타 데이터를 삭제하면 이미지 품질 손실 없이 파일 크기 축소 가능
손실 압축
  • 특정 이미지 정보 누락, 손실시켜 파일 크기를 줄이는 방법
  • 손실 압축은 원하는 만큼의 화질을 얻지 못하는 위험이 있으므로 고화질 사진을 저장해 감상하고자 하면 손실 압축은 피해야 함
  • 하지만 웹 상에 게시하고자 한다면 성능과 화질 사이에 득실을 따져야 함
  • 주로 80~85% 정도 품질의 이미지 손실 압축 권장
  • 손실 압축 하려면 기존 이미지 형식을 디코딩한 후 알고리즘에 따라 원하는 화질로 저하시켜 다시 원래 이미지 형식으로 인코딩해야 함
시각적 인지 능력을 고려한 자동 최적화 도구
  • Akamai 같은 CDN 서비스 제공 업체에선 이미지 트래픽 관련 자동 최적화 기능 제공
    • 개별 사용자의 화면 크기, DPI 등의 정보를 고려하여 적절한 SSIM 값에 따라 손실 압축 수행하고 사용 브라우저에 적합한 이미지 형태로 변환
  • Cloudinary에서는 클라우드상에서 이미지나 비디오를 관리하는 솔루션 제공
  • JPEGmini 라는 오프라인 최적화 도구 존재
브라우저 특화 이미지로 변환
  • WebP
    • libwebp 라는 구글에서 제공하는 C 라이브러리
    • Linux, Windows, macOS 에서 WebP를 인코딩, 디코딩하는 기능 제공
  • JPEG 2000
    • OpenJPEG 프로젝트에서 JPEG 2000 이미지를 인코딩, 디코딩하기 위한 C 라이브러리 및 관련 도구 제공
  • JPEG XR
    • 마이크로소프트에서 jxrlib 라는 라이브러리와 도구 제공

반응형 웹에서의 이미지 배치 전략

반응형 웹의 문제점
  • 모바일 환경은 데스크탑 환경에 비해 열악하여 페이지 로딩 시간이 느려짐
  • 모바일 기기의 GPU, 메모리 등의 사양이 좋지 않아 모바일 환경에서 페이지 로딩 시간은 더 길어짐
원인은 이미지
  • 웹 환경에 따라 변하지 않는 이미지의 크기가 원인
  • 화면이 작아졌는데도 필요 이상의 웹 리소스를 과하게 내려받는 현상을 세 가지 유형으로 구분할 수 있음
  1. 내려받아 줄이기 (download and shrink)
    • 반응형 웹에서는 화면 크기가 변할 때마다 나타나는 이미지 가로세로 크기가 달라짐
    • 고정값 대신 전체 화면 대비 이미지 영역의 비율 값 사용
    • 그러나 화면의 이미지 크기가 작아진다고 해서 실제 이미지가 작아지지 않기 때문에 문제 발생
    • 브라우저에서 큰 이미지를 다운로드해 축소 처리를 하면서 실시간으로 계산하는 추가 과정이 필요
  2. 내려받아 숨기기 (download and hide)
    • 데스크탑 환경에는 모바일 환경에서 불필요한 리소스들이 존재함
    • 모바일 환경에서 CSS로 인해 숨겨진 이미지들도 모두 다운로드해 필요 이상으로 네트워크 자원을 소모하며 로딩 시간 지연
  3. 화면 바깥 부분 (below the fold)
    • 화면 바깥 부분의 이미지들은 화면에 보이지 않지만 내려받아 숨기기처럼 모두 다운로드 됨
    • 화면 안쪽 부분이 비즈니스 목표 달성에 있어 가장 중요한 역할을 하지만 바깥쪽 이미지들을 다운로드하기 위해 안쪽 부분의 로딩 시간에도 영향
반응형 이미지
  • 사용자의 환경에 따라 환경에 적합한 이미지를 전송하면 해결
반응형 이미지 구현 방법
  1. 프론트엔드 측면에서의 구현
    • 미디어 쿼리를 사용해 클라이언트 환경을 파악한 후 그 환경에 맞는 이미지 파일을 호출하도록 웹 페이지 구현
    • <img> 태그의 srcset 속성이나 <picture> 태그를 사용해서 표준 방식으로 비교적 쉽게 구현 가능
    • 과도하게 사용할 경우 프론트엔드 코드가 무거워져 성능에 영향을 줄 수 있음
<!--
1x, 2x는 이미지의 화소 밀도
고해상도 화면 기기에서는 
-->
<img src="small.jpg"
    srcset="pic-normal.jpg 1x,
            pic-retin.jpg 2x">

<!--
size 속성으로 브레이크 포인트에 따른 이미지 크기 지정
srcset에 width 정보 정의
-->
<img src="small.jpg"
    srcset="pic-200.jpg 200w,
            pic-400.jpg 400w"
size="(max-width: 400px) 100vw, (max-width: 800px) 30vw, 300px">

<!--
내부적으로 source 태그를 사용해 다양한 이미지 URL 설정
조건에 맞는 이미지만 사용하도록 브라우저를 강제할 수 있음
모든 브라우저가 picture 태그를 지원하지 않는다는 단점
-->
<picture>
    <source media="(min-width: 45em" srcset="large.jpg, large-hd.jpg 2x">
    <source media="(min-width: 18em" srcset="med.jpg, md-hd.jpg 2x">
    <source srcset="small.jpg, small-hd.jpg 2x">
    <img src="small-1.jpg">
</picture>
  1. 백엔드 측면에서의 구현
    • 서버에서 클라이언트의 환경에 맞는 이미지를 선택하여 전송하는 방법
    • 클라이언트 환경을 정확히 어떻게 판단할 것인가 고민거리가 남아있음
    • 서버 측 프로그램이 추가되어야 하는 번거로움
    • 정확한 클라이언트 환경을 전달하기 위해 Client Hints 를 이용하는 방안 존재
    • Client Hints 동작
      • 브라우저에서 최초 서버로 HTTP 요청
      • 서버는 응답 헤더에 Accept-CH를 추가해 Client Hints를 지원하고 있음을 브라우저에 알림, 동시에 필요한 정보를 보내줄 것을 요청
        • Accept-CH: DPR, Width, Viewport-Width
      • 위의 예제는 다음 요청으로부터 DPR, Width, Viewport-Width 정보를 함께 보내줄 것을 브라우저에 요청
      • 브라우저에서는 다음 하위 리소스에 대한 요청부터 아래와 같은 정보를 헤더에 추가해 보냄 
        • DRP: 2.0
Width: 320
Viewport-Width: 320
      • 서버는 최적화된 이미지를 전송한 후 사용한 DPR 정보를 마지막 응답 메시지로 보냄
        • Content-DPR: 1.0
      • 해당 DPR 정보는 브라우저가 서버로부터 받은 이미지를 처리할 때 사용

적응형 이미지 전략

적응형 이미지 아키텍처
  • 다음 두 부분에서 기존 웹 아키텍처와 다름
    1. 요청 클라이언트 정보 감지
    2. 클라이언트 맞춤형 데이터를 로딩하는 서버 로직 추가
  • 적응형 이미지 아키텍처에서 가장 근본적이고 중요한 부분은 “클라이언트 정보를 어떻게 감지하느냐.”
  • Client Hints를 지원하는 브라우저가 적어 실제로는 HTTP 요청의 User-Agent 헤더를 통해 클라이언트 정보를 알 수 있음
    • User-Agent에는 브라우저 정보와 버전, 플랫폼, 시스템, 기타 사용자 정보 등이 담김
    • # User-Agent 형식
    
일반적인 형식
User-Agent: <product> / <product-version> <comment>
    
브라우저 형식
User-Agent: Mozilla/<version> (<system-information>) <platform> (<platform-details>) <extensions>
    
예시
Mozilla/5.0 (iPad; U; CPU OS 3_2_1 like macOS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Mobile/7B40S
    • User-Agent 값을 기반으로 필요한 정보들을 수집해 사용자 정의 헤더나 쿠키에 넣어 서버로 전달 가능
  • 기기 검출 솔루션은 대표적으로 DeviceAtlas, ScientiaMobile/Wurf, 51degree 등이 존재

웹에 날개를 달아주는 웹 성능 최적화 기법, 강상진, 윤호성 저, 루비페이퍼 출판