📌 포스팅을 시작하며
이전에 노션에 정리해두었던, 성능 관련 정리글을 블로그에 기록하고자 한다.
📷 이미지 성능
이미지는 대개 웹에서 가장 무겁고 가장 보편적인 리소스
이미지를 최적화하면 웹사이트 실적을 크게 개선할 수도 있음.
이미지를 최적화할 시
→ 더 적은 바이트를 전송하여 네트워크 시간이 단축되고, 사용자 기기에 적절한 크기의 이미지를 제공하여 사용자에게 전송되는 바이트 양이 단축됨.
이미지를 페이지에 추가하는 방법
<img><picture>- CSS background-image 속성
SVG를 언제 사용해야하는지
→ SVG는 벡터 이미지 형식 이므로 이미지 콘텐츠가 라인아트, 다이어그램, 차트인 경우 그 밖에 세부적인 사진 디테일이 없는 경우 가장 유용하다.
→ 웹사이트에서 SVG 이미지를 사용하는 경우 SVG 형식은 텍스트 기반이므로 축소 및 압축과 같은 기술이 적용된다. Nods.js 기반 SVG 최적화 도구인 svgo를 사용하여 손실 있는 최적화가 가능하다.
이미지 크기
첫번째 최적화
→ 이미지를 올바른 크기로 표시하는 것
500 x 500 이미지라면 2DPR 로 1000 x 1000 의 크기의 이미지가 필요
srcset
지정된 각 이미지 소스에는 이미지 URL과 너비 도는 픽셀 밀도 설명자가 포함
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>위의 HTML 스니펫은 픽셀 밀도 설명어를 사용
DPR1 → image-500.png 을 사용
DPR2 → image-1000.jpg 을 사용
이런식으로 브라우저에게 힌트를 제공한다.
sizes
이전 솔루션은 모든 표시 영역에서 동일한 CSS픽셀 크기로 이미지를 표시하는 경우에만 작동
대부분의 경우 페이지의 레이아웃과 컨테이너의 크기는 사용자 기기에 따라 변한다.
size 속성을 사용하면 소스 크기 집합을 지정
각 소스 크기는 미디어 조건과 값으로 구성된다.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
여기에서 size의 100vw는 이미지의 고유 넓이를 의미
이 경우 기기의 표시 영역 너비가 min-width가 768px을 초과하면 500px로 표시
더 작은 기기에서는 100vw로 표시
** 참고: srcset 너비 설명어는 sizes 속성이 없으면 작동하지 않습니다. 마찬가지로 srcset 너비 설명어를 생략하면 sizes 속성이 아무런 작업을 하지 않습니다.
파일 형식
- . WebP 및 AVIF와 같은 최신 이미지 형식은 png, jpeg 보다 압축률이 높아 이미지 파일 크기가 작아져 다운로드 시간이 덜 걸릴 수 있다. 리소스의 로드 시간이 단축할 수 있어, 최대 콘텐츠 시간 (LCP) 가 낮아질 수 있다.
압축
이미지와 관련하여 두 가지 유형의 압축이 있다.
-
손실 압축
양자화를 통해 이미지 정확성을 떨어뜨리는 방식
노이즈와 색상이 많은 고밀도 이미지에 가장 효과적 -
무손실 압축
데이터 손실 없이 이미지를 압축하여 파일 크기를 줄인다.
요소
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img
alt="An image"
width="500"
height="500"
src="/image.jpg"
>
</picture><picture> 요소 내에서 <source> 요소를 사용하는 경우 AVIF 및 WebP 이미지 지원을 추가할 수 있지만, 브라우저에서 최신 형식을 지원하지 않으면 더 호환되는 기존이미지 형식으로 대체된다.
HTML 스니펫에서 AVIF 형식은 WebP 형식보다 우선순위가 높으며, AVIF 또는 WebP가 모두 지원되지 않으면 JPEG 형식으로 대체
<picture> 요소에는 내부에 중첩된 <img> 요소가 필요하다.
<source> 요소는 media, srcset, sizes 속성도 지원
<picture>
<source
media="(min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>media 속성은 미디어 조건
: DPR이 1.5 이상인 기기는 첫 번째 <source> 요소를 사용한다.
지연 로드
loading 속성을 사용하여 이미지가 표시 영역에 나타날 때 이미지가
지연 로드되도록 브라우저에 지시할 수 있다.
lazy 는 이미지가 표시 영역에 있거나 근처에 있을 때까지 이미지를 다운로드 하지 않도록 브라우저에 지시한다.
이렇게 하면 대역폭이 절약 되므로 브라우저가 이미 표시 영역에 있는 중요한 콘텐츠를 렌더링 하는데 필요한 리소스의 우선순위를 지정할 수 있다.
decoding
decoding 이미지를 디코딩하는 방법을 브라우저에 알린다.
async 값은 이미지를 비동기식으로 디코딩 할 수 있음을 브라우저에 알려 다른 콘텐츠를 렌더링 하는 데 걸리는 시간을 개선할 수 있다.
sync 은 이미지가 다른 콘텐츠와 동시에 표시되어야 함을 브라우저에 알린다.
기본 값 auto 를 사용하면 브라우저에서 사용자에게 가장 적합한 값을 결정 할 수 있다.
