webp 이미지, 이미지 확장자 변환하기

 

요즘 작업을 하다 보면 수급받는 이미지가 png가 아니라 webp의 확장자가 많다.

📌 webp란?

💡 webp는 구글이 출시한 파일 포맷

<장점>

• 웹사이트에서는 고품질의 이미지로 구현
• png, jpg, gif 보다는 파일크기 작음
• 용량이 작아서 SEO에 유리 (페이지 로딩 속도 개선)
• 투명도 지원(png 대체 가능)
• 애니메이션 지원(gif 대체 가능)

<단점>

• 최신브라우저에서는 대부분 지원하나 오래된 브라우저나 일부 앱에서는 아직 지원이 안될 수 있음
• 아직까지는 webp로 파일 추출 과정 복잡 (플러그인 등으로 대체 가능하나 100%는 아님)

 

---

📌 기존 이미지를 webp로 바꾸기

나도 개인 포트폴리오를 작업하면서 png를 webp로 변환하는 작업을 하고 있다.

 

 

💡 확장자 변환 사이트

• FreeConvert
• Convertio
• 비볼디(Vivoldi) WebP 변환기

등등 검색하면 위와 같은 많은 변환 사이트가 나오긴 하지만,
어딘가에 내 이미지를 업로드해야 한다는 게 사실 조금 찝찝해서 나는 사용하지 않을 것 같다.

나는 어도비 클라우드를 유료로 구독하고 있기 때문에 포토샵으로 기존 이미지를 불러온 뒤 webp로 변환하고 있다.
이외에도 피그마, 제플린, 확장자 변환 사이트를 통해서 바꿀 수 있다고 한다.

 

 

💡 포토샵으로 이미지 확장자 바꾸기

• 내 개인 포트폴리오 사이트에 들어간 이미지도 png라서 이번에 webp로 바꿔보겠다.

 

 

일단 바꾸고 싶은 이미지들을 포토샵으로 불러온뒤

이미지를 저장할 때 확장자만 webp로 선택하면 간단하게 webp로 저장할 수 있다.

 

 

 

💡 기존의 png파일과 변환한 webp 파일은 용량차이가 얼마나 날까?

그런데???

위의 첨부 이미지를 보면 png파일을 webp로 바꿨는데,

오히려 webp가 png보다 용량이 크다.

이 부분이 궁금해서 서치를 해보니

 

webp가 무조건적으로 효율적이지는 않다는 것!

이미지가 단색배경, 투명도, 단순 아이콘일 경우에는 png보다 webp의 용량이 더 크게 나올 수 있다.

맞다. 내가 바꾼 이미지는 투명도가 들어간 단순 배경 이미지였다.

 

좀 복잡한 그래픽이 들어간 png 파일을 webp로 바꾸니 용량이 확 줄어든것을 확인 할 수 있다.

 

 

 

💡 정리

• webp가 항상 효율적인것만은 아님.
• 단순 패턴, 투명도, 아이콘 이미지는 png보다 webp가 더 크게 나올 수도 있음.
• 복잡한 패턴, 그래픽 이미지 등이 webp에 적합
• 이미지를 무손실 webp 혹은 품질 100으로 저장해도 용량이 커진다.