더 스마트하고, 가볍고, 나은 이미지: 최적화 가이드

웹사이트에 표시되는 이미지가 얼마나 큰지 알고 계신가요? 페이지를 열면 브라우저는 페이지를 표시하기 위해 많은 파일을 다운로드하기 시작합니다. 연구에 따르면 이미지는 가장 많이 요청되는 자산 유형(에셋)이며 다른 어떤 리소스보다 더 많은 대역폭을 차지합니다. 따라서 이미지를 최대한 작게 만들면 웹사이트의 로딩 시간을 크게 개선할 수 있습니다. (스포일러: 최적화 작업을 통해 웹사이트가 85% 빨라졌어요!) 이 글에서는 모던 이미지 포맷을 사용하여 용량이 적은 이미지를 로드하는 방법과, `srcset` 속성을 통해 디바이스의 사이즈에 맞는 이미지를 불러오는 방법, `loading="lazy"`와 `decoding="async"` 속성을 통해 초기 웹페이지 렌더링 속도를 향상 시키는 방법에 대해 소개합니다.