이미지 최적화 및 LCP

이미지 최적화란?

이미지 최적화란 좋은 품질의 이미지를 제공하는 동시에 가능한 가장 적은 메모리를 유지하는 과정

페이지 성능과 품질을 높이기 위해서는 이미지 최적화가 필수이다.

 

이미지 최적화의 모범 사례

<img> 태그 사용하기

 

<img> 태그를 사용하는 경우

1. 브라우저에 의존하여 텍스트 크기에 맞게 이미지를 확장하고 렌더링할 때

2. 이미지가 SEO의 이점을 갖기를 원할 때

 

차세대 형식을 활용하기

이미지 최적화의 또 다른 좋은 방법은 뛰어난 압축 및 품질을 위해서 WebP와 같은 형식을 이용하는 것이다.

WebP 이미지는 JPEG나 PNG보다 파일 크기가 최소 25-30% 작다. 

WebP 이미지는 기존 형식에 비해서 로드 속도가 더 빠를 뿐 아니라 모바일 데이터를 적게 소모한다.

참고로 페이스북은 WebP 이미지로 전환하면 JPEG 의 경우 파일 크기가 25-35%, PNG의 경우 80% 감소한다는 사실을 발견했다.

 

alt text로 이미지의 접근성 높이기

 

alt description 이라고도 불리는 대체 텍스트는 기능과 모양에 대한 정보를 제공한다.

이는 사용자 경험을 개선할 뿐 아니라 사용자들이 콘텐츠에 접근하도록 돕는 데에도 중요하다.

구체적이고 잘 작성된 alt text는 이미지 순위를 상승시키고 웹사이트에 더 많은 사용자를 끌어들인다.

만약에 이미지 로드가 지연된다면 사용자들은 대체 텍스트들을 통해 어떤 이미지인지 알 수 있다.

 

srcset로 반응형 이미지 생성하기

고정된 크기의 이미지를 생성하는 대신에, srcset을 활용하여 반응형 이미지를 생성할 수 있다.

다양한 너비에 대해 다양한 그래픽 옵션과 함께 srcset 속성을 사용하면 사용자들의 단말기 화면 너비에 따라서 서로 다른 이미지를 제공할 수 있다.

x 대신에 w 단위를 사용하는 것이 좋다. x 단위는 픽셀의 밀도를 다루고 고정 크기의 이미지에 더 적합하다.

예를 들어, 위와 같은 코드를 작성하면 사용자의 해상도에 따라 올바른 이미지를 표시하라고 브라우저에게 알려준다.

 

sizes로 비율 조정 지원하기

브라우저는 첫 번째 로드에서 이미지를 미리 가져올 때 렌더링할 이미지의 크기를 알지 못한다.

<img> 태그에 sized 속성을 명시하지 않는 이상, 브라우저는 이미지가 페이지 전체 너비를 차지한다고 가정하게 되고 결국 지나치게 큰 이미지를 가져오게 된다. 

sizes 속성을 통해 이미지에 대한 특정 조건이 참일 경우에만 이미지가 차지할 너비를 가져오게끔 지정할 수 있다.

px로 이미지의 절대 너비를 제공하는 대신에, vw 단위를 사용하여 화면에 차지할 예상 비율을 지정할 수도 있다.

 

가로세로 비율 보존하기-auto

화면 크기에 따라 이미지 크기를 재조정할 때, 이미지의 가로세로 비율을 유지하는 것을 잊지 말아야 한다.

완전한 반응형으로 이미지를 최적화하지 않으면 예상치 못한 *레이아웃 시프트 현상이 발생할 수 있다.

레이아웃 시프트란, 느린 이미지 로딩으로 화면 레이아웃이 갑자기 변경되거나 밀리는 현상이다.

추가로 object-fit 속성을 활용해도 된다. 이 속성은 이미지가 페이지를 채우거나, 덮거나, 포함되거나, 축소되어야 하는지를 브라우저에 알릴 수 있다.

 

중요 이미지는 fetchPriority로 빠르게 로드하기

상단에 멋있는 로고나 이미지를 우선으로 가져오고 싶다면 이 속성을 사용하면 된다.

fetchpriority = "high" 를 사용하면 이 이미지를 우선적으로 처리해야 한다고 브라우저에 알려줄 수 있고 

브라우저는 다른 이미지에 자원을 즉시 소비할 필요가 없다고 인식하게 된다.

 

지연 로딩(lazy loading)과 async decoding 으로 성능 높이기

loading = "lazy" 를 사용하는 것은 브라우저가 viewport에 없는 이미지를 로드하는 데 귀중한 자원을 낭비하지 않도록 도와준다.

사용자들이 스크롤 하기 전까지 웹 페이지에 직접 보이지않는 모든 것은 우선 순위에서 밀려나고 이는 자원을 절약하고 현명하게 웹사이트의 성능을 향상시킬 수 있다. 

이 기능은 이미지가 페이지 하단에 위치하고 *LCP 이미지가 아닌 경우에만 적합하다.

 

 

LCP란, Large Contentful Paint로, 화면에서 가장 큰 요소이고 배너 이미지, 큰 히어로 이미지 같은 게 여기에 해당된다.

decoding="async"

이미지 decoding은 성능에 영향을 미치므로 화면 하단의 LCP 가 아닌 이미지에 대해 디코딩을 먼저 할 필요가 없도록 지정하면, 웹사이트 성능을 향상하고 페이지 로드 속도를 높이는 데 도움이 된다. 

 

 

이미지 최적화 자동화하기

Cloudinary

최종 사용자의 단말기 환경에 맞게 이미지 형식 및 성능 최적화를 자동화하는 이미지 컴포넌트가 있는 디지털 자산 관리자이다.

 

Next.js Image

Next.js는 빠르고 사용자 친화적인 웹사이트를 구축하도록 도와주는 리액트 프레임워크이다.

Next.js의 이미지 컴포넌트는 HTML <img> 태그를 확장한 것이다.

 

1. 최신 이미지 형식에 맞게 이미지 크기를 자동으로 재조정하고,

2. 자동으로 레이아웃 시프트를 방지하고,

3. 하단 이미지에 대한 지연 로딩(lazy loading) 을 진행하는 등의 이점이 있다.

 

Nuxt Image

Nuxt는 Vue.js를 위한 오픈 소스 프레임워크이다. 컴포넌트는 손쉽게 <img> 태그를 대체할 수 있다.

이미지 최적화를 위해 만들어 졌으며, Next와 동일한 역할을 한다.

 

 

 

느낀 점

디자인하는 친구의 졸전 사이트를 구현하면서 png를 한 페이지에서 엄청난 양을 로드해야 하는 경험을 해보고

코드와 import 는 점점 길어지고 화면 성능은 뚝뚝 떨어지는 게 보이고 나서야 이 로딩시간을 줄일 수는 없을까?

코드를 조금 더 효율적으로 관리할 수는 없을까? 고민하다가 정리해보게 되었다. 

찾아보니 이미지 최적화는 방법이 많으니 때에 맞게 잘 활용하면 될 것 같다 !

 

참고 블로그

https://velog.io/@sehyunny/the-definitive-guide-to-image-optimization