|
| 1 | +--- |
| 2 | +title: WebM과 WebP로 웹 성능 개선하기 |
| 3 | +description: WebM과 WebP로 웹 성능을 개선한 방법에 대해 정리한 페이지입니다. |
| 4 | +date: 2025-02-20 14:06:00 +0900 |
| 5 | +categories: [Front-end] |
| 6 | +tags: [video, image, webm, webp] |
| 7 | +math: true |
| 8 | +toc: true |
| 9 | +pin: false |
| 10 | +image: |
| 11 | + path: /assets/img/front-end/front-end.webp |
| 12 | +comments: true |
| 13 | +--- |
| 14 | + |
| 15 | +<blockquote class="prompt-info"><p><strong><u>Tags</u></strong> <br> |
| 16 | +video, image, webm, webp</p></blockquote> |
| 17 | + |
| 18 | +## 개요 |
| 19 | + |
| 20 | +WebM과 WebP을 사용해서 웹 성능을 개선한 방법에 대해 정리한 페이지입니다. |
| 21 | + |
| 22 | +## WebM |
| 23 | + |
| 24 | +### WebM의 개념 |
| 25 | + |
| 26 | +`WebM`이란 HTML5 환경에서 동영상과 오디오 콘텐츠를 재생하기 위해 설계된 오픈 소스 비디오 포맷으로 구글이 2010년에 개발하였습니다. 주로 HTML5 video 태그와 함께 사용되며, <b>VP8/VP9/AV1 비디오 코덱</b>과 <b>Vorbis/Opus 오디오 코덱</b>을 결합한 컨테이너 형식입니다. |
| 27 | + |
| 28 | +### WebM의 특징 |
| 29 | + |
| 30 | +`WebM`의 특징은 다음과 같습니다. |
| 31 | + |
| 32 | +- `오픈 소스 및 라이선스 무료` |
| 33 | + |
| 34 | + `WebM`은 BSD 라이선스로 배포되며, 개발자와 사용자가 라이선스 비용 없이 자유롭게 사용 또는 배포할 수 있습니다. 특히 `WebM`이 지원하는 비디오 코덱과 오디오 코덱은 전부 오픈 소스로, 특허 관련 로열티가 없는 무료 코덱입니다. |
| 35 | + |
| 36 | +- `효율성` |
| 37 | + |
| 38 | + `WebM`이 지원하는 VP8/VP9/AV1 비디오 코덱은 동영상 파일 크기를 크게 줄이면서도 고화질을 유지하고, 오디오의 경우 Vorbis/Opus 코덱을 사용하여 오디오 데이터를 효율적으로 압축합니다. 압축률이 높아 `WebM`은 낮은 비트레이트에서도 우수한 영상 품질을 제공하며, 파일 크기가 작아 웹 페이지의 로딩 속도를 향상시킵니다. |
| 39 | + |
| 40 | +- `스트리밍에 최적화` |
| 41 | + |
| 42 | + `WebM`은 웹 스트리밍에 최적화되어 있어, 모바일 기기나 저전력 기기에서도 부드럽게 재생됩니다. 이에 대한 예시로, `YouTube`에서 고화질 비디오를 시청할 때 `WebM` 포맷이 사용됩니다. |
| 43 | + |
| 44 | +- `HTML5 및 웹 브라우저 지원` |
| 45 | + |
| 46 | + Chrome, Firefox, Opera 등 주요 브라우저에서 네이티브로 지원합니다. |
| 47 | + |
| 48 | + <blockquote class="prompt-warning"><p><strong><u>Caution</u></strong> <br> |
| 49 | + <u>2025년 2월 20일</u> 기준 iOS Safari는 아직 WebM을 지원하지 않습니다.</p></blockquote> |
| 50 | + |
| 51 | +### MP4 vs WebM |
| 52 | + |
| 53 | +웹 브라우저에서 자주 사용하는 비디오 포맷인 `MP4`와 `WebM`을 비교하여 표로 정리하면 다음과 같습니다. |
| 54 | + |
| 55 | +| | MP4 | WebM | |
| 56 | +| ----------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | |
| 57 | +| 코덱 | 비디오: VP8/VP9/AV1, 오디오: Vorbis, Opus | 비디오: H.264, H.265/HEVC, MPEG-4 등, 오디오: AAC, MP3, AC3 등 | |
| 58 | +| 호환성 | 가장 널리 사용되는 포맷으로, 거의 모든 브라우저와 모바일 기기에서 지원합니다. | 주요 브라우저에서 지원하지만, 일부 구형 브라우저와 기기에서 지원하지 않습니다. | |
| 59 | +| 파일 크기 | WebM에 비해 상대적으로 큽니다. | MP4에 비해 훨씬 작습니다. | |
| 60 | +| 파일 확장자 | .mp4 | .webm | |
| 61 | +| 품질 | 높은 품질의 비디오 | VP8/VP9 코덱은 H.265에 비해 압축률이 떨어져서 화질이 소폭 떨어집니다. | |
| 62 | + |
| 63 | +## WebP |
| 64 | + |
| 65 | +### WebP의 개념 |
| 66 | + |
| 67 | +`WebP`란 웹 페이지의 로딩 속도와 효율성을 극대화하기 위해 개발된 최신 이미지 파일 포맷으로 구글이 2010년에 개발하였습니다. `WebP`는 `JPEG`, `PNG`, `GIF`와 같은 기존 이미지 포맷을 대체하기 위해 개발되었으며, 더 나은 압축률과 품질을 제공합니다. `WebP`는 손실(Lossy) 및 무손실(Lossless) 압축을 모두 지원하며, 투명도(알파 채널)와 애니메이션도 처리할 수 있습니다. |
| 68 | + |
| 69 | +### WebP의 특징 |
| 70 | + |
| 71 | +`WebP`의 특징은 다음과 같습니다. |
| 72 | + |
| 73 | +- `손실 및 무손실 압축 지원` |
| 74 | + |
| 75 | + `WebP`는 손실 및 무손실 압축을 모두 지원합니다. 손실 압축은 VP8 비디오 코덱에서 동영상의 키 프레임을 압축하는 데 사용하는 것과 동일한 메서드인 예측 코딩을 사용하여 이미지를 인코딩합니다. 무손실 압축은 WebP 팀이 개발한 방식을 사용합니다. |
| 76 | + |
| 77 | + <blockquote class="prompt-info"><p><strong><u>Info.</u></strong> <br> |
| 78 | + 손실 압축: 사진과 같이 복잡한 이미지의 경우, 비슷한 화질을 제공하면서 파일 크기를 크게 줄일 수 있습니다. <br /> |
| 79 | + 무손실 압축: 이미지의 모든 데이터를 보존하면서도 용량을 줄일 수 있어, 특히 그래픽이나 투명도가 중요한 이미지에 유리합니다.</p></blockquote> |
| 80 | + |
| 81 | +- `투명도(알파 채널)와 애니메이션 지원` |
| 82 | + |
| 83 | + `WebP`는 `PNG`와 마찬가지로 투명도(알파 채널)을 지원합니다. 또한 `GIF`처럼 움직이는 영상을 지원하며 더 작은 파일 크기로 더 높은 품질의 애니메이션을 지원합니다. |
| 84 | + |
| 85 | +- `효율성` |
| 86 | + |
| 87 | + 동일한 품질의 이미지를 기준으로, `WebP`는 `JPEG`와 `PNG`보다 훨씬 파일 크기가 작습니다. `WebP` 무손실 이미지는 `PNG`보다 크기가 <b>26%</b> 더 작으며, `WebP` 손실 이미지는 `JPEG` 이미지보다 <b>25~34%</b> 더 작습니다. 이로 인해 웹 페이지의 로딩 속도가 빨라지고, 네트워크 트래픽과 저장 공간도 절감할 수 있습니다. |
| 88 | + |
| 89 | +- `웹 브라우저 지원` |
| 90 | + |
| 91 | + Chrome, Edge, Firefox, Safari 등 주요 브라우저에서 지원합니다. 사실상 인터넷 익스플로러를 제외한 웹 브라우저에서 지원한다고 보면 됩니다. |
| 92 | + |
| 93 | +### JPEG vs PNG vs GIF vs SVG vs WebP vs AVIF |
| 94 | + |
| 95 | +웹 브라우저에서 사용하는 이미지 포맷을 비교하여 표로 정리하면 다음과 같습니다. |
| 96 | + |
| 97 | +| | JPEG | PNG | GIF | SVG | WebP | AVIF | |
| 98 | +| ----------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | |
| 99 | +| 의미 | Joint Photographic Experts Group | Portable Network Graphics | Graphics Interchange Format | Scalable Vector Graphics | Web Picture Format | AV1 Image File Format | |
| 100 | +| 특징 | 손실 압축을 사용하는 래스터 이미지 포맷으로, 사진 및 복잡한 색상의 이미지를 저장하는 데 적합합니다. | 무손실 압축을 사용하는 이미지 포맷으로 투명도를 지원합니다. | 256색 제한이 있으며, 애니메이션을 지원합니다. | 벡터 그래픽 형식으로, XML 기반으로 구성됩니다. | 손실 및 무손실 압축을 지원하며 파일 크기가 작으며 투명도를 지원합니다. | AV1 코덱을 기반으로 한 최신 이미지 포맷으로, 손실 및 무손실 압축을 지원하며 애니메이션 및 고효율 압축을 지원합니다. | |
| 101 | +| 장점 | 높은 압축률을 제공하여 파일 크기를 줄일 수 있습니다. | 투명도를 지원하며 배경이 투명한 아이콘, 로고, UI 요소에 적합합니다. | 애니메이션을 지원하며 간단한 아이콘에 적합합니다. | 확대해도 품질이 유지되며, CSS 및 JavaScript로 스타일을 변경할 수 있습니다. | JPEG보다 압축률이 높아 파일 크기가 작아지고, PNG처럼 투명도를 지원합니다. | WebP보다 뛰어난 압축률과 품질을 제공하며, HDR을 지원합니다. | |
| 102 | +| 단점 | 손실 압축 방식이라 반복 저장 시 화질이 저하될 수 있습니다. 또한 투명도를 지원하지 않습니다. | 파일 크기가 크며, 특히 사진과 같은 복잡한 이미지에 사용하면 용량이 클 수 있습니다. | 색상 제한이 있어 고화질 이미지에는 부적합합니다. | 사진과 같은 복잡한 이미지는 표현하기 어렵습니다. | 일부 구형 브라우저에서는 지원하지 않습니다. | 지원하는 브라우저가 제한적이며, 변환 속도(인코딩)가 WebP보다 느립니다. | |
| 103 | +| 파일 확장자 | .jpg, .jpeg, .jpe 등 | .png | .gif | .svg | .webp | .avif | |
| 104 | + |
| 105 | +<img src="/assets/img/front-end/webm-webp/pic1.png" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba |
| 106 | +(0, 0, 0, 0.19); border-radius: 0.5rem"/> |
| 107 | + |
| 108 | +<img src="/assets/img/front-end/webm-webp/pic1.webp" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba |
| 109 | +(0, 0, 0, 0.19); border-radius: 0.5rem"/> |
| 110 | + |
| 111 | +<img src="/assets/img/front-end/webm-webp/pic1.avif" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba |
| 112 | +(0, 0, 0, 0.19); border-radius: 0.5rem"/> |
| 113 | + |
| 114 | +## Step 1 - 웹 성능 개선 전 |
| 115 | + |
| 116 | +## Step 2 - 웹 성능 개선 후 |
| 117 | + |
| 118 | +## 참고 자료 |
| 119 | + |
| 120 | +- `WebM` |
| 121 | + - <a href="https://namu.wiki/w/WebM" target="_blank">WebM - 나무위키</a> |
| 122 | + - <a href="https://namu.wiki/w/VP9(%EB%B9%84%EB%94%94%EC%98%A4%20%EC%BD%94%EB%8D%B1)" target="_blank">VP9(비디오 코덱) - 나무위키</a> |
| 123 | + - <a href="https://ko.wikipedia.org/wiki/WebM" target="_blank">WebM - 위키백과, 우리 모두의 백과사전</a> |
| 124 | + - <a href="https://www.anyrec.io/ko/webm-vs-mp4/" target="_blank">WebM VS. MP4 – 비디오 품질, 파일 크기, 코덱, 사용 등</a> |
| 125 | +- `WebM` |
| 126 | + - <a href="https://namu.wiki/w/WebP" target="_blank">WebP - 나무위키</a> |
| 127 | + - <a href="https://developers.google.com/speed/webp?hl=ko" target="_blank">웹용 이미지 형식 | WebP | Google for Developers</a> |
| 128 | + - <a href="https://developers.google.com/speed/webp/docs/compression?hl=ko" target="_blank">압축 기술 | WebP | Google for Developers</a> |
0 commit comments