Just started using Compose and got this error when trying to display an image of ~500KBs The same image when rendered using xml works fine Something like this is what I did to display the image ``` val image = imageResource id = R drawable img 123 val imageModifier = Modifier preferredHeight 180 dp fillMaxWidth Image image modifier = imageModifier contentScale = ContentScale Crop ```

Just started using Compose and got this error when trying to display an image of ~500KBs. The same image when rendered using xml works fine. Something like this is what I did to display the image:

Copy code

val image = imageResource(id = R.drawable.img_123)
    val imageModifier = Modifier
        .preferredHeight(180.dp)
        .fillMaxWidth()
    Image(image, modifier = imageModifier,
        contentScale = ContentScale.Crop)

Untitled

romainguy

10/29/2020, 6:57 PM

The size of the image on disk doesn’t matter, it’s the image’s uncompressed resolution/size that counts

What resolution is your image?

And in what drawable/ directory do you put it?

That’s a 340 MiB image, so probably too high resolution to fit on the GPU

Usually this happens when the image is put in the wrong drawable directory and gets auto-resized for density

sjthn

10/29/2020, 7:01 PM

The image resolution is 4000x2816 px 🤕. And yes, it's in drawable

But why's this working in xml?

romainguy

10/29/2020, 7:07 PM

in drawable/? No other directory?

So drawable/ == drawable-mdpi/, or 160 dpi

Which means at load time your image is scaled by a factor of > 4x

So yeah, it’ll be too big

Put it in drawable-nodpi/ instead (or in the proper density directory)

sjthn

10/29/2020, 7:08 PM

in drawable/? No other directory?

It's in drawable w/o any qualifiers

romainguy

10/29/2020, 7:13 PM

Ok so please move it 🙂

👍 1