이미지가 이러한 시스템에서 필요한 것보다 큰 경우 특히 저사양 장치에서 성능 저하를 유발할 수 있으며 목록 보기에서와 같이 이미지가 많은 경우에는 성능 하락에 영향이 있으며, 심한 경우에는 앱이 크래시가 발생할 수도 있습니다.
태그 추가
main에 아래 코드를 추가해줍니다. 아래와 같이 추가하게 되면 이제 디버그 콘솔에서 확인할 수 있습니다.
debugInvertOversizedImages = true;
이미지 조절
이미지 assets/images/signin/onboarding_1.png의 디스플레이 크기는 639×400이지만 디코딩 크기는 960×600이며 추가로 1666KB를 사용합니다. 사전에 자산 크기 조정, 639의 cacheWidth 매개변수, 400의 cacheHeight 매개변수 제공 또는 ResizeImage 사용을 고려하십시오.
즉, 이미지를 재조정하여 리소스를 최적화 하라고 합니다.
인스펙터 확인
앱 실행 후 돋보기 모양의 `Widget Inspector`를 누르고, 이미지 모양의 `Highlight oversized images`를 눌러주세요.
리소스가 초과되어 사용되는 이미지들은 반전되어 나오게 됩니다. 해당 이미지를 디버그 콘솔에서 나온 사이즈로 변경해 줍니다. 사용할 width, height은 별도로 주고 cacheWidth, cacheHeight를 변경하거나 추가하시면 됩니다.
이미지 최적화를 하게 되면 위 처럼 정상적으로 이미지가 노출됩니다.
성능테스트
`profile` 모드로 진행해야 조금 더 정확하게 확인이 가능합니다.
메모리 사용량을 확인하기 위해서는 `VScode` 기준 `F1`을 누른 후 `Dart: Open DevTools Memory Page`으로 검색하게 되면 확인이 가능합니다.
이미지 최적화 전
이미지 최적화 후 기존 이미지가 4k 해상도에 용량이 150mb가 되는 형태로 진행했었지만, 엄청난 차이를 보여주지는 못했습니다.
단, 리스트 형태로 많이 나온다면 성능향상폭은 더 커질 것으로 보고 있습니다.
