공대생 공부일지

문제 상황이전에 올렸던 webp 확장자 변환 코드https://2junbeom.tistory.com/162 [개발일지] webp 확장자를 통한 이미지 제공 최적화 작업공식 홈페이지 개발 중 프론트엔드에서 이미지를 띄우는 데 시간이 너무 오래 걸린다는 문제점을 확인했다. 이미지의 해상도가 너무 높아, 이미지의 크기가 큰 것이 문제였다.이렇게 큰 크기의2junbeom.tistory.com로컬에서는 잘 돌아 갔는데 서버에서는 에러가 발생하는 문제가 발견되었다 로그 탐색우선 로그를 살펴봤지만, WARN c.t.t.g.e.GlobalExceptionHandler - webp 확장자로 이미지 변환에 실패했습니다.내가 작성한 기본 에러 메세지만 글로벌 핸들러에 잡히고 추가적인 로그는 발견하지 못했다. 좀 더 자세한..

공식 홈페이지 개발 중 프론트엔드에서 이미지를 띄우는 데 시간이 너무 오래 걸린다는 문제점을 확인했다. 이미지의 해상도가 너무 높아, 이미지의 크기가 큰 것이 문제였다.이렇게 큰 크기의 이미지가 동시에 8개가 제공되니, UX가 낮아질 것이 분명했고 대책을 찾고자 했다. 이를 해결하기 위해 처음엔 해상도를 낮추는 방식을 생각했었다. 여러 가지 해결책을 찾아보던 중 webp라는 확장자를 알게 되었고, 이를 프로젝트에 적용한 내용을 정리해보려 한다. Webp 확장자란?WebP는 구글에서 개발한 이미지 파일 형식으로, JPEG, PNG, GIF와 같은 기존 이미지 형식에 비해 더 높은 압축률을 제공한다.WebP는 두 가지의 압축 방식을 대표적으로 제공한다.손실 압축 (Lossy Compression): JPEG..