웹 사이트를 방문하면 "이미지 로딩이 느리다"라는 느낌을 받은 사람들은 많을 것이다.
이미지는 웹 사이트의 성능을 좌우하는 요소의 하나이며, 웹 개발에 있어서 취급시 주의해야 할 것이다. 그런 이미지를 웹 사이트에서 작업시 최적화 하는 방법을, Google 엔지니어 인 Malte Ubl 씨가 설명.
■ img 요소에 width와 heidht를 지정
화면 비율을 유지하면서 이미지 크기를 변경하려면, "style" 요소에 "max-width : 100%"나 "height : auto"라고 지정해 두는 방법이 자주 사용된다. 이 방법 외에도 "img" 요소에 "widht"와 "height" 속성을 지정하는 것으로, 웹 브라우저는 이미지를 다운로드하기 전에 이미지의 위치를 확보 할 수 있기 때문에, 레이아웃 붕괴의 지표인 CLS를 개선가능하다는 것.
■ "content-visibility" 속성
CSS 속성의 "content-visibility"를 지정하는 것으로, CPU 리소스 사용량을 최적화 할 수있다. 또한 content-visibility 속성을 지정하는 것만으로는 CLS를 악화시킬 수 있으므로, contain-intrinsic-size 속성에서 요소의 크기를 브라우저에 알릴 필요가 있다라는 것. 이 경우 img 요소에 widht와 height를 지정하는 경우와는 달리, 화면 비율도 지정해야한다.
■ AVIF
AVIF는 현시점에서는 Chromium 브라우저만 기본적으로 지원하는 이미지 포맷으로, jpeg 보다 지속적으로 높은 성능을 가지고있다고 한다. AVIF를 사용하는 경우는 "picture" 요소를 이용하여 다음과 같이 코드를 작성. picture 요소 자체는 레이아웃을 가지고 있지 않고, 실제로 렌더링되는 것은 img 요소라고 설명되어있다.
또한 AVIF를 서버 측에서 인코딩 할 수있는 라이브러리로 "sharp" 등이 있다라는 것.
■ 이미지 URL 해시 값을 포함
이미지 URL에 해시 값을 포함, 이미지 갱신시에 해시 값을 변경하도록 해두면, 이미지 캐시의 유효 기간을 무기한으로 설정할 수있다.
■ 지연로드
img 요소에 "loading="lazy""라고 지정해두면, 이미지 로딩을 실제로 이미지가 표시 될 때까지 지연시킬 수있다.
■ 디코딩 처리의 비 동기화
img 요소에 "decoding="async""로 지정하는 것으로, 이미지의 디코딩 처리를 백그라운드로 돌릴 수 있다. 다른 내용의 처리를 방해하지 않고 이미지를 로드 할 수있다.
■ 플레이스 홀더로 흐림 이미지를 사용
img 요소의 "background-image" 속성에 흐림 이미지를 지정하면, 실제 이미지가 표시 될 때까지 플레이스 홀더로 이미지를, JavaScript를 사용하지 않고 표시 할 수있다. 또한 실제 이미지의 URI을 SVG 이미지의 URI로 랩하는 것으로, 흐림 처리를 CSS 수준이 아니라, SVG 수준으로 이루어지므로, CPU 리소스를 절약할 수 있다는 것.
또한 이러한 이미지 로딩을 최적화하면서 블로그를 개발하는 사람들을 위해 Google이 GitHub에서 템플릿을 공개하고있다.
