WebP는 Google에서 개발한 이미지 형식으로, 인터넷에서 흔히 사용되는 GIF, JPG, PNG 포맷을 대체하기 위해 개발됐습니다.
WebP는 이미지 품질이 같을 때 WebP 파일의 크기가 다른 포맷의 파일에 비해 훨씬 작습니다. 때문에 이미지 로딩 속도도 빨라집니다.
모바일 환경에서 데이터 로딩 속도와 저장 공간이 중요하기 때문에 WebP 형식으로 변환하여 이미지 파일 크기를 줄이고자 했습니다.
구현 내용
이미지 파일을 손실 압축하여 WebP 형식으로 변환하는 로직을 추가했습니다.
JPG 형식은 손실 압축을 사용하여, WebP로 무손실 압축하게 되면 오히려 파일 크기가 더 커질 수 있습니다.
손실 압축하여 WebP 형식으로 변환할 때, 8.86MB → 254.3KB로 크기가 줄어도 비슷한 이미지 품질을 유지하는 것을 확인했습니다.
로딩 속도 비교
안드로이드 스튜디오를 사용하여 모바일 환경에서 원본 URL과, 변환된 이미지 URL의 이미지 로딩 속도를 비교해보았습니다.
다음은 캐시 OFF를 설정하고 10번의 반복 테스트를 수행했을 때의 결과입니다.
이슈 번호 (#311 )
WEBP
WebP는 Google에서 개발한 이미지 형식으로, 인터넷에서 흔히 사용되는 GIF, JPG, PNG 포맷을 대체하기 위해 개발됐습니다. WebP는 이미지 품질이 같을 때 WebP 파일의 크기가 다른 포맷의 파일에 비해 훨씬 작습니다. 때문에 이미지 로딩 속도도 빨라집니다.
모바일 환경에서 데이터 로딩 속도와 저장 공간이 중요하기 때문에 WebP 형식으로 변환하여 이미지 파일 크기를 줄이고자 했습니다.
구현 내용
이미지 파일을 손실 압축하여 WebP 형식으로 변환하는 로직을 추가했습니다.
로딩 속도 비교
안드로이드 스튜디오를 사용하여 모바일 환경에서 원본 URL과, 변환된 이미지 URL의 이미지 로딩 속도를 비교해보았습니다. 다음은 캐시 OFF를 설정하고 10번의 반복 테스트를 수행했을 때의 결과입니다.
*파일마다 압축되는 정도가 다르기 때문에 참고만 해주시길 바랍니다.
원본 파일(PNG 형식, 8.86MB)
변환 파일(WebP 형식, 254.3KB)
상세
- 1337ms → 555ms - 1044ms → 394ms - 994ms → 370ms - 2626ms → 429ms - 1050ms → 373ms - 2163ms → 414ms - 999ms → 393ms - 1089ms → 491ms - 1049ms → 434ms - 926ms → 297ms변경 내용