Webp 이미지 저장 시 손실로 하세요. 무손실 압축하다 용량 더 커질 수 있어요

Webb 이미지는 높은 압축률에 적은 용량을 대표하는 이미지 포맷을 의미합니다. 하지만 Webp 이미지 저장 시 무손실 압축으로 하다가 용량이 더 커질 수도 있습니다. 손실 압축으로 하시 되 비율도 잘 조정하셔야 합니다.

Webp 이미지

블로그를 하기 전에는 제가 아는 이미지 파일의 형식은 JPG였습니다. 간혹 PNG도 보게 되면 이것도 이미지 파일의 일종이구나 아는 정도였습니다. 그리고 블로그를 운영하면서 Webp 이미지라는 것을 알게 되었습니다.

이미지 용량과 로딩 속도의 관계를 알게 되면서 부터 관심을 가졌던 것 같습니다. 이런 Webp 이미지를 저는 잘못 저장하여 사용하여 포스팅에 사용하였고, 그 결과 웹 페이지 속도를 떨어뜨리고 있었던 것입니다. 지금부터 그 얘기를 하고자 합니다.

1) Webp vs JPG 차이점

이미지 파일 형식으로 가장 널리 알려져 있는 JPG는 일반적으로 사진이나 복잡한 이미지를 압축하고 저장하는 데 이용됩니다. 오래된 이미지 포맷이긴 해도 카메라 및 웹 등에서 여전히 많이 사용되고 있습니다.

Webp는 구글에서 만든 이미지 파일 형식으로 웹에서 사용하기 위해서 고안되었습니다. Webp의 특징은 높은 압축률과 동시에 고화질 이미지를 가질 수 있는 것입니다.

여기에 파일 크기를 적게 함으로서 웹 페이지 로딩 속도를 빠르게 하는 데 도움을 줄 수 있습니다. 일반적으로는 Webp가 JPG 또는 PNG보다 더 작은 파일 크기를 가지고 있는 것으로 알려져 있습니다.

2) Webp 손실, 무손실 압축

다른 이미지 포맷을 Webp 이미지로 저장 시에 무손실과 손실 압축을 선택할 수 있습니다. 무손실은 말 그대로 이미지 품질에 손실이 일어나지 않으면서 파일 크기를 줄이는 방법입니다.

원본 이미지 데이터가 보존되기 때문에 이미지 품질을 유지할 수 있긴 하지만 파일 크기는 줄이는 데에는 한계가 있습니다.

이에 반해 Webp 무손실 압축의 반대가 될 것입니다. 원본 이미지 데이터 제거함으로써 이미지 파일 크기를 줄이는 방법입니다.

하지만 이미지 데이터가 일부 제거되기 때문에 어느 정도 이미지 손실은 감안하셔야 합니다. 대신 적은 파일 크기를 가질 수 있는 것이 장점입니다.

Webp 무손실 압축으로 커진 용량

블로그 운영을 하다 보면 이미지가 확실히 많이 필요할 때가 있습니다. 원래는 JPG 파일을 TINYpng에서 용량을 줄여서 사용하고 있었습니다. 이용해 보고 싶다는 분들은 아래 링크를 이용하시기 바랍니다. 좋은 웹사이트입니다.

하지만 웹 상에서 이미지 사용할 때 Webp를 사용하면 이미지 품질도 유지하면서 용량도 적게 할 수 있다는 사실을 알게 된 이후에는 포토샵에서 Webp 저장하는 방법을 하였습니다.

처음에는 그냥 손실 압축 방식으로 사용하다가, 무손실이 이미지 품질도 유지하게 해 주니, 더 낫겠다는 생각에 최근에 들어서 무손실로 블로그 모든 이미지 파일을 변환하여 올렸습니다.

그러다 한 이미지 원본 파일 JPG와 Webp 무손실 압축한 파일 용량 크기를 우연 찮게 알게 되었습니다. 95.6KB가 264KB로 2배 이상 용량이 커진 것입니다.

Webp 포맷으로 쓰면 용량이 줄어든다고 알고 있었던 저에게는 큰 충격이었습니다. 그것보다 더 큰 용량 이미지를 블로그에 올리고 있었던 것입니다. 내가 스스로 웹 페이지 로딩 속도를 느리게 하고 있었던 것입니다.

1) Webp 무손실, 손실의 용량 비교

Webp 무손실 압축했을 때는 원본의 2배 이상 올라갔던 용량이 손실로 했을 때는 확실히 줄어드는 모습을 보여주었습니다. 무손실 압축과 비교하면 손실 압축의 용량은 압도적으로 작아 보입니다.

여담으로 위와 같은 이슈 때문에 검색을 하다가 어떤 포스팅에서 비슷한 테스트를 한 것이 있었는데, Webp 손실 압축 90%, 100%로 했을 때에도 용량이 커졌다는 것을 본 적이 있습니다.

물론 사용한 이미지에 따라 어느 정도 차이가 있을 수 있지만 확실한 것은 손실 압축 60%, 70%, 80%는 이미지 파일 크기를 줄일 수 있다는 것입니다.

2) Webp 손실 압축하면 이미지 품질은?

Webp 손실 압축해서 이미지 파일 크기 줄인 것은 좋은데, 이미지 품질은 어떻게 될까? 스누피 인형 사진을 JPG와 Webp 손실 60%로 비교해 보았습니다.

이미지를 다루시는 것에 전문적인 분들을 아마 차이를 아실 수 있겠지만, 저와 같이 일반 블로그를 하는 사람의 눈에는 큰 차이를 발견할 수 없었습니다.

개인적으로 블로그에서 이미지는 품질보다는 글에서 전달하려는 요소를 더욱 임팩트 있게 해 줌과 동시에 가독성을 높이는 요소로 사용하기 때문에 품질이 큰 영향을 주지 않는다고 생각하는 편입니다.

3) Webp 무손실, 손실 저장방법

JPG, PNG 이미지 파일을 Webp 변환하는 방식은 사용하는 이미지 툴에 따라 다를 수 있습니다. 저는 포토샵을 이용하고 있어서 포토샵 기준으로 말씀 드리도록 하겠습니다.

이미지 편집 등을 마치고 저장 옵션에 가시면 손실 없음과 손실을 보실 수 있습니다. 손실 없음이 무손실을 의미하며, 손실에서는 품질 %를 선택하실 수 있습니다. 저는 60%로 설정해 사용하고 있습니다.

왜냐하면 용량도 줄임과 동시에 이미지 품질에서도 크게 차이를 느끼지 못하기 때문입니다. 더 이상 내려가면 용량은 줄여도 이미지 품질 보장은 하지 못하겠습니다.

오늘은 Webp 이미지 저장 시 손실 압축을 이용하라는 것을 주제로 얘기해 보았습니다. 최근 한달동안 포스팅하면서 사용한 이미지가 모두 무손실 압축으로 저장하여 올렸었습니다.

웹 페이지 로딩 속도가 얼마나 느려졌을까요? 다음에 이 부분에 대하여 한번 얘기해 보도록 하겠습니다. 글 읽어 주셔서 감사합니다.