웹 페이지 성능 향상 방법 중 하나인 이미지 최적화.
웹에서 자주 사용되어지는 이미지에 대해 알아보고, 최적화 원리와 방식에 대해 알아보자.

Image

이미지 파일 형식은 디지털 이미지를 구성하고 저장하는 표준적인 방법을 의미한다.
따라서, 이미지 파일은 모니터나 프린터로 레스터화할 수 있는 데이터의 모음이라고 생각하면 된다.

래스터화(Rasterization)란, 벡터 그래픽으로 설명된 이미지를 래스터이미지(=비트맵이미지)로 변환하는 작업.

이미지(데이터의 모음)는 일반적으로 아래와 같은 포맷으로 저장할 수 있다.

• Raster formats
  • 데이터를 사각형 그리드(해상도) 안에 각 픽셀의 값을 인코딩하여 저장.
  • 인코딩시, 압축 or 무압축 처리가 된다. (압축시 데이터 손실이 발생할 수 있음.)
  • 해상도가 크고, 각 픽셀을 표현하는 색의 정보가 많을 수록 수록 데이터의 크기가 커진다.
• Vector formats
  • 데이터를 점, 선, 도형으로 저장.

file types

2가지 포맷으로 되어 있는 많은 이미지 파일들이 있지만, 웹에서 흔히 사용되어지는 이미지 파일 타입들에 대해서만 알아보자.

MDN에서는 몇가지의 타입(WebP, AVIF, APNG)에 대해 더 설명해 주고 있지만, 이 글에서는 브라우저 호환성을 고려하여(IE..) 작성하였다.

Optimize

이미지는 대체로 웹 페이지의 HTML, CSS, Javascript 등의 리소스보다 많은 바이트를 필요로 한다.
가장 좋은 최적화 전략은 이미지를 대체할 수 있는 방식(ex. css 표현, 웹폰트 사용 등)를 활용하여 사용자에게 컨텐츠를 전달하는 것이겠지만 이미지 또한 좋은 표현 수단이므로 올바른 포맷을 선택하는 기준, 최적화를 하는 방식/방법에 대해 알아보자.

포맷을 선택하는데에 있어, 정답은 없지만, 최선의 노력은 존재한다.

svg

로고, 텍스트, 아이콘과 같은 기하학적인 모양으로 구성된 이미지
또한, 해상도 및 배율에 독립적이므로 다양한 크기로 표현해야하는 경우에도 좋다.

이미지가 복잡하여 svg 마크업 양이 많아지는 경우에는 사용하면 좋지 않다.

최적화

• svg를 서빙해 주는 서버에서 svg에 대한 gzip 설정.
• xml내 불필요한 요소들 제거 / xml node 구조 변경.
  • 플러그인 아키텍처로 이루어진 SVGO(SVG Optimizer)의 플러그인 리스트들을 확인하면 어떤 항목들을 최적화시킬 수 있는지 알 수 있다.

removeDoctype
removeXMLProcInst
removeComments
removeMetadata
removeEditorsNSData
cleanupAttrs
mergeStyles
inlineStyles
minifyStyles
cleanupIDs
removeUselessDefs
cleanupNumericValues
convertColors
removeUnknownsAndDefaults
removeNonInheritableGroupAttrs
removeUselessStrokeAndFill
removeViewBox
cleanupEnableBackground
removeHiddenElems
removeEmptyText
convertShapeToPath
convertEllipseToCircle
moveElemsAttrsToGroup
moveGroupAttrsToElems
collapseGroups
convertPathData
convertTransform
removeEmptyAttrs
removeEmptyContainers
mergePaths
removeUnusedNS
sortDefsChildren
removeTitle
removeDesc

gif

간단한 도형, 로고, 만화 그림처럼 색이 별로 필요 없는 이미지와 애니메이션을 표현하고자 할 때
애니메이션 표현시 loop, delay에 대한 설정이 이미지 내에 저장되기 때문에 여러 환경에서 편리하게 사용할 수 있다.

무손실 압축을 하기 때문에 프레임이 많아지면 용량도 매우 비대해지므로, 이럴 땐 다른 방식을 활용하는게 좋다.
웹 페이지가 모던 브라우저만 지원해도 된다면, APNG, AVIF를 사용하는게 훨씬 좋을 수 있다.
(avif는 edge와 safari에서는 지원되지 않는다..)

최적화

gif를 최적화를 할 수 있는 방법은.. 해상도 줄이기, 사용 색상 줄이기, 애니메이션 프레임 줄이기와 같은 원초적인 행위 밖에 없는데,
이는 이미지의 표현을 의도한대로 사용자에게 전달할 수 있는 방법이 아니다.

jpeg

사진과 같이 복잡한 패턴과 색상을 갖는 이미지
웹 페이지 전체를 뒤덮는 배경 이미지
PC 웹의 배경 이미지는 대부분 고해상도로 되어 있는데 어느정도 이미지 손실을 감안하더라도 성능을 위해 jpeg를 사용하는 것이 좋다.

고주파 성분이 많은 문자, 선, 격자 등 단색이나 뚜렷한 윤곽선을 가지는 이미지에서는 품질 저하(뭉개짐, 노이즈)가 다소 뚜렷하게 보이는 현상이 있다. 이러한 이미지는 PNG와 같은 다른 형식을 사용하자.

주파수는 전자기파의 주파수를 말하는 것이 아니라, 데이터를 격자 상에 늘어 놓았을 때의 공간적인 변화를 말하는 것

최적화

• 불필요한 메타데이터 제거.
  • EXchangable Image File, Adobe's Extensible Metadata Platform 등
• jpeg 퀄리티를 (적당히)낮은 값으로 설정.
  • 퀄리티가 낮아지면 손실율이 올라가기 때문에 절충점을 찾아 여러 품질로 시도하자.

예시

위의 최적화 방법이 적용된 tinyjpg를 통한 비교예시

	orginal	compressed
Image
Size	614KB	162KB
출처	https://tinyjpg.com/

png

문자, 선, 격자 등 단색이나 뚜렷한 윤곽선을 가지는 이미지
알파 채널을 표현해야되는 이미지
무손실 압축을 하기 때문에 웹상에서 이미지가 추가적으로 편집/저장될 가능성이 있을 경우에 사용해도 좋다.
애니메이션을 표현해야 한다면 확장 포맷인 APNG 형식을 사용할 수도 있다.

이미지에 사용되어지는 색상이 많을 경우, png의 용량이 비대해질 수 있으므로 다른 형식을 사용하자.

최적화

• 불필요한 메타데이터 제거.
• 각 픽셀을 표현하는 color depth(색 심도)를 8-bit indexed color로 설정.

예시

위의 최적화 방법이 적용된 tinypng를 통한 비교예시

	orginal	compressed
Image
Size	57KB	15KB
출처	https://tinypng.com/

color depth(색 심도)에 따른 비교예시

	24 bit	8 bit
Image
Size	98KB	37KB(-62%)
출처	https://en.wikipedia.org/wiki/Color_depth

마치며

1. 이미지를 사용하지 않아도 되는 상황이라면 사용 X.
2. 표현하는 컨텐츠에 적합한 최적의 이미지 형식 선택.
3. 각 이미지 타입에 맞는 최적화 적용.
4. 웹 페이지에서 보여주는 이미지의 해상도와 최대한 동일한 해상도를 가진 레스터 이미지 제공.
   가능하다면 srcSet, sizes 속성을 통하여 반응형 이미지 제공.

References

• https://en.wikipedia.org/wiki/Image_file_format
• https://en.wikipedia.org/wiki/Rasterisation
• https://en.wikipedia.org/wiki/Color_depth
• https://web.dev/fast/#optimize-your-images
• https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images