.avif/.avifs Format กับการนำไปใช้บน Native Android Application

https://web.dev/compress-images-avif/

สวีดัด สวัสดีผู้ที่หลงเข้ามาอ่านทุกท่าน วันนี้เราจะมาพูดถึงการนำไฟล์ .avif/.avifs มาใช้บน Native Android Application โดยก่อนอื่นหลายๆคนคงสงสัยว่าไฟล์ .avif คือไฟล์อะไรกันแน่?

มาเริ่มกันที่ไฟล์ .avif คืออะไร?

AVIF ย่อมาจาก AV1 Image File Format หรือพูดง่ายๆ ก็คือ ไฟล์รูปภาพนั่นแหละ แต่ไม่ใช่ไฟล์รูปภาพธรรมดานะ เพราะเป็นไฟล์รูปภาพแบบใหม่ล่าสุดยังไงล่ะ ซึ่ง AVIF ถูกพัฒนาโดยสมาคมอุตสาหกรรมที่ไม่แสวงหาผลกำไรที่ชื่อว่า Alliance for Open Media หรือ AOMedia ซึ่งเป้าหมายของเค้าก็คือ ตั้งใจจะนำ .avif มาใช้แทน .jpg ที่เราใช้กันอย่างแพร่หลายในปัจจุบัน เพราะว่า .avif ใช้การบีบอัดไฟล์ขั้นสูงที่ทำให้ขนาดของไฟล์เล็กลงกว่า .jpg มาก และยังคงไว้ซึ่งคุณภาพ ความลึกของสีที่มาก ทำให้ไฟล์ภาพนั้นมีรายละเอียดที่ดีกว่า

นอกจาก avif ก็ยังมี avifs ด้วยนะรู้ยัง?

AVIFS หรือ AVIF Image Sequence คือ ไฟล์ที่ประกอบด้วย ไฟล์ .avif หลายๆไฟล์มารวมกัน ลักษณะคล้ายๆ ไฟล์ .gif หรือ .mp4 พูดง่ายๆก็คือเป็นไฟล์ภาพเคลื่อนไหวนั่นเอง

หลังจากที่รู้จักไฟล์ .avif/.avifs กันแล้ว เราลองเอามาใช้ในการทำ Native Android Application กันดีกว่า

โดยผมจะแบ่งการเรียกใช้ไฟล์ .avif/.avifs เป็น 2 รูปแบบดังนี้

1. เรียกใช้ผ่าน url

ถ้าหากว่าเป็น Android 12.0 ขึ้นไป การเรียกรูปภาพผ่าน url เราจะเรียกผ่าน Glide ซึ่งเป็น library ยอดนิยมสำหรับชาว Android Developer ได้เลย โดยที่ Glide จะต้องอัพเดตเป็น version ตั้งแต่ 4.14.2 ขึ้นไปนะ ซึ่งการ implement Glide ก็เอาไอ่ก้อนนี้ไปแปะใน build.gradle แล้วกด sync ได้เล้ยยย

implementation 'com.github.bumptech.glide:glide:4.14.2'

หลังจากที่เรา sync library เรียบร้อยแล้ว เราก็มาเรียกใช้กันเลย ซึ่งการเรียกใช้ก็ง่ายมาก

fun ImageView.setUpImageWithUrl(url:String){
  Glide.with(context).load(url).into(this)
}

binding.Imageview.setUpImageWithUrl("https://aomediacodec.github.io/av1-avif/testFiles/Link-U/kimono.avif")

เพียงเท่านี้เราก็สามารถเรียกรูปมาใช้ได้แล้ว แต่ถ้าใครทำตามนี้แล้วรูปยังไม่ขึ้น ให้ไปขอ Internet Permission ก่อนโดยการใส่โค้ดก้อนนี้ลงไปใน manifest ได้เลย

<uses-permission android:name="android.permission.INTERNET"/>

2. เรียกใช้ผ่าน local storage

การเรียกใช้ผ่าน local storage นั้นจะยุ่งยากขึ้นซักหน่อย เนื่องจากว่า Android Studio นั้นยังไม่ได้รองรับ .avif และ .avifs อย่างเต็มที่ ทำให้เราไม่สามารถ import ไฟล์เข้าไปไว้ที่ res>drawable ได้เหมือนพวก .jpg, .png, .webp โดยเราจะต้อง import ไฟล์ .avif และ .avifs ไปไว้ใน assets ทำให้วิธีการเรียกใช้จะลำบากขึ้นซักหน่อย

main > new > Directory

เลือก assets

นำไฟล์ .avif เข้ามาใส่ใน assets

หลังจากที่เรา import ไฟล์เข้ามาได้แล้ว ก่อนที่จะนำมาใช้งาน เราต้องทำการ convert ให้กลายเป็น byteArray ซะก่อน

private fun inputStreamToBytes(inputStream : InputStream): ByteArray? {
        val buffer = ByteArrayOutputStream(64 * 1024)
        try {
            var nRead: Int
            val data = ByteArray(16 * 1024)
            while (inputStream.read(data).also { nRead = it } != -1) {
                buffer.write(data, 0, nRead)
            }
            buffer.close()
        } catch (e: IOException) {
            return null
        }
        return buffer.toByteArray()
    }

val bytes = inputStreamToBytes(context.assets.open("kimono.avif"))

จากนั้นก็นำไปเรียกผ่าน Glide เหมือนข้างบนได้เลย

fun ImageView.setupImageWithLocal(bytes :  ByteArray?){
        try {
            Glide.with(context).load(bytes).placeholder(R.drawable.ic_launcher_foreground).into(this)
        }catch (e : IOException){
            Toast.makeText(context,e.message,Toast.LENGTH_LONG).show()
        }
    }

binding.Imageview.setupImageWithLocal(bytes)

เพียงเท่านี้เราก็จะสามารถเรียกใช้ไฟล์ .avif และ .avifs บน Native Andriod Application ได้แล้ว ง่ายมากเลยใช่มั้ยล่ะ?

แต่ไม่ว่าจะเป็นการเรียกใช้ url หรือ local ถ้าเป็น Android ที่เวอร์ชั่นต่ำกว่า Android 12.0 เราจะต้องใช้ libavif เข้ามาช่วย ซึ่ง library นี้ จะทำการเพิ่มตัว decoding เข้าไปเพื่อให้ Glide สามารถ decode ไฟล์ .avif และ .avifs ได้นั่นเอง ซึ่งวิธีการเรียกใช้ก็เหมือนกับข้างบนเลย เพราะว่า libavif ได้ทำการ customize ตัว Glide ให้เราแล้วนั่นเอง

ลองไปโหลด libavif มาเล่นกันดูได้เลย

GitHub — AOMediaCodec/libavif: libavif — Library for encoding and decoding .avif files

หวังว่าบทความนี้จะเป็นประโยชน์ให้กับท่านผู้ผ่านมาพบประสบเจอบทความนี้ ไม่มากก็น้อย หากมีข้อผิดพลาดประการใด ขอกราบกรานไว้ ณ ที่นี้

เจอกันใหม่เมื่อมีอารมณ์เขียนจ้า บ๊ะบาย