coil-compose

Name: coil-compose
Availability: InStock
Author: kotlinknight

Configure Coil image loading in Jetpack Compose with AsyncImage variants.

Updated Mar 17, 2026

Search Tags:#android #jetpack-compose #image-loading #asyncimage #coil #rememberasyncimagepainter #subcomposeasyncimage

Ready to run

npx skills add https://github.com/kotlinknight/NutriSoloAndroid --skill coil-compose-kotlinknight

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: coil-compose
Source: https://github.com/kotlinknight/NutriSoloAndroid/tree/main/.agents/skills/coil-compose
Command: npx skills add https://github.com/kotlinknight/NutriSoloAndroid --skill coil-compose-kotlinknight

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Efficiently load images in Jetpack Compose while balancing memory usage and UX by selecting the appropriate Coil variant (AsyncImage, SubcomposeAsyncImage, rememberAsyncImagePainter) and configuring ImageRequest correctly.

Core Features & Use Cases

Variant guidance: Choose AsyncImage for typical loads, SubcomposeAsyncImage for fully custom loading states (not in lists), rememberAsyncImagePainter when a Painter is strictly required, and always provide explicit size for rememberAsyncImagePainter.
ImageRequest best practices: Configure crossfade, size, scale, and transformations to avoid over-fetching and memory waste.
Performance considerations: Avoid SubcomposeAsyncImage inside LazyColumn/LazyRow due to subcomposition costs; use AsyncImage with proper placeholders for smooth lists.

Quick Start

Load a sample image in a Compose screen using AsyncImage with an ImageRequest configured for a 64dp size and a placeholder.

Frequently Asked Questions about coil-compose

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

FAQPage Schema

What's the best way to load images in Jetpack Compose using Coil?▼

The best way to load images in Jetpack Compose is using Coil's AsyncImage for standard loads, configuring ImageRequest with crossfade, explicit size, and transformations to optimize memory usage and ensure smooth UX.

When should I use SubcomposeAsyncImage instead of AsyncImage for image loading?▼

Use SubcomposeAsyncImage for fully custom loading states instead of AsyncImage when you need composable placeholders, but avoid it inside LazyColumn or LazyRow due to high subcomposition costs that degrade list performance.

How do I configure rememberAsyncImagePainter to avoid memory waste?▼

To configure rememberAsyncImagePainter and avoid memory waste, always provide explicit size dimensions in your ImageRequest; use this variant strictly when a Painter object is required rather than a standard composable.

Why does my Jetpack Compose image loading cause jank in LazyColumn lists?▼

Jetpack Compose image loading causes jank in LazyColumn lists if you use SubcomposeAsyncImage, which incurs subcomposition costs; switch to AsyncImage with proper placeholders for smooth list performance.