야수의 세상여행
오늘은 티스토리 블로그나 웹사이트 운영시 이미지 최적화의 기본 차세대 이미지 형식 WEBP에 대해서 살펴보겠습니다.
《목차》
1. webp란? webp 개념 정리
2. webp 장점과 단점
3. webp 진실과 거짓 (팩트체크)
1. webp란? webp 개념정리
webp 포맷의 시초는 2010년으로 거슬러 올라갑니다. webp는 Google에서 인수한 기업 On2 Technologies가 최초로 개념을 구상하여 '차세대 이미지 형식'으로 만들어졌습니다. Webp은 인터넷에서 이미지가 로딩되는 시간을 단축하는 것을 목적으로 두고 있습니다. 따라서 webp를 사용하면 웹 사이트에서 고품질 이미지를 표현할 수 있으며 PNG, JPEG 등 기존 이미지 파일의 포맷보다 파일 크기가 작아 용량 측면에서도 큰 절약을 할 수 있습니다.
우리는 더 많은 웹 사이트, 수많은 블로그 및 웹 페이지, 온라인 스토어를 사용하는 환경에 있으며 이로 인해 매일매일 새로운 정보와 데이터들에 둘러 쌓여있습니다. 자연스럽게 빠른 검색과 이미지 로딩시간 단축을 통해 시간을 절약하려는 욕구가 강해졌습니다. 따라서 웹페이지의 로딩속도가 강력한 경쟁력이 되므로 우수한 압축 기능을 갖춘 최신 이미지 파일형식의 필요성이 대두가 된 것은 어찌 보면 자연스러운 흐름입니다.
블로거, 웹 디자이너 및 사이트 개발자는 JPEG에서 WebP로 변환하여 그래픽 및 반투명 이미지를 사용한다면 웹 사이트 속도를 크게 향상시킬 수 있습니다. 이미지의 사이즈가 적을수록 사용자가 페이지를 클릭할 때 로딩 속도가 빨라지고 사이트의 사용자 경험은 더욱 풍부해집니다.
현재 Chrome (데스크톱 및 Android 버전), Firefox, Microsoft Edge 및 Opera와 같은 일반적인 웹 브라우저는 WebP를 지원합니다. 또한, Photoshop과 같은 다양한 이미지 편집 도구와 WebP 이미지 애니메이션, 멀티플렉싱에서도 호환되도록 만들어져 있습니다.
2. webp 장점 및 단점
2-1. WebP 파일의 장점
- (UI/UX 및 SEO 개선) webp를 활용해 블로그와 같은 웹 사이트의 이미지를 관리한다면, 웹 페이지는 빠르게 로딩될 것이며 이는 UI/UX에 긍정적인 영향과 검색엔진의 웹 사이트의 순위 상승에 큰 도움을 줄것입니다.
- (강한 브라우저 호환성) WebP 포맷은 Google Chrome, Microsoft Edge, Mozilla Firefox 등 이미 다양한 웹 브라우저와 호환되는 안정적인 그리고 검증받은 파일 형식입니다.
- (우수한 압축률) WebP는 이미지를 관리하기 쉬운 크기로 압축하므로, 파일 저장 공간을 여유롭게 만듭니다.
- (고품질 유지) WebP 파일은 동일한 PNG 파일보다 20~80% 까지의 압축률을 갖지만 품질에는 큰 차이가 없습니다.
2-2. WebP 파일의 단점
- (오프라인 활용 X) WebP는 인터넷을 염두에 두고 설계되어 오프라인에서 이미지를 사용하는 경우에는 도움이 되지 않을 수 있습니다.
- (완벽하지 않은 호환성) WebP 파일 포맷은 폭넓은 호환성을 가지고 있지만 Internet Explorer 등 일부 옛날 브라우저의 경우, WebP 이미지를 지원하지 못할 수 있습니다.
- (품질 변경 가능성) 약간의 압축으로도 이미지 품질이 저하될 수 있습니다. 고품질 이미지로 작업해야 하거나 전문 사진작가 및 디자이너라면 이를 고려해야 합니다.
3. webp 진실과 거짓 (팩트정리)
Q) 모든 브라우저가 WebP와 호환이 되나?
A) 모든 웹 브라우저가 WebP을 지원하는 것은 아닙니다. 하지만 이미 많은 기업들이 WebP를 활용하는 기술을 습득을 하였고 빠른 시일 내에 WebP는 대중화될 것이 확실합니다. 다년간 개발과 진화를 거듭한 끝에 대부분 웹 브라우저는 WebP 포맷을 지원합니다. 그러나 Internet Explorer와 같은 일부 브라우저는 여전히 WebP 파일을 지원하는 데 어려움이 있을 수 있어 Google의 최신 호환성 목록을 확인하는 것이 좋습니다.
이미 유튜브의 썸네일을 보거나 구글 플레이 스토어를 검색하는 동안 WebP 이미지를 접했을 가능성이 큽니다. 그리고 넷플릭스, 야후, 아마존, 이베이, 핀터레스트, 월마트 등과 같은 거대 기업의 웹사이트가 이미지를 WebP 로 전환하여 속도향상의 장점을 누리고 있습니다.
Q) 모바일 사이트의 이미지에도 적합한가?
A) 여러분의 목표가 자신의 웹사이트나 티스토리와 같은 블로그의 트래픽을 증가시키고 당신의 방문자들을 계속 참여시키는 것이라면, 사용자들에게 사이트가 느려 참을성을 요구해야 한다면 webp 이미지 파일이 그 해답이 될 수 있습니다.
또한, 대형 모니터가 아닌 스마트폰으로 대부분의 이미지를 보고 스크롤할 때 품질의 차이는 육안으로 구분하기는 쉽지 않을 겁니다. 따라서 모바일 웹페이지의 경우 이미지의 품질보다 효율성이 중요한 것을 당연하게 생각해야 할 시기가 도래한 거 같습니다.
Q) WebP 파일과 JPEG 파일의 차이점은 무엇입니까?
A) 두 파일 유형 모두 이미지를 공유하고 저장하기 쉽도록 압축합니다. 그러나 WebP 파일은 일반적으로 기존 JPEG보다 훨씬 작습니다. Google 개발자에 따르면 손실 압축의 WebP 이미지는 같은 손실 압축 방식을 사용하는 JPEG 파일보다 25%~34% 작을 수 있습니다.
Q) WebP는 오픈 소스 파일 포맷입니까?
A) WebP는 오픈 소스 모델이므로 누구나 이 포맷을 작업하고, 성능을 개선할 수 있습니다. Google 개발자는 webp 출시 이후 사용자의 의견을 적극 수렴하고 있습니다.
Q) WebP 이미지의 최대 크기는 어떻게 됩니까?
A) 최대 크기는 16,383 x 16,383픽셀입니다. WebP 이미지를 웹 사이트나 다른 위치에 추가하기 전에는 최대 크기를 고려하는 것이 좋습니다.
오늘은 SEO 마케터라면, 웹사이트 운영관리자라면, 블로거라면, 그리고 개발자라면 한 번쯤은 들어봤을 만한 이미지 파일 형식 webp에 대해 다루어 보았습니다.
오늘 포스팅도 작게나마 도움이 되었으면 좋겠습니다.
모두 행복한 하루 되시기 바랍니다 ^^
블로거의 기본 이미지 SEO 방법이 궁금하면▼
검색엔진최적화 이미지 SEO 전략 7가지
오늘은 블로그 (티스토리 등), 사이트 운영시 SEO 측면에서 또 다른 중요 요소인 이미지 SEO 전략 7가지를 소개드리겠습니다. 《목차》 1. 이미지 SEO 란? 2. 대체텍스트 사용 (Alt text) 3. 이미지 캡션
seoul-nba.tistory.com
'┖ ⍟ IT 여행' 카테고리의 다른 글
| 구글 세이프서치 끄는 법, 해제 설정 방법! (For. 블로거, 사이트 운영자, 학부모) (1) | 2023.02.27 |
|---|---|
| SEO 카피라이팅 전략 2편 (블로거, 마케터를 위한) (2) | 2023.02.26 |
| SEO 카피라이팅 전략 1편 (블로거, 마케터를 위한) (2) | 2023.02.25 |
| ChatGPT 뭔가요? 챗GPT로 블로그 글이 써질까? (0) | 2023.02.24 |
| 검색엔진최적화 이미지 SEO 전략 7가지 (2) | 2023.02.22 |
| 백링크란? 백링크 개념 및 주의사항 등 총정리 (1) | 2023.02.20 |
| 티스토리 robots.txt 등록, 위치 (팩트체크!) (8) | 2023.02.19 |
| 티스토리 스킨 수정 HTML 용어 2편 (ol, ul) (1) | 2023.02.18 |
