이미지를 최적화하는 방법, WEBP 사용하기

최종 업데이트일 : 2022-07-29 꿀뷰 내용이 업데이트 되었습니다!

WEBP란 무엇인가?

webp는 구글이 웹페이지 로딩 속도를 높이기 위해 개발한 이미지 포맷이다. 이미지 품질은 유지하면서 파일크기를 더 작게 만들 수 있는 무손실 압축 확장자이다. 따라서 webp 파일을 이용하면 홈페이지의 성능을 향상해 속도를 더 빠르게 만들 수 있다. 따라서 요리나 여행과 같은 많은 사진을 필요로 하는 웹사이트의 경우 유용하게 사용할 수 있다.

 

GIF, PNG, JPE 세 가지 포맷을 전부 WEBP로 대체할 수 있으며, PNG, JPEG에 비해 용량은 작지만 보다 선명하고 고품질의 이미지로 저장할 수 있다.

 

JPEG/PNG/WEBP 비교

JPEG/JPG

사진 등 일반적으로 많이 사용하는 손실 압축 확장자이다. PNG와 WEBP에 비해 과도한 결정과 그라디언트가 있는 크고 복잡한 이미지에 적절하게 사용할 수 있다. 그러나 손실 압축 방식이기 때문에 사진을 보정하고 다시 저장하게 되면 품질이 저하된다.

 

PNG에 비해 작은 용량의 크기로 사진을 압축할 수 있지만 WEBP와 비교했을 때 화질면에서 크게 떨어진다.

 

PNG

무손실 압축을 돕는 래스터 그래픽 형식이며, GIF 형식의 대안으로 개발되었다. PNG 파일은 압축한 이후나 다시 열어 저장할 때 손실 없이 유지된다. 로고나 텍스트가 많은 이미지와 같은 픽셀이 많은 이미지에 사용된다. 그러나 사진에는 적합하지 않다.

 

WEBP

JPEG와 PNG, 두 형식의 장점만을 통합한 하이브리드 형식이라고 할 수 있다. JPEG와 같은 화질이여도 WEBP의 경우 훨씬 더 작은 용량으로 이미지를 저장할 수 있다.

 

 

webp의 장점, 왜 webp를 써야할까?

이미지 최적화

JPG, PNG, GIF 보다 크기는 작지만 이미지 품질은 동일하게 유지할 수 있다. 이미지 압축 시 손상이 거의 발생하지 않기 때문이다. 결과적으로 이미지 압축은 웹사이트 속도를 증가시킬 수 있고, 웹사이트 속도 증가는 사용자 경험이 향상된다. 이러한 이유를 포함해 구글 역시 WEBP 사용을 권장하기 때문에 검색 엔진 순위에도 영향을 줄 수 있다.

 

서버 공간 절약

의외로 이미지는 서버에서 많은 공간을 차지한다. WEBP를 사용하게 되면 JPG, PNG, GIF과 품질은 같아도 크기가 작기 때문에 서버 용량을 절약할 수 있다. 구글 자체 데이터에 따르면 WEBP 압축은 PNG 파일보다 26% 작은 크기이며, JPEG보다 25~34% 작은 크기이다. 

 

홈페이지 속도 최적화

좋은 홈페이지를 만들려면 홈페이지 속도가 매우 중요하다. webp 파일은 JPG, PNG, GIF 대비 평균 30%의 이미지 크기를 줄여주기 때문에 홈페이지가 로딩되는 시간을 단축시켜 준다. 기존의 이미지를 webp 파일로 변경할 시, 이미지를 대량으로 사용해야 하는 홈페이지 또는 모바일에 긍정적인 영향을 줄 수 있다.

 

webp를 사용하는 사람들

대한민국 사람이라면 대부분 이용하는 카카오톡 이모티콘도 webp를 혼용하며 사용하고, 텔레그램 스티커 역시 이 포맷을 이용하고 있다. 넷플릭스, 야후, 아마존, 이베이, 핀터레스트 등과 같은 큰 기업들의 웹 사이트들은 이미지를 webp로 전환하여 웹사이트 속도를 향상하고 있다. 

 

만약 webp가 대중적으로 알려지게 된다면 앞으로 대부분의 이미지가 webp 파일로 모든 이미지 포맷을 대체할 수 있지 않을까 생각해본다.

 

WEBP 지원 브라우저

WEBP 형식 파일은 크롬, 엣지, 파이어폭스, 오페라, 사파리 등 주요 브라우저에서 지원된다. 2020년 6월 애플이 사파리에서 WEBP를 지원 소식을 발표하면서 앞으로 WEBP 이미지 포맷 사용자가 많아질 것으로 예상된다.

 

webp 파일 만드는 법

포토샵 플러그인 이용하기

포토샵을 이용해 확장자를 WEBP로 설정하여 저장할 수 있다. GitHub에서 플러그인을 다운로드한 다음 포토샵 설치 폴더에 넣으면 된다. 포토샵 설치 폴더는 아래와 같다.

.bin\WebPShop_0_3_2_Win_x64C:\Program Files\Adobe\Adobe Photoshop\Plug-ins

 

위의 폴더에 파일을 넣은 다음 포토샵을 다시 재 시작하면 저장 옵션(웹용으로 저장 아님)에 ‘webp’ 파일이 표시된다.

 

 

온라인 변환기 이용하기

온라인 컨버터를 이용하면 더 빠르게 webp 파일로 변환할 수 있다.

 

 

상단에서 어떤 이미지를 WEBP로 변환할 것인지 선택한 다음, [파일 선택]을 클릭해 변환할 이미지를 선택한다(또는 이미지 URL을 입력한다). 그다음 [Upload!] 버튼을 클릭하면 된다.

 

꿀뷰를 통해 webp 변환하기

이미지 뷰어인 꿀뷰를 통해서도 webp파일로 변환이 가능하다. 먼저 꿀뷰를 다운로드 받는다.

 

꿀뷰를 다운로드 받은 다음 변환할 이미지 파일에 마우스 커서를 가져다대고 오른쪽 버튼을 클릭한다. 오른쪽 버튼 클릭 후 "꿀뷰로 변환"을 클릭한다.

 

저장 이미지 포맷을 WEBP로 지정한 다음 하단의 시작 버튼을 누르면 해당 이미지 파일이 변환된다.

워드프레스에서 webp 이미지 사용할 수 있을까?

워드프레스 5.8 이후 버전부터는 WEBP 이미지 형식 업로드가 추가되어 미디어 라이브러리에 직접 업로드할 수 있다. 다만 기존에 업로드되어있는 이미지는 자동으로 변환되지 않기 때문에 기존에 업로드된 이미지가 많다면 관련 플러그인을 사용하는 것을 추천한다.