오늘은 티스토리나 웹사이트에 포스팅을 작성할 때 사진을 많이 사용하게 되는데, 게시글의 속도가 느려지며 구글 SEO(검색 엔진 최적화) 적으로 굉장한 마이너스를 받게 되며 구글 상단 노출의 기회를 놓칠 수 있습니다. 그렇기 때문에 포스팅을 하기 전 사진의 용량을 줄이는 작업을 필수적으로 하시는 게 좋습니다.
보통의 방식은 PNG
나 JPG
같은 파일을 압축해 용량을 줄이는 방법을 사용할 수 도 있지만, 오늘은 WebP
라는 파일에 대해 알아보며 이 파일들의 형식과 압축률에 대해 비교해보려 합니다.
JPG & PNG & WebP 란?
JPG, PNG 차이 및 장단점
JPG
/JPEG
는 PNG
파일에 비해 압축률이 뛰어납니다. 하지만 아래 처리과정을 보면 어떠한 단점이 있는지 알 수 있습니다.
쉽게 말해 말하면
PNG
- 비손실 압축 방식으로 원본이 훼손되지 않음. 투명 배경을 사용할 수 있음.
JPG
/JPEG
- 손실 압축으로 원본 자체가 훼손됨(눈에 거슬리지 않을 정도). 투명 배경을 사용할 수 없음.
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)로 크게 압축이 되는 것을 확인할 수 있습니다.
그럼 JPG/PNG를 압축하고 WebP로 변환하는 게 좋을까?
아니요. 결과는 똑같습니다. 그래서 별도의 압축 없이 WebP
로 바로 변환해주시는 게 가장 빠르고 압축률도 좋습니다.
WebP를 압축했을 경우
WebP
파일도 압축이 가능합니다. (투명배경은 사라지는 것 같습니다)

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

어때요? 왜 JPG
/PNG
형식을 압축하지 않고 WebP
를 사용해야 하는지 이해가 되시나요? 참고로 이 게시글의 모든 이미지의 파일 형식은 WebP
로 이루어져 있습니다.
파일 압축 사이트 모음
JPG / PNG 압축 사이트
JPG / PNG To Webp 변환 사이트
cloudconvert 또는 convertio 등
Webp 압축 사이트
압축 및 변환에 가장 좋은 프로그램
photoscape X를 사용하시는 것이 가장 좋습니다. (압축 제한 없음, 일괄 압축 가능)
오늘은 티스토리에서 포스팅을 할 때 사진을 극적으로 줄이는 완벽한 방법에 대해 알아봤습니다. 꼭! 이점 참고하셔서, 구글 SEO(검색 엔진 최적화)에 충족이 되어 구글에 상단 노출이 되시기를 바랍니다.
2022년 구글 상위 노출! SEO(검색 엔진 최적화) 최적화 글쓰기 방법
SEO(검색 엔진 최적화) 오늘은 수익형 블로그의 시작인 구글 상위 노출에 관련한 SEO(검색 엔진 최적화) 글 쓰는 방법에 대해 알아볼까 합니다. 우선 블로그를 하시는 분들의 대부분의 목표가 구...
seons-dev.tistory.com
읽어주셔서 감사합니다🤟
'TIP > CSS & Tistory' 카테고리의 다른 글
(티스토리)블로그에 소셜 SNS 댓글을 달아보자. - 디스커스(disqus) (10) | 2022.03.22 |
---|---|
(티스토리) 모든 포스팅 아래에 인스타 피드 고정 및 사이즈 조절 방법 (인스타 공유) (5) | 2022.03.20 |
(티스토리) 미넴스킨 - BGM 넣는 방법 및 스킨을 업데이트해도 스킨 설정 유지하는 방법! (37) | 2022.03.19 |
(티스토리) 스킨 편집 자바스크립트 및 CSS가 많을 때 한 파일로 몰아넣는 방법! (15) | 2022.03.17 |
(티스토리) 카테고리 새 글 발생 시 나오는 NEW 아이콘 변경하는 방법 - 아이콘 첨부! (73) | 2022.03.16 |