[CS 스터디]이미지 최적화로 웹 성능 향상하기

Yewon Jeong·2023년 5월 28일

CS 스터디

목록 보기

5/19

웹 사이트에서 이미지 최적화란 사용자 참여도를 높이기 위해 최적의 형식, 크기, 해상도로 된 고품질 비주얼을 사용함으로써 **빠른 콘텐츠 로딩을 지원하는 것을 의미한다.

background-image 피하기

HTML <img> 태그와 CSS background-image 속성은 모두 시각적 콘텐츠를 표시하는 비슷한 결과를 보여주나, 이들은 동일하지 않다.
<img>태그를 사용하면 사용자들이 이미지를 소비하는 방식을 좀 더 제어할 수 있다. <img> 태그는 특히 아래와 같은 상황에 적절하다.

이미지가 장식의 역할을 할 뿐만 아니라 콘텐츠의 일부일 때
사용자가 페이지를 인쇄할 수 있고, 당신도 이미지가 인쇄되기를 원할 때
경고 아이콘과 같이 이미지에 중요한 의미가 있고, 이러한 맥락이 스크린 리더와 같은 보조 기구에 잘 전달되기를 원할 때
이미지가 SEO의 이점을 갖길 원할 때. 구글은 배경 이미지를 자동으로 인덱싱하지 않는다.
브라우저에 의존하여 텍스트 크기에 맞게 이미지를 확장하고 렌더링 할 때

또한 <img>태그는 srcset이나 sizes와 같은 유용한 최적화 속성을 제공함으로써 더 빠른 페이지 로드를 도와준다.

적절한 이미지 타입 선택

웹에서 주로 사용하는 이미지 포맷

이미지 최적화를 위해서 적절한 이미지 포맷을 선택할 필요가 있다. 웹에서는 주로 사용하는 이미지 포맷으로 PNG,JPEG,GIF,WebP,SVG가 있다. 이미지 포맷은 어떻게 렌더링이 되느냐, 이미지 손실을 어느정도 허용하는지 등에 따라 분류 될 수 있다.

Raster Image vs Vector Image

Raster Image(BitMap Image) : Pixel로 구성된 이미지를 의미한다. Pixel은 이미지를 구성하는 가장 작은 단위로, 각각의 픽셀은 빛의 3원색인 빨강색(R), 녹색(G), 파란색(B) 단일 색상을 나타내는 서브 픽셀들로 이루어져 있다. 사이즈가 크거나 해상도가 더 좋은 이미지를 만들기 위해서는 그 만큼 픽셀의 수가 추가되어야 하기 때문이 이미지의 용량이 늘어나게 되고 렌더링 속도가 떨어지게 된다. 대표적으로 JPEG, PNG, GIF,WebP 포맷이 있다.
Vector Image : 벡터 이미지는 기하학적 형태, 선, 곡선, 다각형,색상 등을 수학적인 방식으로 표현하는 이미지 형식이다. 픽셀 단위가 아닌 수학적인 방식으로 이미지를 구성하며, 이러한 특성으로 인해 이미지를 확대 또는 축소해도 깨지지 않고 선명하게 유지된다. 이미지가 복잡해질 경우 이미지 안에 수학적인 정보가 늘어가 이미지 용량이 커진다. 대표적으로 SVG가 있다.

무손실 이미지와 손실 이미지

이미지의 정보 손실을 허용하는지의 안 하는지의 여부에 따라 이미지를 분류 할 수 있다.

무손실 이미지: GIF,PNG가 대표적인 무손실 이미지이다.
손실 이미지: 화질 감소를 감수하면서도 사이즈를 줄여 빠른 렌더링을 할 수 있는 이미지이다. 일반적으로사람이 품질 저하를 거의 눈치채지 못하면서 품질을 낮출 수 있는 퍼센트는 100%~75% 사이라고 한다. 손실 이미지의 사용은 무손실 이미지보다 상대적으로 빠른 렌더링이 가능하므로 사용자에게 꼭 필요한 정보를 주는 이미지가 아닌 경우 사용되는 이미지다. JPEG가 가장 대표적인 손실 이미지이다.

이미지 선택

이미지 렌더링 속도는 이미지 용량에 비례한다. 따라서 화질이 중요한 배너 이미지나 메인 이미지는 좀 더 손실이 적은 이미지로, 화질이 상관없는 이미지는 손실률이 높지만, 용량이 작은 이미지로 선택을 고려해야한다.

차세대 이미지 포맷

WebP

WebP는 Google이 개발한 이미지 파일 형식이다.인터넷을 염두에 두고 설계되었다. VP8이라는 비디오 코덱 기술을 기반으로 한 영상압축 방식을 사용하며 파일크기를 25%~35%정도로 압축을 할 수 있는 이미지 포맷이다.(손실 압축 및 무손실 압축 두 가지 모드로 제공) WebP 이미지는 기존 형식에 비해 로드 속도가 더 빠를 뿐만 아니라 모바일 데이터를 적게 소모한다.

WebP는 웹의 이미지에 대해 우수한 무손실 및 손실 압축을 제공하는 최신 이미지 형식 입니다. WebP 무손실 이미지는 PNG에 비해 크기가 26% 더 작습니다 . WebP 손실 이미지는 동등한 SSIM 품질 지수 에서 비교 가능한 JPEG 이미지보다 25–34% 더 작습니다 . — 구글

대부분의 웹 브라우저에서 WebP 포맷을 지원하지만 Internet Explorer와 같은 일부 브라우저는 여전히 WebP 파일을 지원하는 데 어려움이 있을 수 있다. 그러나 <source>와 함께 <picture> 태그를 사용하면, 이전 버전과 호환이 되어 모든 브라우저에서 올바르게 최적화된 이미지 형식을 표시할 수 있다.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Image">
</picture>

추가로, webp 와 같이 뛰어난 압축률과 높은 품질을 보여주는 AVIF 포맷이 있는데, webp보다 범용성이 낮다.(브라우저 지원율이 낮다.)

브라우저 사이즈에 맞춰 적절한 이미지 제공

이미지를 다양한 사이즈에 대응할 수 있도록 적절한 브레이크 포인트를 설정하여 사이즈를 조절해준다. 데스크톱 이미지는 모바일의 이미지보다 상대적으로 용량이 크기 때문에 사용자는 필요 이상의 이미지를 다운받게 되어 리소스가 낭비될 수 있다.

img태그 속성을 활용해 반응형 이미지 크기 조절

<img 
 src="default.webp" 
 srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1024w" 
 sizes="(max-width: 768px) 480px, (max-width: 1024px) 768px, 1024px" 
 alt="Image"
 >

w 단위의 유용한 점은 크기와 해상도를 모두 고려한다는 것이다. 따라서 이미지가 현재 2배 픽셀 밀도의 장치에 200px 너비로 표시되어 있으면 브라우저는 400w 이미지(즉, 400px 너비이므로 2배 픽셀 밀도에서 완벽하게 표시)를 잡을 수 있다. 마찬가지로 1배 픽셀 밀도 이미지에서는 200w의 이미지가 잡힌다.

즉, 이미지가 렌더링되면 브라우저는 실제 디스플레이 크기를 알고 픽셀 밀도를 곱하여 srcset에서 가능한 가장 가까운 크기의 이미지를 가져온다.

추가적으로 sizes 속성을 통해 화면 크기에 따른 이미지 크기 지정도 필요하다.

picture 태그를 활용해 반응형 이미지 크기 조절

<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>

CLS(누적 레이아웃 변경) 개선

CLS:
사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도

이 문제는 이미지 다운로드 전에 이미지의 정확한 크기를 지정하지 않은 상태에서 이미지가 로드될 때 발생

이 문제를 해결하기 위한 방법 -> 브라우저에게 이미지의 공간을 미리 알려준다.
1. width와 height 속성을 지정

<img width="500" height="300" style="height: auto" ... />

aspect-ratio를 통해 가로대 세로의 비율을 알려준다.

<img style="aspect-ratio: 5 / 3; width: 100%" ...>

Lazy Loading

화면 밖에 있는 이미지들을 지연 로딩하여 우선 최대한 사용자가 보이는 부분부터 로드되도록 처리한다.

<img loading="lazy">

위와 같이 사용하여 태그 자체에서 지원하는 레이지 로딩을 사용하는 방법이 있고

<img src="1px.gif" data-src="book.jpg" onload="loadReal(this)"/>

function loadReal(img) {
	if(img.style.display != "none"){
		img.onload = null;
		img.src = img.getAttribute("data-src")
	}
}

자바스크립트를 활용하여 위와 같이 활용하는 방법이 있습니다. img 태그에서 지원하는 loading의 경우에는 아직 비표준이므로, 자바스크립트를 이용한 방법이 권장된다.

IntersectionObserver API 사용

IntersectionObserver 객체를 생성한 후 해당 observer가 이미지 요소를 감시하게끔 한다. 감시하고 있는 이미지 요소가 화면안에 들어왔을때 해당 이미지를 로드하는 기법이다.

<!-- HTML 코드 -->
<img class="lazy-image" data-src="image.jpg" alt="Lazy-loaded Image">

<script>
  // Intersection Observer 객체 생성
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 이미지가 화면에 들어오면 실제 이미지 소스로 로드
        const lazyImage = entry.target;
        lazyImage.src = lazyImage.dataset.src;

        // 이미지 로드 후 Observer 관찰 해제
        observer.unobserve(lazyImage);
      }
    });
  });

  // 모든 이미지에 대해 Observer 관찰 시작
  const lazyImages = document.querySelectorAll('.lazy-image');
  lazyImages.forEach(image => observer.observe(image));
</script>

Pre Loading

pre loading=>기존에 로드되는 시점을 미리 앞당기는 기법
ex.) 마우스 커서를 버튼에 hover시켰을때 이벤트를 감지하여 데이터 프리로드.

Image CDN 사용

CDN이란
일반적으로 웹 사이트의 컨텐츠(이미지, CSS, JavaScript 파일 등)는 원본 서버에서 전 세계의 사용자에게 직접 전송된다. 그러나 웹 사이트에 접속하는 사용자의 지리적 위치에 따라 원본 서버와의 거리가 멀어질 수 있고, 이로 인해 컨텐츠의 로딩 속도가 느려질 수 있다.
CDN은 이러한 문제를 해결하기 위해 원본 서버와 가까운 위치에 위치한 여러 개의 서버(엣지 서버 또는 캐시 서버)를 사용하여 컨텐츠를 전송된다.
사용자가 웹 사이트에 접속하면 CDN은 사용자와 가장 가까운 서버에서 컨텐츠를 제공하므로 로딩 속도가 향상된다.

Image CDN => 이미지 제공에 특화된 CDN => 사이즈를 줄이거나 포멧을 바꾸는 처리과정이 들어갈 수 있음.(jpg 이미지를 webp로 제공 )