🙋 이 문서를 보고 나면
- 이미지 최적화를 통해서 애플리케이션 속도를 개선할 수 있다.
- 이미지 최적화를 위한 다양한 방법에 대해 알 수 있다.
🧑🚀 이미지 최적화가 필요했던 이유는?
이미지를 최적화 하기 전에는, 이미지를 불러오는데 최소 10초 이상이 걸렸습니다.
백엔드에서 데이터를 불러오는 지루한 로딩 기간을 유저는 이미 기다렸습니다.
그런 유저에게 10초 이상을 다시 기다리게 하는 것은 가혹합니다.
그리고 애초에 유저는 3초 이상은 기다리지 않는다고 합니다.
그래서 이미지를 최적화해서 이미지 로딩 시간을 줄였고, 로딩 시간을 10초 이상에서 1.5초 이하로 줄일 수 있었습니다.
👎 최적화 전
👍 최적화 후
📝 이미지 로딩이 느린 원인 파악하기
우선, 저희 애플리케이션은 이미지의 수가 많아서 느리다기 보다 에셋들의 크기가 커서 문제가 되는 것이었습니다.
첨부한 GIF에서 보셨듯이, 아래 이미지의 로딩이 굉장히 느립니다.
애플케이션에는 width, height를 조절해서 넣었기 때문에 원본 크기를 생각 못했는데, 알고보니 2024px이었습니다.
다른 페이지에서도 해당 이미지를 2024px로 쓰는 곳이 없는데도, 이렇게 이미지를 크게 사용하고 있었습니다.
그리고 애플리케이션에 들어간 이미지를 모두 살펴보니, 이 이미지 말고도 여러 이미지가 실제 쓰이는 사이즈보다 원본 사이즈의 크기가 컸습니다.
📝 이미지 최적화를 위한 다양한 방법
아래 내용들을 잘 고려하신다면 사용성면에서 더 매끄럽게 만드실 수 있을 것입니다.
저는 1번과 2번만으로도 이미지를 불러오는 속도를 1.5초 이하로 개선할 수 있었습니다.
1. 편집으로 이미지 사이즈 줄이기
이미지 사이즈를 애플리케이션에서 사용하는 적절한 크기로 줄일 수 있습니다.
2. 압축으로 이미지 용량 줄이기
사이즈 뿐만 아니라 용량도 줄여주시면 많이 개선이 됩니다.
image compresser 키워드로 검색하면 많은 이미지 압축 사이트가 나옵니다.
가장 큰 용량을 차지했던 이미지는 압축 후에 9.3MB에서 986KB로 압축되었습니다.
가장 큰 용량을 차지하는 이미지는 압축 후에 9.3MB에서 1.7MB로 바뀌었습니다.
🗜️ 압축 전 용량 (최대 크기 9.3MB)
🗜️ 압축 후 용량 (최대 크기 1.7MB)
3. 이미지 불러오는 타이밍 바꾸기
그리고 Lazy Loading 처리를 적절히 잘 하시면 조금더 매끄럽게 보이실 수 있을거에요.
4. 너무 많은 이미지는 이렇게 대응하기
이미지가 너무 많아진다면 Cloudinary와 같은 CDN을 태워서 빌드하는데 드는 시간을 줄이는 방법도 있습니다.
📘 정리
이미지 최적화를 위한 방법으로 크기 줄이기, 압축하기, 타이밍 바꾸기, CDN 태우기가 있었습니다.
모든 방법을 써야 하는 것은 아니었고,
이미지의 크기를 줄이고, 압축하는 것만으로도 이미지의 용량을 크게 줄일 수 있었습니다.
이미지 로딩 시간을 10초 이상에서 1.5초 이하까지 단축시킬 수 있었습니다.
