이미지 최적화 해보기

Jieunmoon·2023년 11월 27일

🔎문제발생

이번 많은 양의 이미지를 다루는 사이트인 이커머스 프로젝트를 완성 후 추후 수정사항에서 swiper 이미지를 교체 및 테스트용 이미지를 넣어보았는데 크기도 어마무시한 것을 넣어버렸고...파일크기도 엄청 큰것이였다. lighthouse에서 이러한 이미지들을 성능부분에서 문제가 있다고 알려주었고 이미지 최적화를 공부하게 되었다.

✨이미지 최적화란?

이미지 파일을 최대한 작게 만들어서 웹 페이지 또는 애플리케이션의 성능을 향상시킵니다. 이미지 최적화를 통해 웹 페이지의 로딩 속도를 개선하고 대역폭을 절약할 수 있습니다. 주요 목표는 이미지의 품질을 유지하면서 파일 크기를 최소화하는 것입니다.

이미지 최적화 이점

이미지의 빠른 로딩은 사용자들에게 더 즉각적이고 유익한 경험을 제공합니다.
최적화된 이미지는 파일 크기가 작아져서 웹 페이지의 로딩 속도가 빨라집니다. 빠른 로딩은 사용자 경험을 향상시키고, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.

다양한 이미지 최적화 방법

background-image ❌ `<img>` 태그 사용하기 ✅

<img> 태그와 CSS의 background-image 속성은 모두 이미지를 표시하는데 사용되지만, 몇 가지 차이점이 있습니다.

background-image

{slideData.map((image, index)=> (
	<CustomSwiperSlide key={index} style={{backgroundImage: `url(${image})`}} />
)}

<img>태그 사용
<img> 태그를 사용하면 사용자들이 이미지를 소비하는 방식을 좀 더 제어할 수 있습니다.
<img> 태그는 srcset이나 sizes와 같은 유용한 최적화 속성을 제공함으로써 더 빠른 페이지 로드를 도와줍니다.

     {slideData.map((image, index) => (
          <S.CustomSwiperSlide key={index}>
            <picture>
              <source srcSet={image.srcWebp} type="image/webp" />
              <img
                src={image.srcPng}
                alt={`EventBanner-${index + 1}`}
                style={{ width: '100%', aspectRatio: '16/9' }}
                loading="lazy"
              />
            </picture>
          </S.CustomSwiperSlide>
        ))}

차세대 이미지 형식 사용하기

이미지 최적화의 또 다른 좋은 방법은 뛰어난 압축 및 품질을 위해 WebP와 같은 차세대 형식을 이용하는 것입니다. WebP 이미지는 JPEG이나 PNG보다 파일 크기가 최소 25~30% 작습니다. WebP 이미지는 기존 형식에 비해 로드 속도가 더 빠를 뿐만 아니라 모바일 데이터를 적게 소모합니다.

Webp란?

Google에서 개발한 오픈 소스 이미지 포맷입니다. WebP는 이미지를 웹에서 빠르게 로딩하고 더 효과적으로 압축하기 위한 목적으로 설계되었습니다. 주로 웹 페이지의 성능을 개선하고 대역폭을 절약하기 위해 사용됩니다.
브라우저 호환성: 대부분의 주요 브라우저에서 WebP 이미지를 지원합니다. Google Chrome, Mozilla Firefox, Microsoft Edge, Opera 등에서 지원되고 있습니다.

최근 모든 브라우저에서 사용할 수 있어 호환성을 걱정할 필요는 없지만 되지않는 경우에는
<source>와 함께 <picture> 태그를 사용하면, 이전 버전과 호환이 되어 모든 브라우저에서 올바르게 최적화된 이미지 형식을 표시할 수 있습니다.

<picture>태그에 대한 자세한 설명
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

지연 로딩(lazy loading)

loading='lazy'속성을 이미지 태그에 추가하면 브라우저는 해당 이미지를 지연 로딩(lazy loading)합니다. 이는 웹 페이지의 성능을 향상시키고 사용자 경험을 개선하는 데 도움이 됩니다.
이미지는 뷰포트(화면에 보이는 영역)에 진입하는 시점에서 로딩됩니다.
사용자가 스크롤하여 이미지가 뷰포트에 표시되기 직전까지 이미지 리소스를 요청하지 않아 네트워크 대역폭을 효과적으로 관리할 수 있습니다.

lazy loading 사용한다면 width, height 꼭 지정해주어야 한다고합니다.
inline으로 설정해주거나 inline 스타일에서 직접 값을 정의해야하며 이것을 해주지 않으면 로딩이 되고 나서 레이아웃이 발생하게 되며 빈번한 레이아웃은 로딩을 느리게 만듭니다.