느린 이미지 로딩 분석

• 이미지 지연 로딩을 통해서 스크롤이 이미지 위치에 도달했을 때 이미지가 로드되지만 막상 이미지가 로드되는 속도가 굉장히 느림

느리게 로드되는 이미지

• 지연 로딩을 적용하기 전에는 처음부터 이미지를 다운로드했기 때문에 스크롤을 내려도 거의 바로 로드된 이미지가 보였음
• 지금은 스크롤이 이미지 위치에 도달하는 순간 로드하기 때문에 바로 전체 이미지가 보이지 않고 천천히 로드되는 것임
• 메인 페이지에서 이 이미지들은 그리 중요한 역할을 하지 않지만, 이미지가 어떻게 잘려 보이면 서비스가 느리다는 느낌을 줄 수 있음
• Network 패널을 통해 이 이미지들을 살펴보면, 파일 크기가 매우 큰 것을 볼 수 있음. 이렇게 이미지 사이즈가 크면 다운로드에 많은 시간이 걸리고 그만큼 다른 작업에 영향을 줌
• 이번에 적용할 최적화 기법은 이미지 사이즈 최적화임

이미지 포맷 종류

• 이미지 사이즈 최적화는 이미지의 가로, 세로 사이즈를 줄여 이미지 용량을 줄이고 그만큼 더 빠르게 다운로드하는 기법임
• 아래의 왼쪽 이미지는 사이트에 있는 이미지 중 하나임. 가로와 세로가 각각 3946px로 굉장히 고화질임. 이 큰 사이즈의 이미지를 작게 줄이고, 추가로 이미지의 압축률을 높여 최적화해볼것임

• 이미지의 사이즈를 줄이기 전에, 이미지를 잘 다루기 위해 짚고 넘어가야 할 것이 있음**. 이미지의 포맷**임
• SVG와 같은 벡터 이미지가 아닌 비트맵 이미지 포맷 중 대표적인 세가지 포맷은 아래 3가지와 같음
  1. PNG: 무손실 압축방식으로 원본을 훼손 없이 압축하며 알파 채널을 지원하는 이미지 포맷임. 알파 채널이란 투명도를 의미함. PNG 포맷으로 배경색을 투명하게 하여 뒤에 있는 요소가 보이는 이미지를 만들 수 있음
  2. JPG(JPEG): PNG와 다르게 압축 과정에서 정보 손실이 발생함. 하지만 그 만큼 이미지를 더 작은 사이즈로 줄일 수 있음. 그래서 일반적으로 웹에서 이미지를 사용할 때는 고화질이어야 하거나 투명도 정보가 필요한 게 아니라면 JPG를 사용함
  3. WebP: 무손실 압축과 손실 압축을 모두 제공하는 최신 이미지 포맷으로 기존의 PNG나 JPG에 비해서 대단히 효율적으로 이미지를 압축할 수 있음. 공식 문서에 따르면 WebP 방식은 PNG 대비 26%, JPG 대비 25~34% 더 나은 효율을 가지고 있다고 함
• PNG보다 JPG, JPG보다는 WebP를 사용하는 것이 좋을 것 같지만 마냥 간단한 문제는 아님. 왜냐하면 브라우저 호환성 때문임. WebP는 최신 이미지 파일 포맷이라서 아직 지원하지 않는 브라우저도 있음. 물론 2010년에 발표된 기술이지만, 기술이 나왔다고 모두 바로 반영되지는 않음. 그래도 지금은 꽤 많은 브라우저에서 지원함

<aside> 💡 사이즈: PNG > JPG > WebP 화질: PNG = WebP > JPG 호환성: PNG = JPG > WebP

</aside>

<aside> 💡 Can I use는 브라우저 및 버전별로 특정 기능의 지원 여부를 알려 주는 사이트임. 초록색은 해당 기능을 지원한다는 뜻, 빨간색은 지원하지 않는다는 뜻임. 노란색은 부분적으로 지원한다는 의미임. WebP의 경우 IE 브라우저에서 지원하지 않음을 확인할 수 있음

</aside>