이미지 최적화란?

1. 이미지 최적화가 필요한 이유

인터넷을 사용하다보면 늦게 로딩되는 경우가 종종 있습니다. 이렇게 늦게 로딩되는 이유 중 하나는 이미지가 압도적으로 큰 용량을 차지하기 때문에 다운받는데 시간이 많이 걸리게됩니다. 최적의 사용자 경험을 위해서는 사이트의 성능 향상이 필요하고, 그렇기때문에 이미지 최적화가 필요합니다! (웹 페이지 로딩 속도는 사용자의 경험뿐만 아니라 SEO 순위를 결정하는데에도 영향을 미친다고 하니 더 간과할 수 없는 부분 중 하나입니다.)

2. 그래서 이미지 최적화는 어떻게 할수있는데?

이미지 최적화에는 다양한 방ㅇ법이 존재하는데, 그 중 5가지만 소개하도록 하겠습니다.

1) img태그의 srcset 속성과 sizes 속성의 활용

• srcset은 사이즈가 다른 이미지를 2장 이상 준비하여 제공합니다. 이 이미지는 사용자의 해상도와 브레이크 포인트에 따라 달리 제공합니다.
• srcset 속성을 지원하지 않는 브라우저를 위해 (크로스 브라우징) src속성도 함께 지정해줌으로써 다양한 브라우저 환경에 노출된 사용자들에게 이미지를 제공합니다.

2) <picture> 태그의 사용

• picture는 이미지 자체를 불러오는것에 목적을 둔 img 와 달리 화면 크기에 따라 이미지를 정의하기 위해 사용되는 태그입니다. 하지만 picture 태그는 IE환경에서는 사용이 불가하다보니 polyfill속성을 사용하거나 img태그를 마지막에 추가해주는 방식으로 사용해야합니다.

• picture태그는 source요소 중 type도 함께 써주어야 이미지 성능에 의미가 있습니다. 만약, type을 사용하지않는다면 브라우저에서는 모든 타입을 가져와 매칭을 해보아야하니까(정보가 없으니까) 성능이 떨어지게 됩니다. 그러면 브라우저 호환성이 떨어지는 단점을 감안하고picture을 사용하는 의미가 없겠죠?

<picture>
  <source srcset="/images/abc.webp" type="image/webp">
  <img src="abc.png" alt="logo">
</picture>

polyfill 이란?

• 브라우저에서 지원하지 않는 코드를 사용 가능한 코드 조각로 번역해주는 플러그인을 말합니다. ES5에서 ES6 문법을 사용 가능한 객체로 변환해줍니다.

• picturefill은 async속성을 사용하여 비동기적으로 처리하라고 알려줌으로써 효과적인 페이지로딩이 가능해집니다.

3) 적극적인 차세대 이미지 포맷 활용

• 3가지의 대표적인 이미지 포멧이 존재하는데 이러한 이미지도 성능에 영향을 미치게됩니다.

1) webp

• 무손실 및 손실 압축을 제공하는 최신 이미지 파일 포맷입니다. PNG나 JPG보다 더 작은 크기의 이미지를 만들수 있고, 투명도를 지원한다는 장점이있지만, 최신 기술이다보니 지원하지않는 브라우저 환경도 존재합니다 (그래서 크로스 브라우징이 넘나 중요하죠...!)

2) avif

• 손실과 비손실 압축을 전부 지원해 webp처럼 png, gif, jpeg 같은 상용 이미지들을 대체할 수 있습니다. 거기다 webp보다 늦게 나온 포맷이다보니 아직 안정적이지않고, 지원하지 않는 브라우저 환경도 존재한다는 단점도 있습니다.

3) heic

• MPEG에서 개발된 이미지 포맷으로, 아이폰 사용자들이 주로 사용하게됩니다.

4) 스프라이트 이미지

브라우저를 랜더링할때 이미지를 가져오는데, 아무래도 이미지를 여러개 가지고오는 것 보다는 하나만 가져오는것이 최적화관점에서 중요하겠죠? 이미지 스프라이트는 이러한 문제를 해결해줍니다. 하나의 이미지 파일로 여러개의 이미지를 통합한 후 position 태그를 사용해서 트래픽을 줄일 수 있고, 여러 이미지를 가져오는 것 보다 성능이 더 좋습니다.

5) 이미지 로딩

우리가 브라우저를 열어보면 꼭 필요한 이미지가 있고, 큰 비중을 차지하지 않는 이미지들도 존재하죠. 이러한 불필요한 이미지(사용자에게 보여지지 않는 이미지)는 필요한 시점이 오기전까지는 로딩을 하지 않는것이 이미지 로딩입니다.

이는 초기 로딩 시점에서 로딩이 필요한 이미지 수를 줄이며 다른 리소스들을 빠르게처리하며 성능을 확보합니다. 이런 이미지 로딩을 확인하기 위해서는 구글의 extension인 lighthouse audit tool을 이용하면됩니다. 이 사이트는 초기 로딩시 얼만큼의 바이트를 줄일 수 있는지 확인할 수 있습니다.

성능 향상과 비용 절감, SEO 순위까지 영향을 미치다보니 이미지 최적화가 더 중요하게 다가오는 것 같습니다. 이러한 포맷도 활용해서 프로젝트를 진행해보아야 할 것 같습니다.