nodejs 서버 환경에서 webp 이미지 만들기, sharp 패키지

Last Modified : 2023-11-16 / Created : 2023-11-16

540
View Count

주소 복사하기

최근 SEO를 높이기 위한 방법으로 이미지 최적화가 중요하고 webp 이미지에 대하여 간략하게 포스팅했었습니다. 아직 못 보신 분들은 아래 글도 확인해보세요.

Webp 이미지 링크 바로가기 >
https://webisfree.com/2023-11-09/webp-이미지는-다른-이미지-확장자와-어떤-차이점이-있을까

Nodejs에서 webp 이미지 사용하기

웹이즈프리 역시 Python의 Pillow을 사용하였고 간단한 webp 생성 방법을 알아보았었는데요 ~ 오늘은 node.js 환경에서 webp 이미지를 사용하기 위한 방법으로 sharp 패키지를 사용하고 활용하는 방법을 알아보겠습니다.

왜 webp 이미지를 사용해야 하는가?

이지미는 jpg, png, gif, tiff 등등 여러 이미지 포맷들이 존재합니다. webp 이미지를 꼭 사용할 필요는 없지만 많은 곳에서 webp를 사용하는데요 ~ webp를 사용할 경우 아래와 같은 장점이 있습니다.

SEO 향상(트래픽 속도 향상)
네트워크 리소스 절약에 따른 비용 감소

실제로 많은 웹사이트의 트래픽 크기는 이미지 크기 및 사용 개수와 밀접한 관련이 있습니다. 텍스트와 비교했을 때 상대적으로 이미지 크기는 매우 크기 때문에 적절한 썸네일을 사용하거나 이미지 퀄리티 등을 조절하여 네트워크 트래픽을 조절해 사용됩니다. 이렇게 하면 방문자의 로딩 속도 역시 개선되고 결국 SEO인 검색 엔진 최적화 향상까지 기대가 가능하죠.

이런 이유로 Node.js 서버에서 WebP 이미지를 생성하고 사용하는 방법은 매우 효과적이고 유용한 방법입니다. 특히 이미지 최적화와 웹 성능 개선에 관심이 있는 개발자들에게 더더욱 유용하죠. 그럼 nodejs에서 webp 이미지를 생성하는 방법에 대하여 아래에서 알아봅니다.

! Node.js에서 WebP 이미지 생성하기

그렇다면 어떻게 하면 nodejs에서 webp 이미지를 생성할 수 있을까요? 몇 가지 방법들이 존재하겠지만 가장 간단한 방법은 node 패키지 중 하나인 sharp를 사용하는 방법입니다. sharp는 매우 유명한 nodejs 패키지 중 하나로 굉장히 높은 인기와 주당 다운로드 수를 가지고 있습니다. 믿고 사용할 수 있는 패키지입니다.

1. Sharp 패키지 사용 방법
이제 WebP 이미지 변환을 위해 `sharp` 라이브러리를 설치해야하겠죠. 먼저, `npm install sharp` 명령어로 sharp를 설치하도록 합니다.

$ npm install sharp

설치가 끝났다면 다음으로 webp로 변환하는 방법입니다.

2. webp 이미지 변환하기
만약 기존의 이미지가 존재하는 경우 이 역시 Sharp를 사용하여 기존 이미지를 WebP 포맷으로 변환할 수 있습니다. 아래 예제 코드를 확인해보세요.

이 코드는 prevImage.jpg라는 파일을 읽어들여 WebP 포맷으로 변환한 후 webpImage.webp라는 이름으로 파일을 저장합니다. 보시는 것처럼 매우 간단하게 사용이 가능합니다.

@ 에러 처리하기
만약 에러가 발생할 경우 위와 같이 err의 상태 값을 확인해 처리가 가능합니다. 여기서는 간단하게 err 메시지를 콘솔에 출력하고 있습니다. 에러인 경우에는 에러 메시지를 출력하고 성공한 경우에는 Success 메시지를 출력하게 됩니다.

if (err) {
console.error('Error:', err);
} else {
console.log('Success:', info);
}

이 외에도 다양한 Sharp를 사용하여 다양한 기능들이 많습니다. Sharp의 주요 기능들로 다음의 것들이 가능합니다.

@ Sharp로 사용 가능한 기능들은?

webp 등 다양한 이미지 형식으로 변환하기 (JPEG, PNG, WebP, AVIF, TIFF, GIF, SVG 등등)
이미지 크기 및 품질 조정하기(이미지 용량과 관련이 있어 중요함)
이미지 회전 및 반전 기능

주요한 몇 가지 기능을 확인했습니다. 이 외의 다양한 옵션들을 확인하기 위해서는 아래의 링크를 참고하세요.

관련 링크 바로가기 >
https://sharp.pixelplumbing.com

(궁금) WebP 이미지의 파일 크기 감소 정도는?

webp 사용의 가장 큰 목표는 압축률이라고 말 할 수 있으며 webp는 JPEG 등 다른 형식에 비해 우수한 압축 기능을 제공합니다. 용량의 경우 이미지의 내용, 원본 크기, 압축 설정에 따라 달라지지만, 일반적으로 WebP 이미지는 JPEG 이미지보다 크기가 상당히 작습니다.

알려진 바에 따르면 손실과 무손실로 구분하여 손실 압축의 경우 대략적으로 25 ~ 35% 정도 더 작은 크기를 가진다고 합니다. 무손실인 경우에도 약 15% 이상 더 작아질 수 있다고 하니 webp를 사용하면 그 장점이 매우 크다고 하겠습니다. 물론 실제 압축률은 이미지 내용, 사용한 압축 설정에 따라 크게 달라질 수 있는 점 알아두시기 바랍니다.