inspector:image

Image cache and memory runtime analysis

항목	내용
Invoke	/inspector:image
Category	kobic-development
Complexity	simple
MCP Servers	flutter-inspector

/inspector:image — 이미지 메모리 진단#

한마디로#

앱이 보여주는 사진들이 메모리를 얼마나 잡아먹고 있는지 들여다보는 청진기입니다. 냉장고에 음식이 너무 꽉 찼는지, 상한 게 있는지 열어보고 정리해 주는 것과 같아요.

누가·언제 쓰나요#

앱이 갑자기 느려지거나 "메모리 부족" 경고가 뜰 때
이미지가 잘 안 뜨거나 로딩이 답답하게 느릴 때
사진이 많이 들어간 화면에서 앱이 멈추거나 꺼질 때(메모리 초과)

무엇을 해주나요#

지금 이미지 캐시가 얼마나 차 있는지(예: 100MB 중 50MB 사용, 50%)와 전체 메모리 사용량을 알려줍니다.
문제가 될 만한 이미지를 찾아내고 점수(예: 65점, C등급)와 개선 제안을 줍니다. (예: "이 이미지는 화면 크기보다 4배 큽니다" → 크기를 줄여 쓰라는 제안)
쌓인 캐시를 비워서 메모리를 다시 확보해 줍니다.

어떻게 쓰나요#

# 지금 캐시 상태 확인
/inspector/image stats

# 문제 있는 이미지 분석
/inspector/image warnings

# 만료된 캐시 비우기
/inspector/image clear expired

clear 뒤에는 비울 대상을 골라 쓸 수 있습니다: all(전체) / memory(메모리) / disk(디스크) / expired(만료된 것).

안에서 무슨 일이 벌어지나요#

상황별로 아래 순서대로 점검합니다.

메모리 경고가 떴을 때: 현재 사용량 확인 → 문제 이미지 찾기 → 캐시 비우기 → 이미지 크기 줄이기(cacheWidth/cacheHeight) 검토
이미지 로딩이 느릴 때: 캐시 적중률 확인 → 네트워크 다운로드 점검 → 이미지 용량 최적화 검토
앱이 메모리 초과로 꺼질 때: 최대 메모리 확인 → 너무 큰 이미지 찾기 → 큰 이미지 최적화 → 최대 캐시 크기 조정 검토

⚙️ 상세 옵션·실행 명세 (개발자 / AI 에이전트용)

Triggers#

Image cache issues
Memory usage warnings
Image loading performance

MCP Tools#

img_get_cache_stats#

Returns image cache statistics.

Response example:

{
   " cache " : {
     " currentSize " : 52428800,
     " currentSizeFormatted " :  " 50 MB " ,
     " maximumSize " : 104857600,
     " maximumSizeFormatted " :  " 100 MB " ,
     " usagePercent " : 50,
     " liveImageCount " : 25
  },
   " memory " : {
     " currentUsage " : 157286400,
     " currentUsageFormatted " :  " 150 MB " 
   }
}

img_analyze_warnings#

Analyzes image-related warnings and issues.

Parameters:

threshold: Warning threshold (MB)

Response example:

{
   " warnings " : [
    {
       " type " :  " oversized " ,
       " severity " :  " high " ,
       " message " :  " Image is 4x larger than display size " ,
       " image " :  " banner_home.png " ,
       " suggestion " :  " Recommend using cacheWidth/cacheHeight " 
     }
  ],
   " score " : 65,
   " grade " :  " C " 
 }

img_clear_cache#

Clears the image cache.

Parameters:

type: Clear type (all, memory, disk, expired)

Common Diagnostics#

Memory warning#

1. img_get_cache_stats - >   Check current usage
2. img_analyze_warnings - >   Identify problematic images
3. img_clear_cache - >   Clear cache
4. Consider applying cacheWidth/cacheHeight

Slow image loading#

1. img_get_cache_stats - >   Check cache hit rate
2. /inspector/network - >   Check downloads
3. Review image size optimization

App crash (OOM)#

1. img_get_cache_stats - >   Check peak memory
2. img_analyze_warnings - >   Find oversized images
3. Apply large image optimization
4. Consider adjusting maximum cache size

Best Practices#

Image Loading Patterns#

// CORRECT: Specify cache size
Image.network(
  imageUrl,
  cacheWidth: 200,
  cacheHeight: 200,
)

// CORRECT: Use CachedNetworkImage
CachedNetworkImage(
  imageUrl: imageUrl,
  memCacheWidth: 200,
  placeholder: (context, url) => CircularProgressIndicator(),
)

// WRONG: Loading at original size
Image.network(imageUrl)  // 4000x4000 image displayed at 100x100

Examples#

Check cache status#

/inspector/image stats

Analyze image issues#

/inspector/image warnings

Clear cache#

/inspector/image clear expired

References#

Detailed implementation: .claude/agents/flutter-inspector-image.md
Master inspector: .claude/commands/inspector.md
Image optimization: .claude/agents/flutter-image-optimizer.md