FrontEngineer JungBam
성능 최적화(webp) 본문
웹피란?
web과 picture가 합쳐진 단어로, 웹에서 사용되는 gif, jpg, png의 이미지 파일을 대체하기 위해 개발된 이미지 포맷이다.
웹피의 장점
1. 가장 큰 장점은 파일 사이즈이다. 특히, gif파일의 경우에는 손실방식으로 저장하면 20~30%까지 줄일 수 있다. 이러한 장점은 이미지 저장 및 사용에 드는 리소스를 줄일 수 있을 것이다.
2. 두번째를 현실적으로 느껴지는 것은 확장자 명이 하나라는 점이다. 여러가지 확장자명을 고민할 필요없이 webp면 된다는 점이다.
3. 구글에서 webp에 대한 소스를 오픈했기 때문에 이를 사용하는데에 어떠한 비용도 추가되지 않는다는 점이 있다.
웹피의 단점
아직 많은 편집기들이 webp를 지원하지 않는 경우가 있고 IE를 포함한 몇몇 브라우저에서는 해당 이미지를 볼 수 없는 문제가 있다.
발표회 때에 피드백 중 하나로 언급되었던 웹피에 대해서 알아보고 실전 프로젝트의 인트로 페이지에 적용했던 gif를 webp로 변환했을 때 40%나 사이즈가 준 것을 확인할 수 있었다. 나머지 gif 및 용량이 큰 png도 webp로 변환하여 용량을 줄이는 작업을 통해 프로젝트를 조금이나마 가볍게 만든 것 같아 나름 뿌듯하다.
반응형
'웹 성능 최적화' 카테고리의 다른 글
preload(컴포넌트, 이미지) (0) | 2023.02.25 |
---|---|
애니메이션 최적화 (0) | 2023.02.25 |
웹 성능 최적화 // 번들링 최적화 (0) | 2023.02.25 |
웹 성능 최적화 // 로드와 렌더링 (0) | 2023.02.24 |
성능 최적화(코드 스플리팅) (0) | 2023.02.16 |
Comments