블로그스팟 움짤, GIF 대신 WebP를 써야 하는 이유 (용량 70% 절감 팁)

블로그스팟에 사진 업로드 시 파일 형식은 어떤 것이 좋을까? jpeg, png가 아닌 바로 webp 형식! 그렇다면 gif는 어떨까? gif 역시 webp으로 올리는 것이 좋다. 왜 이제야 알았을까 싶은 이미지 포맷의 신세계, Webp를 추천하는 이유를 정리해 본다.

포맷별 특징 비교 JPEG, PNG, GIF, Webp

1. JPEG (Joint Photographic Experts Group)

손실 압축 방식을 사용. 색상이 풍부한 실제 사진을 저장할 때 용량을 획기적으로 줄여준다.
단점: 압축률을 높이면 글자나 경계선이 뭉개지는 '노이즈'가 발생한다.
용도: 풍경 사진, 인물 사진 등 복잡한 이미지.

2. PNG (Portable Network Graphics)

무손실 압축. 배경을 투명하게 만들 수 있어 웹 디자인 요소에 필수적.
단점: 고해상도 사진을 PNG로 저장하면 JPEG보다 용량이 커진다.
용도: 로고, 투명 배경이 필요한 이미지, 글자가 선명해야 하는 도표.

3. GIF (Graphics Interchange Format)

아주 오래된 포맷이며, 최대 256가지 색상만 표현.
단점: 색상 표현력이 낮아 실사 영상은 자글자글하게 보이고, 압축 효율이 나빠 용량이 매우 크다.
용도: 짧고 간단한 저화질 애니메이션.

4. Webp (Web Picture Format)

현존하는 최고의 웹용 포맷으로, JPEG의 압축력과 PNG의 투명도, GIF의 애니메이션 기능을 모두 합쳤다.
GIF 대비 약 30~50% 작은 용량으로 더 깨끗한 화질을 보여줌.

- 내 경험으로는 약 60~70% 정도의 용량 차이를 느낌.

최신 웹 브라우저(크롬, 사파리, 엣지 등)는 이제 모두 Webp를 지원.

샤나인코더, Ezgif

티스토리 할 땐 아니었지만, 블로그스팟을 하면서 jpeg, png 등의 이미지는 webp 형식으로 변환해서 올린다. 그런데 Webp 포맷 형식이 GIF까지 품은 걸 알지 못했다. 결국 그 동안 올린 글의 gif를 변환하는데 또 시간을 빼앗김. 새로 알게 된 내용들. ⛛

먼저, 두 방식의 차이를 보자.

1. AVI → Webp

원본 동영상의 풍부한 색상(트루 컬러)을 그대로 Webp에 담을 수 있다. 그라데이션이 매끄럽고 실사 영상에 가까움.
Webp의 최신 압축 알고리즘을 사용하여, 고화질이면서도 용량을 작게 만들 수 있음.

2. AVI → GIF → Webp

GIF는 한 프레임에 최대 256색밖에 표현하지 못한다. 이 과정(위에서 말했지만)에서 색상이 뭉개지거나 깨지는 '계단 현상(Banding)'이 이미 발생함, 따라서 이후에 Webp으로 바꿔도 이미 손상된 화질은 돌아오지 않음.
GIF 자체가 압축 효율이 떨어지는 형식이라 파일 크기가 크다. 이를 다시 Webp으로 변환하면 용량은 조금 줄어들 수 있으나, 처음부터 AVI에서 변환한 것보다 용량 대비 화질 효율이 나쁘다.

※ avi에서 만든 15초 짜리 gif 파일의 용량이 14㎆라면 webp는 3㎆, 14㎆의 gif를 webp로 변환하면 10㎆. (avi → gif = 14㎆ / avi → webp = 3㎆ / avi → gif → webp = 10㎆.)

결론은? 처음부터 Webp로 만드는 것이 압도적으로 이득!

위 작업을 하면서 알게 된 Ezgif와 샤나인코더. 동영상을 자를 때 필요한 것은 샤나인코더(자른 영상을 바로 webp로의 변환도 가능), 변환을 위한 툴은 Ezgif.

둘 다 무료이며 'Ezgif'는 설치가 필요 없고, '샤나인코더'는 설치가 필요하지만 가볍다.

- 곰믹스는 유료 버전이 아니라면 영상을 자르고 인코딩 시 상단에 로고가 생김.

오늘의 한마디

webp 안에 gif도 있다는 것을 기억하자. 이미 생성한 gif를 webp로 바꾸는 것은 의미가 없고, 결국은 영상을 다시 자르고 webp로 변환을 해야 하는데 이게 말처럼 간단하지가 않음.

unsplash@ava sol

이 블로그 검색

더한스픽