이미지를 무료로 WebP포맷으로 변환해 블로그 최적화 하는 방법

$install cwebp

내 이미지를 Online WebP 변환 사이트에 올리지 않고 내 컴퓨터에서 무료로 WebP로 변환하고, 블로그를 최적화하는 방법에 대해서 알아보겠습니다. 구글 SEO(Search Engine Optimization)에서 권장하는 이미지 포맷으로 WebP가 있습니다. jpg, png 보다 속도가 빠르고, 차세대 포맷으로 꽤 오랫동안 사용했습니다. 실제로 내 게시글의 속도를 측정해 보면 jpg, png 보다 훨씬 빠르기 때문에 구글 서치 엔진에서 내 게시글이 상위 노출 될 가능성이 커집니다. 

 

블로그를 운영하면서 검색 결과 상위 노출은 블로그 성장 및 수익적인 요소에서 가장 중요한 항목인데요. 상위 노출을 시키기 위해서 많은 방법들이 있지만 이 글에서는 페이지의 로딩 속도에 대해서 알아보려고 합니다.

 

일반적으로 블로그를 운영하시는 분들이라면 사진을 첨부 할 때 직접 찍은 사진이나, 무료 이미지를 사용하게 되면 90% 이상이 jpg, png에 해당될 것입니다. jpg와 png는 정말 오랫동안 사용되고 있는 이미지 포맷이고 아직까지 널리 사용되고 있어요.

png파일은 해상도에 따라 용량이 커지게되고, jpg 역시 압축을 통해 png보다 용량이 줄어든다고는 하나 화질이 저하되는 단점이 있습니다. 어쨌든 사진크기, 퀄리티에 따라 용량이 커지는 파일이 웹페이지에 많을수록 페이지를 로딩하는데 시간이 오래 소요되고, 이는 구글 SEO에서 감점되는 사항입니다.

 

따라서 블로그 글을 쓸 때는 필요한 이미지만 사용하거나 불가피할 경우 WebP 또는 AVIF 와 같은 파일 포맷을 사용하는 걸 추천드립니다.

 

WebP(웹피)란?

• WebP(Web + Picture) 웹피 라고 불리며 jpg, png, gif 이미지 포맷을 대체하기 위해 구글에서 개발되었습니다.
• 가장 큰 장점으로는 기존의 이미지 포맷보다 파일 크기가 더 작습니다.
• jpg는 기존대비 25~34%, png는 비손실의 경우 평균 26%(손실의 경우 60~70%) 정도 기존 파일보다 크기가 작습니다.
• 움짤(gif)의 경우 동일한 화질의 WebP로 변경하게되면 크기가 절반 이하로 감소합니다.

 

 

WebP로 변환하는 방법

WebP로 변환에 대해서 구글에 검색하게되면 수많은 online 변환 사이트들이 나옵니다. 이는 내 이미지파일(jpg, png)을 웹페이지를 운영하는 서버에 올리게 되고, 변환된 WebP파일을 다운로드하는 방식입니다.

내 이미지를 타인이 관리하는 서버에 올린다는건 나쁜 방식으로 악용될 가능성이 충분하므로 지양하는 것이 좋습니다. 개인정보가 포함되지 않은 의미 없는 사진들의 경우 상관이 없겠지만, 내 얼굴, 지문, 보안카드, 집주소, 핸드폰번호 등이 나도 모르게 유출될 가능성이 있습니다. 요즘은 사진의 메타데이터에 위치, 시간, 인물정보가 포함되는 경우가 있어 더욱 조심해야 합니다.

 

Mac 사용자 중 간단하게 WebP로 변환 할 수 있도록 설정하는 방법을 소개합니다

 

1. cwebp 설치

$ which cwebp
/opt/homebrew/bin/cwebp

터미널을 열고 which cwebp 명령어를 입력하면

다음과 같이 cwebp 경로가 나오면 이미 설치되어 있다는겁니다.

만약 설치되어 있지 않다면 다음과 같이 homebrew를 이용해서 설치해 줍니다.

$brew install webp

 

2. cwebp 사용법

cwebp를 설치 후 사용하는 방법을 확인해 봅니다.

$ cwebp
Usage:

   cwebp [options] -q quality input.png -o output.webp

where quality is between 0 (poor) to 100 (very good).
Typical value is around 80.

Try -longhelp for an exhaustive list of advanced options.

 

cwebp [options] -q quality input.png -o output.webp

위와 같이 명령어를 통해 output.webp로 변환할 수 있습니다.

하지만 매번 이런 식으로 명령어를 작성하는 건 귀찮음을 넘어서 불가능한 일입니다.

이를 더 편하게 만들어 봅니다.

 

3. 편의성 높이기

대부분 mac 사용자들은 초기 세팅 할 때 oh-my-zsh를 설치했을 겁니다. 이 편의성을 위해 굳이 설치할 필요는 없지만 zsh가 설치되어 있지 않더라도 충분히 설정 가능합니다.

 

먼저 쉘스크립트 환경 변수를 설정해 줄 텐데

일반 zsh라면 ~/.zsh_profile

bash라면 ~/.bash_profile

oh-my-zsh라면 ~/.zshrc

에 추가해 줍니다.

 

$ open ~/.zsh_profile

$ open ~/.bash_profile

$ open ~/.zshrc

위와 같이 파일을 열어주고

아무 곳에나  export PATH=$PATH:/usr/local/bin 를 추가해 줍니다

 

여기까지 설정하셨다면 거의 다 끝났습니다.

 

cmd+space로 spotlight 검색을 열고, automator를 검색해 줍니다.

그리고 다음 사진과 똑같이 설정해 줍니다.

유틸리티 > 셀 스크립트 실행 

• 현재 수신하는 작업흐름 - 이미지 파일 선택
• 선택 항목 위치 - Finder
• 이미지 - 동작
• 색상 - 원하는 대로
• 셀 스크립트 실행 > 셀 - /bin/zsh (bash라면 /bin/bash)
• 셀 스크립트 실행 > 통과 입력 - 인수

 

그리고 기본적으로는 아래 텍스트 입력란이 공란일 텐데 다음 소스를 붙여 넣기 해줍니다.

source ~/.zshrc
for FILE in "$@"
do
 echo "filename: $FILE"
 EXT=${FILE##*.}
 QUALITY=50 # quality (0-100)
 cwebp -q $QUALITY "$FILE" -o "${FILE/%.$EXT/.webp}"
done

 

여기서 source ~/.zshrc 의 내용은 위에서 환경변수 설정해 준 파일명입니다.

모두 기입 후 cmd + s를 입력해 저장해 줍니다.

 

그리고 finder에서 변환하고 싶은 파일을 선택 후 우클릭 해서 변환해 줍니다.(여러 장도 가능)

 

 

위와 같이 변환 가능합니다.

 

결론

이렇게 사용한다면 내 이미지를 보호하고, 빠르게 변환할 수 있습니다.

한번 설정해 두면 보통 문제 생기기 전까지는 사용하기 때문에 미리 설정해 두고 사용하시길 바랍니다.

블로그 글 쓰실 때 webp로 이미지를 첨부해서 로딩 속도를 올리시길 바랍니다.

 

이상입니다.