coil-compose

Implements image loading in Compose and Compose Multiplatform using Coil 3 APIs.

Updated Jul 1, 2026
One-click install
npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill coil-compose-w0lzard
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: coil-compose
Source: https://github.com/w0lzard/Wolzard-s-Marketplace/tree/main/plugins/personal-skills/skills/coil-compose
Command: npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill coil-compose-w0lzard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Loading images in Jetpack Compose and Compose Multiplatform involves subtle API choices — picking the wrong Coil composable causes memory waste, scroll jank, or KMP compile errors. This Skill provides decision guidance and correct patterns for Coil 3 image loading. ## Core Features & Use Cases - API Selection Guidance: Choose between AsyncImage, SubcomposeAsyncImage, and rememberAsyncImagePainter based on your use case, with a decision table. - Performance Patterns: Avoid subcomposition overhead in LazyColumn lists and prevent oversized bitmap loading with explicit size configuration. - KMP Setup: Configure Coil 3 in commonMain with LocalPlatformContext, singleton ImageLoader, and platform network engines like coil-network-ktor3. - Use Case: You are building a Compose Multiplatform app with an image-heavy feed. Use this Skill to implement AsyncImage with placeholders, crossfade, and a shared ImageLoader that works on Android, iOS, and Desktop. ## Quick Start Show me how to load a network image into a circular avatar composable in my Compose Multiplatform app using Coil 3.

Frequently Asked Questions about coil-compose

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load images in Jetpack Compose with Coil 3?

Use AsyncImage with an ImageRequest built from LocalPlatformContext.current, passing the URL, crossfade, and placeholder or error painters. AsyncImage infers the target size from layout constraints automatically, avoiding oversized bitmap loads.

AsyncImage vs SubcomposeAsyncImage vs rememberAsyncImagePainter — which should I use?

Use AsyncImage for standard image loading, SubcomposeAsyncImage only when you need fully custom loading and error composables, and rememberAsyncImagePainter only when a Painter is required for Canvas or Icon. Never use SubcomposeAsyncImage inside LazyColumn due to subcomposition overhead.

Does Coil 3 work with Compose Multiplatform on iOS and Desktop?

Yes, Coil 3 is fully multiplatform and its AsyncImage APIs work identically in commonMain. Use LocalPlatformContext.current instead of LocalContext.current, and add platform network engines such as coil-network-ktor3 for KMP networking.

Why does rememberAsyncImagePainter cause high memory usage?

rememberAsyncImagePainter does not infer display size from layout constraints, so without an explicit .size() it loads the image at original dimensions. A 4000x3000 photo shown at 64dp still occupies the full bitmap in memory, causing OOM crashes in lists.

How do I share one ImageLoader instance across my app?

Provide a singleton ImageLoader via Hilt on Android, or call SingletonImageLoader.setSafe once at startup in KMP. With the coil-compose module, AsyncImage uses the singleton automatically; coil-compose-core requires passing imageLoader explicitly.