ImageView.src in layout XML blocks main thread

Question

I wanted a picture background. When I set the background property of the root element to the picture, it was distorted due to aspect ratio difference. After reading StackOverflow answers, I changed it to,

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/wallpaper1"/>

The image is a 300KB full HD image. It looks good, but the problem is that when I start the activity, there is a stutter and a warning message.

I/Choreographer: Skipped 38 frames!  The application may be doing too much work on its main thread.

When I removed the ImageView, there was no such problem. Should I not use 'src' in the layout XML, and load the image on my own using a background thread?

Answer 1

Try to convert image in to .webp format to reduce image size, and use lossless encoding type to keep image quality.

In Android Studio

1. right click on image asset

2. click Convert to WebP

3. Choose use lossless encoding and tap (API 18+)