문제 상황:
페이지를 만들고 통신을 시도해보고 있는 중에 이미지를 불러와야할 일이 생겼다. 당장 데이터베이스에는 png 를 올려놨는데 이게 로딩되는 속도가 조금 느려보였다. 그러다 문득 생각난 게 아, 이미지! webp! 였다. webp는 구글이 만든 로딩 속도를 줄여주기 위해 개발한 이미지 포맷이라서 webp를 사용하라는 글을 본 적이 있다.
그럼 여기서 궁금한 점이 생긴다.
webp를 쓸 건데 언제?
- 사용자가 서비스에서 이미지를 올릴 때 webp로 변환시켜서 DB에 올릴지
- DB에는 사용자가 올린 그대로 올리고 가져와서 출력할 때 webp로 변환할 건지
또 webp로 변환할 때
- 브라우저에서 이미지 변환?
- 서버에서 변환하고 제공?
이렇게 시점이 갈리는 것 같았다.
이에 대한 답을 정리해보자.
언제 WebP를 쓸 것인가?
사용자가 서비스에서 이미지를 올릴 때 WebP로 변환하여 DB에 올리기
장점:
저장 공간 절약: 이미지를 WebP로 변환하여 저장하면 파일 크기를 줄일 수 있습니다.
클라이언트 성능 향상: 클라이언트는 이미 최적화된 이미지를 받아오기 때문에 페이지 로딩 속도가 빨라질 수 있습니다.
일관된 이미지 형식: 서버에 저장된 모든 이미지가 동일한 형식으로 유지되므로 일관된 이미지 처리와 최적화가 가능합니다.
단점:
서버 부하 증가: 이미지를 업로드할 때마다 변환 작업을 수행해야 하므로 서버의 부하가 증가할 수 있습니다.
변환 실패 가능성: 변환 과정에서 문제가 발생할 수 있으며, 이로 인해 사용자에게 오류가 발생할 수 있습니다.
DB에는 사용자가 올린 그대로 저장하고, 가져와서 출력할 때 WebP로 변환
장점:
유연성: 원본 이미지를 저장하면 다양한 형식으로 제공할 수 있으며, 필요에 따라 여러 변환을 지원할 수 있습니다.
저장 공간 절약: 원본 이미지만 저장하고 필요할 때만 WebP로 변환하면 저장 공간을 절약할 수 있습니다.
단점:
클라이언트 성능 문제: 클라이언트가 이미지를 요청할 때마다 변환이 발생하므로 로딩 시간이 증가할 수 있습니다.
서버 성능 문제: 실시간으로 변환 작업을 수행하므로 서버의 성능에 영향을 미칠 수 있습니다.
WebP 변환 방식
클라이언트 측 WebP 변환
장점: 클라이언트에서 직접 변환하면 서버의 부하를 줄일 수 있습니다.
단점: 클라이언트의 성능과 효율성 문제로 인해 일반적으로 사용되지 않으며, 브라우저의 지원 범위에 따라 호환성 문제가 발생할 수 있습니다.
사용 예: 클라이언트 측에서 WebP를 변환하는 것은 보통 성능과 호환성 문제로 인해 권장되지 않습니다.
서버 측 WebP 변환
장점: 서버에서 이미지 변환을 처리하면 클라이언트의 성능 문제를 피할 수 있으며, 일관된 이미지 품질과 최적화를 제공할 수 있습니다.
단점: 서버에서 변환 작업을 수행하므로 서버 자원과 처리 시간이 소모될 수 있습니다.
사용 예: 서버 측에서 이미지를 WebP로 변환하여 클라이언트에 제공하는 것이 일반적으로 권장됩니다. 이는 클라이언트의 성능 문제를 피하고 효율적인 이미지 제공을 가능하게 합니다.
결론
이미지 저장 방식: 이미지 저장 방식은 사용자의 요구와 서버 자원에 따라 선택할 수 있습니다. WebP 변환을 사용하면 저장 공간 절약과 빠른 페이지 로딩을 기대할 수 있습니다. 서버의 부하를 감안하여 적절한 방식을 선택하는 것이 좋습니다.
변환 방식: 서버 측에서 이미지를 WebP로 변환하는 것이 클라이언트의 성능과 호환성 문제를 피할 수 있으며, 일반적으로 추천됩니다.
