지난 개인 프로젝트에 대해서 코드를 다시 보면서 이미지 최적화에 대해서 좀 더 깊게 공부해 보면 좋겠다는 생각이 들었다.

그래서 오늘은 이미지 최적화를 해야 하는 이유와 이미지 최적화 방법론에 대해 간략히 적어보려고 한다.

보통 웹 페이지의 대부분의 용량을 차지하는 부분은 아마 이미지일 것이다.(프로젝트 성격마다 다를 수 있다)

그러므로 이미지 최적화를 통해 이미지 용량을 줄인다면 브라우저가 다운로드 해야 하는 바이트가 줄어들어, 웹 페이지 로딩 성능 최적화의 이점을 누릴 수 있을 것이다. 또한 서버 저장 공간이 절약되어 비용 절감의 효과를 얻을 수도 있다.

이미지 최적화 방법론

웹 화면에 렌더링을 빠르게 하기 위해선, 이미지 리소스 최적화가 반드시 필요하다. 이미지를 최적화 하는 방법으로 8가지의 방법론을 소개하고자 한다.

• 이미지 폭을 조절한다.
• 최적화된 이미지 포맷을 사용한다.
• <img>에 width, height 값을 선언해 Reflow(Layout) 을 방지한다.
• 여러 버전의 이미지를 제공한다.
• 이미지 크기 조절 Tool을 사용한다.
• Image CDNs을 사용한다.
• CSS Sprite 기법을 사용한다.
• lazy loading을 활용한다.

해당 글에서는 Image CDNs 에 대해 알아보겠다.