skills.rest
kotlinknight
kotlinknightCOMMUNITY
Explore all skills by this author →
GitHub

coil-compose

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
One-click install
npx skills add https://github.com/kotlinknight/NutriSoloAndroid --skill coil-compose-kotlinknight
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
rock-hurock-hu

coil-compose

Load remote images in Jetpack Compose using Coil's AsyncImage.

Community
Intermediate
jperezdelrealjperezdelreal

performance-benchmarking

Benchmark mobile app startup, rendering, memory, and battery performance on Android and iOS.

Community
Advanced
bidahbidah
28

expo-ui-jetpack-compose

Build Android-native Jetpack Compose components in Expo React Native projects.

Community
Intermediate
AbdullahmohammadarefAbdullahmohammadaref

react-ui-patterns

Standardize loading, error, and optimistic UI state handling in React components.

Community
Intermediate