LogoSkills

inspector/image

Image cache and memory runtime analysis

항ëĒŠë‚´ėšŠ
Categorypetmedi-development
Complexitysimple
MCP Serversflutter-inspector

/inspector/image#

Context Framework Note: Activated when debugging image-related performance issues.

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