thumbnail
이미지 변환 기법
Frontend
2023.04.10.

썸네일: Unsplash의Paul Hanaoka

출처 : 웹 성능 최적화 기법

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

4.3 이미지 변환 기법

4.3.1 무손실 압축

  • 무손실 압축은 각 이미지 유형을 다르게 처리해야 하지만 대체로 스크립트를 통해 압축을 자동화할 수 있다.
  • 온라인으로 무손실 압축을 제공해주는 사이트도 많으며, 무료로 배포되는 라이브러리 명령어를 이용해 자동화할 수도 있다.

GIF

  • GIF는 256 색상만으로 만들어지며, 애니메이션이 포함되지 않으면 압축률이 더 높은 PNG8이나 각 브라우저에 특화된 이미지 형식으로 변경하는 것이 권장된다.

ImageMagicK

Link : https://imagemagick.org/

  • 비트맵 이미지 생성, 수정, 변환 등 다양한 작업을 할 수 있게 해주는 도구
  • 앞서 설명한 모든 형식 이미지 변환 기능을 지원
  • 내부적으로는 libwebp, jxrlib을 비롯한 다양한 오픈 소스 라이브러리를 필요에 따라 적절히 사용한다.

Gifsicle

Link : https://www.lcdf.org/gifsicle/

  • Animiated GIF 이미지 생성, 편집, 최적화 도구
  • Gifsicle을 이용해 애니메이션이 포함된 GIF 파일 사이즈를 줄이거나 WebP로 변환할 수 있다.
  • 애니메이션은 여러 개의 이미지 프레임으로 구성되고 각 프레임 이미지 사이에 움직이지 않는 부분들이 있으며 Gifsicle은 연속 프레임에서 변하지 않는 부분들을 찾아 제거함으로써 애니메이션을 최적화함

PNG

  • PNG는 PNG임을 알리는 구분자인 첫 8바이트의 서명을 제외하고 청크(chunk) 형태로 이미지 정보를 저장
  • 히스토그램 데이터, 소프트웨어 작성 정보 등의 정보성 청크 등을 사용자 정의 청크로 추가할 수 있다.

Pngcrush

Link : https://pmt.sourceforge.io/pngcrush/

  • 대표적인 PNG 최적화 도구
  • 실행 속도 대비 최적화 결과가 좋아 비용에 비해 최대 효과를 냄
  • 오픈 소스이며, Windows, UNIX, Linux 등 명령행으로 실행되므로 스크립트를 사용해 자동화하기에 적합

Pngquant

Link : https://pngquant.org/

  • PNG에 대한 무손실 압축, 손실 압축까지 지원하는 명령행 기반 오픈 소스 도구
  • ImageAlpha, ImageOptim 등 다양한 GUI형 이미지 압축 도구에서 사용됨

JPEG

  • JPEG는 이미지 정보 외에도 아래와 같은 메타 데이터가 포함되어 있다.
    • 주석 및 공백
    • 어도비 포토샵 같은 편집 어플리케이션 정보
    • 카메라 제조사 모델, 사진 촬영 날짜, 사진 위치 정보 등 EXIF(EXchangeable Image File Format) 정보
  • 메타 데이터는 이미지 세주 정보를 알고 싶을 때는 유용하지만 웹상에서는 도움이 되지 않기 때문에 삭제하면 품질 손실 없이 파일 크기를 줄일 수 있다.

MozJPEG

Link : https://mozjpeg.com/

  • JPEG를 더욱 효과적으로 압축하기 위해 만들어진 라이브러리
  • 다른 이미지 형식에 대한 해독기를 지원해 JPEG로 변환 가능
  • 무손실, 손실 압축 등을 지원하며 1-100 사이 품질 자유롭게 변환 가능
  • Progressive JPEG로 변환하는 기능도 지원
    • Progressive JPEG는 일반 JPEG가 라인별로 완벽한 픽셀로 불러오는데 비해 전체 이미지를 흐릿한 상태로 불러오고 로딩 하면서 선명해지도록 불러온다.
    • Progressive JPEG는 흐릿하긴 하지만 전체 이미지를 불러온다는 점에서 좋은 사용자 경험을 제공하며, 대역폭이나 디스크 공간의 이점을 가져 로딩 속도를 개선할 수 있다.

libJpeg

Link : https://libjpeg.sourceforge.net/

  • JPEG를 생성, 변호나하기 위해 널리 사용되는 무료 라이브러리
  • jpegtran 모듈은 이미지 안 메타 정보를 삭제하거나 Progressive JPEG로 변환하는 등 최적화 작업 수행을 도움

Guetzli

Link : https://github.com/google/guetzli

  • 구글에서 배포하는 JPEG 인코더로, libjpeg 대비 파일 크기를 20-30% 감소시킨다.
  • MozJPEG처럼 quality 옵션을 이용해 원하는 만큼 손실 압축도 할 수 있다.

4.3.2 손실 압축

  • 손실 압축은 특정 이미지 정보를 누락(손실)시켜 파일 크기를 줄이는 방법이다.
  • 손실 압축은 화질이 떨어질 수 있으므로, 고화질의 사진으로 보고 싶은 경우에는 손실 압축을 피해야 한다.
  • 대부분 웹 사용자들은 게시된 이미지의 약간의 화질 차이는 신경 쓰지 않지만, 100ms 이미지 로딩 속도 차에는 민감하게 반응하기 때문에 손실 압축 방식을 통해 시각적 경험 대비 로딩 속도를 향상시킬 수 있다.
  • 최적의 압축 비율은 이미지에 따라 달라지는데, 단조로운 색의 이미지라면 손실 허용률이 크며, 화려한 이미지면 손실 허용률이 작아진다.
  • Imgmin 프로젝트에 의하면 사람이 품질 저하를 거의 눈치채지 못하면서 파일 크기를 가장 크게 줄일 수 있는 JPEG 품질은 100~75%라고 한다.
    • 95% 품질의 이미지보다 75% 의 이미지 크기는 절반 정도로 감소한다.
    • 75% 이하의 품질은 시각적으로 인지할 수 있을 만큼 차이가 커져 사용하기 바람직하지 않다.
  • 손실 압축을 하려면 기존 이미지 형식을 디코딩한 후 알고리즘에 따라 원하는 화질로 저하시켜 다시 원래 이미지 형식으로 인코딩해야 한다.
// ImageMagick으로 손실 압축 하는 예시

$ convert input.jpg - quality 80 output.jpg
$ convert input.png - quality 80 output.jpg

적절한 손실 압축 품질 지수

  • 손실 압축을 위한 최적의 품질 지수를 찾기 위해서는 원본 이미지와 손실 압축 이미지의 시각적 차이를 정량 계산할 수 있는 방법이 필요하다.
  1. 평균 제곱 오차(Mean Squared Error, MSE)
  • 원본 이미지 픽셀과 압축 이미지 픽셀 간 차이
  • 픽셀 값의 차를 구하고 그 제곱 값의 평균을 구한 다음 유사성을 비교한다.
MSE=1mn∑i=0m−1∑j=0n−1[I(i,j)−K(i,j)]2MSE = \frac1{mn}\sum^{m-1}_{i=0}\sum^{n-1}_{j=0}[I(i,j) - K(i,j)]^2
  • I : MxN의 원본 이미지, K : I의 압축 이미지
  1. 최대 신호 대 잡음 비(Peak Signal to Noise Ratio, PSNR)
  • 영상이나 오디오에서 전송 신호 대비 잡음 비율을 의미하지만 이미지 관점에서는 원본 이미지와 압축 이미지의 차이를 의미한다.
  • 오류가 크면 PSNR은 작아지고 원본에 가까우면 PSNR은 커진다.
  • PSNR 단위인 dB(decibel)은 압축 코덱의 우수성을 판단하는 단위로, PSNR이 30dB 이상이면 우수하다.
  • MSE가 클수록 PSNR은 작아지며, 원본 대비 화질이 나빠지는 것을 의미한다.
  • 단 PSNR, MSE는 이미지에 대한 사용자의 시각적 인지 유형이 반영된 것은 아니므로, 특정 이미지 형식의 경우 잘못된 정보를 제공할 수 있다.
  1. 구조적 유사도(Structural Similarity, SSIM)

  • 이미지의 구조 정보를 고려해 품질 차이를 계산하도록 만든 방법이다.

    • 이미지 구조 정보란 밝기(luminance) 정보, 명암 대비(contrast) 정보,구조 정보를 의미한다.

  • 알고리즘에 의해 원본 이미지와 압축 이미지 사이의 유사도를 각 정보별로 평가하고 서로 곱해 전체 이미지 유사성을 평가한다.

  • 0에서 1사이의 점수로 평가하며, 결과가 1이면 원본과 동일, 0에 가까울 수록 화질 왜곡이 심한 이미지다.

  • 값을 역으로 평가하는 역구조적 유사도(DSSIM)도 많이 사용되며, SSIM과는 반대로 평가된다.

  • SSIM은 시각 인지 유형을 고려하여 품질을 비교하는 신뢰성 있는 척도이다.

    • 단, 회색조(gray scale)을 기반으로 동작하므로, 이미지 사이의 색 차이를 정확하게 인지하지 못하는 한계점이 있다.
    • 이를 보완하는 구글의 Butteraugli 프로젝트 같은 기법들이 있다.

  • SSIM은 사용자 경험을 최대화하기 위한 이미지 최적화에 유용하게 사용할 수 있으므로, SSIM 값을 최대화 할 수 있는 품질 지수를 찾아 손실 압축하는 것이 사용자 경험을 최대화 하는 방법이다.


© 2022 Developer Abel, Powered By Gatsby.