การทำงานกับรูปภาพอาจทำให้เกิดปัญหาด้านประสิทธิภาพได้อย่างรวดเร็วหากคุณไม่ได้
ระวังให้ดี คุณเจอ OutOfMemoryError
ได้ง่ายๆ ขณะทำงาน
ที่มีบิตแมปขนาดใหญ่ ทำตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้เพื่อให้แอปของคุณมีประสิทธิภาพที่
ดีที่สุด
โหลดเฉพาะขนาดของบิตแมปที่คุณต้องการ
สมาร์ทโฟนส่วนใหญ่มีกล้องความละเอียดสูงที่ผลิตไฟล์ภาพขนาดใหญ่ ถ้า ที่คุณกําลังแสดงรูปภาพบนหน้าจอ คุณต้องลดความละเอียดของ หรือโหลดรูปภาพให้เท่ากับขนาดของคอนเทนเนอร์รูปภาพเท่านั้น การโหลดภาพที่มีขนาดใหญ่กว่าที่ต้องการอย่างต่อเนื่องอาจทำให้ใช้แคชของ GPU จนหมด ซึ่งนำไปสู่ การแสดงผล UI ที่มีประสิทธิภาพต่ำลง
วิธีจัดการขนาดรูปภาพ
- ลดขนาดไฟล์ภาพให้มีขนาดเล็กที่สุด (โดยไม่ส่งผลกระทบต่อ ภาพเอาต์พุต)
- ลองแปลงรูปภาพเป็นรูปแบบ WEBP แทน JPEG หรือ PNG
- แสดงรูปภาพขนาดเล็กลงสำหรับหน้าจอที่มีความละเอียดแตกต่างกัน (ดูเคล็ดลับที่ 3)
- ใช้ไลบรารีการโหลดรูปภาพ ซึ่งจะปรับขนาดรูปภาพให้พอดีกับ ขนาดการแสดงผลบนหน้าจอของคุณ ซึ่งจะช่วยปรับปรุงประสิทธิภาพการโหลดของ หน้าจอของคุณ
ใช้เวกเตอร์บนบิตแมปเมื่อเป็นไปได้
เมื่อทำการนำเสนอสิ่งที่เป็นภาพบนหน้าจอ คุณจะต้องตัดสินใจว่าสิ่งนั้นจะสามารถแสดงได้หรือไม่ แสดงเป็นเวกเตอร์หรือไม่ เลือกใช้ภาพเวกเตอร์มากกว่าบิตแมป เนื่องจาก ไม่แตกเป็นพิกเซลเมื่อปรับขนาดเป็นขนาดต่างๆ อย่างไรก็ตาม ไม่ใช่ทุกอย่าง สามารถแสดงเป็นเวกเตอร์ - แปลงรูปภาพที่ถ่ายด้วยกล้องไม่ได้ ลงในเวกเตอร์
ระบุทรัพยากรสำรองสำหรับหน้าจอขนาดต่างๆ
หากต้องการจัดส่งรูปภาพด้วยแอป ลองพิจารณาจัดหารูปภาพขนาดต่างๆ เนื้อหาสำหรับความละเอียดของอุปกรณ์ต่างๆ วิธีนี้จะช่วยลดขนาดการดาวน์โหลดได้ บนอุปกรณ์ต่างๆ และปรับปรุงประสิทธิภาพเนื่องจากแอปจะโหลดน้อยลง รูปภาพที่มีความละเอียดต่ำลง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ บิตแมปสำรองสำหรับอุปกรณ์ขนาดต่างๆ ลองดูทางเลือก เอกสารบิตแมป
เมื่อใช้ ImageBitmap
โปรดโทรหา prepareToDraw
ก่อนวาด
เมื่อใช้ ImageBitmap
ให้เริ่มกระบวนการอัปโหลดพื้นผิวไปยัง
GPU เรียกใช้ ImageBitmap#prepareToDraw()
ก่อนวาดจริง ช่วงเวลานี้
ช่วย GPU ในการเตรียมพื้นผิวและปรับปรุงประสิทธิภาพในการแสดง
ภาพบนหน้าจอ ไลบรารีการโหลดรูปภาพส่วนใหญ่ดำเนินการเพิ่มประสิทธิภาพนี้อยู่แล้ว แต่
ถ้าคุณทำงานกับชั้นเรียน ImageBitmap
ด้วยตัวเอง นี่คือ
ที่ควรคำนึงถึง
ต้องการส่ง Int
DrawableRes
หรือ URL เป็นพารามิเตอร์ไปยัง Composable แทน Painter
เนื่องจากการจัดการกับรูปภาพมีความซับซ้อน (เช่น การเขียนเครื่องหมายเท่ากับ
ฟังก์ชันสำหรับ Bitmaps
จะมีราคาแพงสำหรับการคำนวณ) API Painter
คือ
ไม่ได้ทำเครื่องหมายว่าเป็นคลาส Stable อย่างชัดแจ้ง ชั้นเรียนที่ไม่เสถียรสามารถ
นำไปสู่การจัดองค์ประกอบใหม่ที่ไม่จำเป็น เนื่องจากคอมไพเลอร์ไม่สามารถอนุมานได้โดยง่ายว่า
ข้อมูลดังกล่าวเปลี่ยนไปแล้ว
ดังนั้นจึงควรส่ง URL หรือรหัสทรัพยากรที่ถอนออกได้เป็นพารามิเตอร์
ไปยัง Composable แทนการส่ง Painter
เป็นพารามิเตอร์
// Prefer this:
@Composable
fun MyImage(url: String) {
}
// Over this:
@Composable
fun MyImage(painter: Painter) {
}
อย่าเก็บบิตแมปในหน่วยความจำนานกว่าที่ต้องการ
ยิ่งคุณโหลดบิตแมปลงในหน่วยความจำมากเท่าใด คุณก็ยิ่งมีโอกาสที่จะเรียกใช้บิตแมปมากขึ้นเท่านั้น
หน่วยความจําของอุปกรณ์เต็ม เช่น หากโหลดรายการรูปภาพจำนวนมาก
Composable บนหน้าจอ ให้ใช้ LazyColumn
หรือ LazyRow
เพื่อให้แน่ใจว่าหน่วยความจำ
เมื่อเลื่อนดูรายการขนาดใหญ่
อย่าทำแพ็กเกจรูปภาพขนาดใหญ่ด้วยไฟล์ AAB/APK
สาเหตุอันดับต้นๆ ที่ทำให้การดาวน์โหลดแอปมีขนาดใหญ่คือภาพกราฟิก ที่อยู่ในไฟล์ AAB หรือ APK ใช้เครื่องมือวิเคราะห์ APK เพื่อตรวจสอบว่า แพ็กเกจของคุณมีขนาดไม่ใหญ่เกินไฟล์ภาพที่กำหนด ลดขนาดหรือ ควรพิจารณาวางภาพบนเซิร์ฟเวอร์ และดาวน์โหลดเฉพาะเมื่อจำเป็นเท่านั้น
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- ImageBitmap กับ ImageVector {:#bitmap-vs-vector}
- บันทึกสถานะ UI ใน Compose
- ระยะของ Jetpack Compose