이미지 최적화

나는 image를
<img src={`${process.env.PUBLIC_URL}/path/img.png`} alt='' >
이렇게 사용했다.

process.env.PUBLIC_URL은 호스팅되는 웹 경로가 변경돼도
정적 파일의 경로를 하나하나 수정하지않아도 되기에
이렇게 불러와서 사용했고, alt은 잘 작성하지 않았다.

지금 진행하는 프로젝트에서 이미지 작업이 많아
문득 이미지를 어떻게 웹에 올리는 것이 최적의 방법인지 고민이 됐다.

1. 이미지 최적화란 무엇일까요?

좋은 품질의 이미지를 제공하면서, 가능한 가장 작은 크기를 유지하는 과정

2. 왜 필요한가?

이미지는 좋은 사용자 경험 제공을 위함이고, 이미지가 주인 웹사이트의 경우에는 최상의 이미지를 사용해야겠지요.

속도를 위해서 가벼운 이미지를 만들어 이미지를 구별할 수 없는 픽셀 덩어리로 만들겠다는 것이 아닙니다.

이미지 최적화의 이점

사용자 경험 향상 :
이미지 로드되기까지 기다릴래? 아니요.
어떤 상황에서든 사용자들이 가능한 적은 장애물을 거쳐 그들이 원하고 기대하는 작업을 마칠 수 있기를 원한다.
더 나은 페이지 성능 :
크고 최적화되지 않은 이미지는 페이지 로드를 지연시킨다. 웹이 빠를 수록 즐겁나요? 예
향상된 가시성:
SEO 이점도 있다. 최적화된 이미지는 검색 엔진에 맥락 정보를 제공하고 시각적 콘텐츠의 접근성을 높인다.
구글의 이미지 검색에서 이미지 검색 결과의 상단에 노출될 수 있도록 보장해준다.
페이지 로드가 빨라지면 검색 알고리즘이 페이지를 더 많이 노출해준다.

3. 이미지 최적화의 모범 사례

1) img 태그 사용

<img src='myimg.img'/>

2) 차세대 형식을 활용하기

<img src="image.jpg" /> x
<img src="image.png" /> x

<img src="image.webp" /> o
<img src="image.avif" /> o

webP 이미지는 jpeg이나 png보다 파일 크기가 최소 25~30% 작다.
기존 형식에 비해 로드속도가 더 빠를 뿐만 아니라 모바일 데이터를 적게 소모한다.
모든 웹 브라우저가 WebP를 지원하지는 않는다 <source>와 함께 <picture>태그를 사용하면,
이전 버전과 호환이 되어 모든 브라우저에 올바르게 최적화된 이미지 형식을 표시 할 수 있다.

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

<img src="image.webp" alt='hello'/>

나는 이부분을 작성을 잘 안했지만,

일반적으로 사용자 경험을 개선할 뿐만 아니라, 장애가 있는 사용자들이 콘텐츠에 접근하도록 돕는 데에도 중요하다.
만약 이미지 로드가 지연된다면, 사용자들은 대체 텍스트를 통해 어떤 이미지인지 알 수 있다.
배경 이미지에는 role 속성으로 "presentation" 값이 지정되어야한다.

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

<img src="image.webp"/> x

<img srcset="small.webp 500W, medium.webp 1000w, large.webp 2000w" src='large.webp'/> o

아이콘과 로고를 제외하고도 대부분의 이미지는 다양한 화면 크기에 맞게 크기를 조정해야 한다.
고정된 크기의 이미지를 생성하는 대신에, srcset을 활용하여 반응형 이미지를 생성할 수 있다.
x 대신에 w 단위를 사용하는 게 좋습니다. x 단위는 픽셀의 밀도를 다루고 고정 크기의 이미지에 더 적합하다.
반면 w 단위는 화면 너비에 따라 올바른 이미지를 가져오도록 해준다.
예를 들어, <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src=”...” alt=”...”>는
사용자의 해상도에 따라서 올바른 이미지를 표시하라고 브라우저에게 알려준다.

5) sizes로 비율 조정 지원하기

<img src="img-800w.webp">

<img srcset="small.webp 400w, 
large. webp 900w"
sizes=" (max-width: 400px) 95vw,
(max-width: 900px) 50vw"
src="large.webp" />

브라우저는 첫 번째 로드에서 이미지를 미리 가져올 때, 렌더링할 이미지의 크기를 알지 못한다.
sizes 속성은 이미지의 너비가 몇 픽셀인지 브라우저에 미리 알려주는 유용한 방법이다.
sizes 속성을 통해 이미지에 대한 특정 조건과 해당 조건이 참일 경우 이미지가 차지할 슬롯 너비를 지정할 수 있다
픽셀로 이미지의 절대 너비를 제공하는 대신에, vw 단위를 사용하여 화면에서 차지할 예상 비율을 지정할 수도 있다.

6) 가로세로 비율 보존하기

avatar {
height: auto; 
width: 200px;
｝

<img
class=" image"
src="img.webp"
height="200px"
width="200px"
/>

화면 크기에 따라 이미지 크기를 재조정할 때, 이미지의 가로세로 비율을 유지
완전한 반응형으로 이미지를 최적화하지 않으면 예상치 못한 *레이아웃 시프트 현상이 발생
HTML에서 이미지의 너비와 높이를 지정하고, 올바른 CSS와 결합한 뒤 CSS 높이를 "auto"로 설정해두면 쉽게 레이아웃 시프트 현상을 최소화 가능
CSS의 object-fit 속성을 활용해도 좋다. 이 속성을 사용하면 이미지가 페이지를 채우거나, 덮거나, 포함되거나, 축소되어야 하는지를 브라우저에 알릴 수 있다.

레이아웃 시프트 : 느린 이미지 로딩으로 화면 레이아웃이 갑자기 변경되거나 밀림 현상

6) 중요 이미지는 fetchpriority로 빠르게 로드하기

fetchpriority="high" 를 사용하면 이 이미지를 우선적으로 처리해야 한다고 브라우저에 알려줄 수 있고,
브라우저는 다른 이미지 (ex. 페이지 하단)에 자원을 즉시 소비할 필요가 없다.

<!-- x -->
<img src="img-lcp.webp" />
<img src=" img.webp" />

<!-- o -->
<img src="img-lcp.webp" fetchpriority="high" />
<img src="img.webp" />

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

largest contentful paint(LCP) :
웹 페이지의 성능을 측정하는 중요한 메트릭 중 하나
페이지가 로딩되는 동안 사용자에게 가장 큰 콘텐츠(예: 이미지, 비디오, 또는 텍스트 블록 등)가 화면에 표시되는 데 걸리는 시간을 측정

<img src="img-lcp.webp" />
<img src="img.webp" loading="lazy" decoding="async" />

loading="lazy"

뷰 포트에 없는 이미지를 로드하는 데 귀중한 자원을 낭비하지 않도록 도와준다.
사용자들이 스크롤 하기 전까지 웹 페이지에 직접적으로 보이지 않는 모든 것은 우선순위에서 밀려나며,
이는 자원을 절약하고 현명하게 사용하여 웹사이트의 성능을 향상할 수 있다.
이 기능은 이미지가 페이지 하단에 위치하고, LCP 이미지가 아닌 경우에만 적합하다.

decoding="async"

브라우저가 이미지를 로드하는 방법은 기본적으로 성능에 최적화되어있지 않다. 그러나, decoding="async" 를 사용하면 화면 하단 부분의 이미지에 대해 이 문제를 해결할 수 있다.
이미지 디코딩은 성능에 영향을 미치므로 화면 하단의 LCP가 아닌 이미지에 대해 디코딩을 먼저 할 필요가 없도록 지정하면, 웹사이트 성능을 향상하고 페이지 로드 속도를 높이는 데 도움이 된다.
또한, 이 이미지들에 대해 fetchpriority="low" 를 설정할 수도 있습니다.

참고 블로그 :

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

설레는 코딩데이☺