webp 이미지 처리

2023년 6월 26일 · 약 6분

Cook-Book 많이 만듭니다

그냥 vite으로 만든 react에서 webp로 이미지를 처리하는 방법입니다.

이미지처리할 때 제일 좋은 것은 처음부터 Next.js, Remix.js, Astor.js 같은 메타 프레임워크가 알아서 처리 해주는 것입니다. 굳이 고생할 이유가 없고 나중에 필요해지면 공부해도 늦지 않다고 보는 나쁜 개발자입니다.

하지만 당신의 프로덕트가 그냥 React.js이고 메타 프레임워크로 전환이 어려울 경우 활용해볼 수 있는 전략들입니다.

랜딩페이지 히어로

히어로 섹션이란 무엇인가? 보통 사이트 방문하면 처음 보이는 섹션입니다. 저는 UX/UI 디자이너였기 때문에 뭔지 압니다. 마케터, PM, 디자이너 모두 알고 있는 개념입니다. 너무 어렵게 생각할 필요는 없습니다.

높은 확률로 프로덕트를 소개하는 랜딩 페이지는 히어로 섹션이라는 영역이 있습니다. 고객이 처음보고 다음 다음 퍼널 전환점입니다. 고객을 사로잡기 위한 아트워크(이미지, 일러스트, 사진 등...)를 배치합니다. 높은 확률로 디자이너가 신경쓰고 만든 이미지입니다. 보정 많이 넣고 수고가 많은 이미지입니다. 기본적으로 변형은 디자이너의 몫입니다. 하지만 만약에 변형을 해야 한다면 개발자는 이 이미지를 최대한 무손실 압축을 하는 방향으로 변형해야 합니다.

이미지를 무손실에 가깝고 저용량으로 전달하는 전략은 webp입니다. 그리고 webp는 생각보다 지원하는 범위가 넓습니다.

WebP 이미지 사용

webp 변환

변환 작업을 위해 homebrew를 활용해 cwebp를 설치했습니다.

brew install webp

위가 설치명령입니다. 절대 친절하게 알려주지 않습니다.

물론 저렇게 설치하면 터미널 자동완성 지원을 받을 수 없습니다.

cwebp -version

설치여부를 확인하게 버전확인 명령을 해봅시다. 나오면 성공입니다.

cwebp images/flower.jpg -o images/flower.webp

위 명령으로 이미지를 webp로 만들 수 있습니다.

webp 적용

webp는 picture에 source 태그에 사용할 것을 권장합니다.

img 태그 함정

약간의 함정이 있습니다. 개발자 도구를 보면 계속 jpg만 보이고 webp는 안 보여서 뭐 잘못했나? 이런 생각이 들 수 있습니다. 이럴 때 이미지 다운로드 시도를 하도록 합니다. 이미지를 다운받으면 webp입니다.

// ... 생략
import { PictureContainer } from './Landing.style';
import flashCardJPG from '/pexels-pixabay-268351_1920.jpg';
import flashCardWEBP from '/pexels-pixabay-268351_1920.webp';

function Landing() {
  // ... 생략
  return (
    <div>
      {/* ... 생략 */}
      <picture>
        <source
          type="image/webp"
          media="all and (min-width: 1320px)"
          src={flashCardWEBP}
          srcSet={flashCardWEBP}
        />
        <source
          type="image/jpeg"
          media="all and (min-width: 1320px)"
          src={flashCardJPG}
          srcSet={flashCardJPG}
        />
        <img srcSet={flashCardJPG} alt="flash card picture" loading="lazy" />
      </picture>
    </div>
  );
}
export default Landing;