Webp 알아보기

1주차 과제로 자기소개 페이지를 만들었다.
사진을 약 20장 정도는 넣은거 같은데, 코드리뷰에서 jpg는 파일 용량이 커서 로드 되는데 오래 걸릴 수 있고, webp로 변환 시 품질은 유지되고 용량은 확실히 줄어든다는 리뷰를 받았다.
그래서 그때 그런것도 고려해야하는구나 알았고 이번 기회에 WebP가 뭔지, 어떤앤지 정리해 보기로 했답!!

이미지가 무거우면 뭐가 문제일까

웹페이지를 열면 브라우저는 HTML, CSS, JS와 함께 페이지에 들어간 이미지를 전부 내려받는다. 대부분의 웹페이지에서 가장 많은 용량을 차지하는 게 바로 이미지일거다. 내 노트북처럼 빠른 와이파이에서 열어 보면 차이를 잘 못 느끼지만, 모바일 데이터나 느린 네트워크에서는 사진이 위에서부터 한 줄씩 늦게 그려지거나 한참 동안 빈 칸으로 남아 있게 된다. 사용자 입장에서는 그만큼 데이터도 더 쓰게 된다. 그래서 이미지 용량을 줄이는 건 웹 성능 최적화에서 가장 쉽게 효과를 볼 수 있는 방법으로 꼽히는거 같다.

WebP는 뭘까

WebP는 구글이 2010년에 공개한 이미지 포맷이다. 이름 그대로 웹에서 쓰기 위해 만든 포맷이고 목표는 화질은 비슷하게 유지하면서 용량을 줄이는 것이다.

우리가 흔히 쓰는 포맷은 용도가 나뉘어 있다.

JPG는 사진처럼 색이 많은 이미지를 작게 저장하는 데 강하지만 투명 배경을 지원하지 않는다. PNG는 투명 배경을 지원하고 화질 손실이 없지만 사진을 저장하면 용량이 커진다. 움직이는 이미지는 GIF를 쓰는데, GIF는 색을 256개밖에 못 쓰고 용량도 크다.

WebP는 이 세 가지 역할을 하나로 할 수 있다. 화질을 조금 포기하고 많이 줄이는 손실 압축 화질, 그대로 줄이는 무손실 압축, 투명 배경, 애니메이션까지 모두 지원한다.

구글이 공개한 자료에 따르면 WebP는 같은 화질 기준으로 JPG보다 약 25~34%, PNG보다 약 26% 작다고 한다!

어떻게 더 작아질까

공식문서의기술적설명보러가기~

압축 원리를 깊게 들어가면 딥해지기 때문에..
간단하게? 정리하면

JPG는 이미지를 작은 블록으로 나누고, 각 블록에서 사람 눈에 잘 띄지 않는 세세한 정보를 덜어내는 방식으로 용량을 줄인다.

WebP의 손실 압축도 블록 단위로 정보를 덜어낸다는 점은 비슷하지만, 그 전에 한 단계를 더 거친다.
이미지는 보통 이웃한 픽셀끼리 색이 비슷하다. 하늘 사진이라면 옆 픽셀도 거의 같은 파란색일 것이다.
WebP는 이미 처리한 주변 블록을 보고 여기는 이런 색이겠지? 라고 예측한 다음에 실제 이미지와 예측의 차이만 저장한다 차이는 대부분 작은 값이라 훨씬 적은 공간에 담을 수 있다.
여기에 JPG보다 효율 좋은 방식으로 데이터를 한 번 더 압축해서 최종 용량이 줄어든다.

이 예측 방식은 원래 구글의 동영상 코덱에서 가져왔다고한다. 영상은 비슷한 장면이 계속 이어지기 때문에 이전과 달라진 부분만 저장하는 기술이 발달해 있었는데 그 아이디어를 가져왔다고 한다!

((쉽게 예시를 들어서 표현하면 이런 방식이라구한다!))

브라우저에서 다 되나?

예전에는 사파리가 WebP를 지원하지 않았다고하는데 사파리도 2020년부터 지원하기 시작했고 지금은 크롬, 엣지, 사파리 등 주요 브라우저에서 모두 쓸 수 있다고한다 ~~

WebP 다음은? AVIF??

WebP를 찾아보다보니까 AVIF라는 포맷도 자주 눈에 띄는데..이건 뭘까?

AVIF는 AV1이라는 최신 동영상 코덱을 기반으로 만든 이미지 포맷이다. WebP가 구글동영상 코덱에서 아이디어를 가져온 것처럼, AVIF도 더 발전된 영상 압축 기술을 이미지에 적용했다. 그래서 같은 화질에서 WebP보다도 더 작게 저장되는 경우가 많다.

다만 아직은 인코딩 속도가 느리고 아직은 좀 더 신중하게 쓰는 편이라한다.
그래서 태그에 AVIF → WebP → JPG 순서로 이미지를 지정하는 방법이 있다고한다. 브라우저는 위에서부터 지원 여부를 확인해 사용할 이미지를 선택한다. AVIF를 지원하면 AVIF를, 지원하지 않으면 WebP를 확인하고, 둘 다 지원하지 않으면 JPG를 사용한다.
((파일 크기를 자동으로 비교하는 것은 아니므로, 각 이미지의 용량과 화질은 직접 확인해야 한다.))

<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="사진" />
</picture>

요론식으로..?!

그래서 언제 뭘 쓰면 될까

정리해 보면! 사진처럼 색이 많은 이미지는 WebP로 한번 써보자! 투명 배경이 필요한 이미지도 PNG 대신 WebP로 대체할 수 있다.
((로고나 아이콘처럼 단순한 도형은 크기를 키워도 깨지지 않는 SVG가 더 적합하다.))

한번 직접해보자

1주차 자기소개서에 썼던 이미지 21장을 다시 모아서 ffmpeg로 한 번에 WebP(품질 80)로 바꿔 봤다. 전체 용량은 9.30MB에서 2.85MB로 약 70프로정도가 줄었다.

위에 사진만 봐도 확 줄은걸 볼 수 있다 (크기 부분을 보세요!🧐🧐🤩)

두개만 직접 열어서 확인해보아도,, 파인더에서 봤을땐 분명 용량은 확 줄었는데 눈으로는 차이를 모르겠는걸 볼 수 있다!

느낀점

1주차 때는 페이지가 화면에 잘 보이기만 하면 된다고 생각해서 이런걸 고려하지 않고 (고려할 생각도 못했었다..ㅜㅎ) 사진을 그대로 넣었다
코드리뷰에서 받은 리뷰를 보니까 내가 몰랐던 부분도 새롭게 알게돼서 알아가는게 많아서 좋았다.. 공부를 더 해서 나도 다른사람에게 도움될 수 있는 코드리뷰를 다는것이 목표로 삼았다ㅎ...😭
다음부터는 이미지를 넣을 때는 보여 줄 크기에 맞게 줄이고 WebP로 바꾸는 것까지 한번 적용해봐겠다..!!

참고

• Google WebP 공식 문서
• web.dev - Use WebP images
• 블로그글