포스팅을 할 때 사진을 극적으로 줄이는 완벽한 방법! WebP (단순 용량 압축 X )

오늘은 티스토리나 웹사이트에 포스팅을 작성할 때 사진을 많이 사용하게 되는데, 게시글의 속도가 느려지며 구글 SEO(검색 엔진 최적화) 적으로 굉장한 마이너스를 받게 되며 구글 상단 노출의 기회를 놓칠 수 있습니다. 그렇기 때문에 포스팅을 하기 전 사진의 용량을 줄이는 작업을 필수적으로 하시는 게 좋습니다. 

 

보통의 방식은 PNG 나 JPG 같은 파일을 압축해 용량을 줄이는 방법을 사용할 수 도 있지만, 오늘은 WebP라는 파일에 대해 알아보며 이 파일들의 형식과 압축률에 대해 비교해보려 합니다.

JPG & PNG & WebP 란?

JPG, PNG 차이 및 장단점

JPG/JPEG는 PNG 파일에 비해 압축률이 뛰어납니다. 하지만 아래 처리과정을 보면 어떠한 단점이 있는지 알 수 있습니다.

 

쉽게 말해 말하면

PNG - 비손실 압축 방식으로 원본이 훼손되지 않음. 투명 배경을 사용할 수 있음.

JPG/JPEG - 손실 압축으로 원본 자체가 훼손됨(눈에 거슬리지 않을 정도). 투명 배경을 사용할 수 없음.

TIP

 

 

JPG? JPEG 차이점은?
JPG와 JPEG는 사실 같은 확장자입니다. 정식 명칭은 JPEG가 맞으며, JPG는 줄여서 사용되는 확장자입니다. 하지만 간혹 웹사이트에서 두 개의 확장자가 호환이 안되고, JPG만 첨부가 가능한 사이트들이 있으니 주의해야 합니다.

WebP 란?

WebP(Web + Picture) 확장자는 기존의 ,GIF, JPG, PNG 이미지 포맷을 대치하기 위해 개발된 확장자입니다. 

 

WebP의 장점은 같은 품질의 이미지를 만들 때 기존의 이미지 포맷보다 파일 크기를 극적으로 낮춰서 저장할 수 있습니다. WebP를 사용하게 되면 JPG/JPEG는 기존 대비 25~34%, PNG는 비손실의 경우 평균 26% 정도 기존 파일 대비 작아지게 됩니다.

 

그리고 GIF 같은 경우는 기존 대비 동일 화질의 WebP로 변경 시 파일 크기가 절반까지 줄어들기도 합니다.

 

또한, PNG파일에서만 적용되면 투명 배경도 사용 가능합니다.

 

이 WebP는 구글에서 강력히 추천하고 있는 확장자입니다. 

 

웹사이트의 속도를 측정해주는 PageSpeed Insights에서 측정해보면 아래와 같은 결과를 볼 수 있는데, 이곳에서도 다음과 같이 추천을 하고 있는 것을 확인할 수 있습니다.

WebP 지원 브라우저

또한 WebP는 현재 구글의 크롬, MS의 엣지, 애플의 사파리 등 거의 모든 브라우저에서 WebP형식의 파일을 지원하고 있기 때문에 티스토리에 포스팅을 할 때 이 파일을 사용하는 것이 가장 좋습니다.

JPG & PNG & WebP  압축률 비교

우선 임의의 파일을 하나 놓고 각각의 파일을 압축했을 때의 용량을 비교해보겠습니다.

 

압축을 할 수 있는 웹사이트 및 응용프로그램이 많이 있습니다. 사이트는 아래에 링크 걸어두겠습니다.

 

이미지 압축에 사용된 사진의 소스는 Unsplash에서 가져왔습니다.

JPG를 압축했을 경우

2.3MB ➜ 1.1MB로 크게 압축이 되는 것을 확인할 수 있습니다.

PNG를 압축했을 경우

위의 JPG(2.3MB)를 PNG 형식으로 바꾸면 약 14.9MB로 용량이 엄청 커지게 됩니다. 그리고 이 PNG 파일을 압축하면 

14.9MB ➜ 5.7MB로 크게 압축이 되는 것을 확인할 수 있습니다.

JPG to WebP 변환

JPG(2.2MB) ➜ WebP(987KB)로 크게 압축이 되는 것을 확인할 수 있습니다.

PNG to WebP 변환

PNG(14.9MB) ➜ WebP(1MB)로 크게 압축이 되는 것을 확인할 수 있습니다.

TIP

 

 

그럼 JPG/PNG를 압축하고 WebP로 변환하는 게 좋을까?
아니요. 결과는 똑같습니다. 그래서 별도의 압축 없이 WebP로 바로 변환해주시는 게 가장 빠르고 압축률도 좋습니다.

WebP를 압축했을 경우

WebP 파일도 압축이 가능합니다. (투명배경은 사라지는 것 같습니다)

물론 화질은 조금 떨어질 수 있습니다. 11zon 이라는 사이트에서 압축 수준을 10% 정도로 하면 화질도 크게 떨어지지 않으면서 압축률은 좋은 것 같습니다.

 

어때요? 왜 JPG/PNG 형식을 압축하지 않고 WebP를 사용해야 하는지 이해가 되시나요? 참고로 이 게시글의 모든 이미지의 파일 형식은 WebP로 이루어져 있습니다.

파일 압축 사이트 모음

JPG / PNG 압축 사이트

iloveimg 또는 tinypng등 

 

JPG / PNG To Webp 변환 사이트

cloudconvert 또는 convertio 등

 

Webp 압축 사이트

11zon

 

압축 및 변환에 가장 좋은 프로그램

photoscape X를 사용하시는 것이 가장 좋습니다. (압축 제한 없음, 일괄 압축 가능)

---

오늘은 티스토리에서 포스팅을 할 때 사진을 극적으로 줄이는 완벽한 방법에 대해 알아봤습니다. 꼭! 이점 참고하셔서, 구글 SEO(검색 엔진 최적화)에 충족이 되어 구글에 상단 노출이 되시기를 바랍니다.

2022년 구글 상위 노출! SEO(검색 엔진 최적화) 최적화 글쓰기 방법

 

 

 

읽어주셔서 감사합니다🤟