การเพิ่มประสิทธิภาพสำหรับรูปภาพ

การทำงานกับรูปภาพอาจทำให้เกิดปัญหาด้านประสิทธิภาพได้อย่างรวดเร็วหากคุณไม่ได้ ระวังให้ดี คุณเจอ 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 เพื่อตรวจสอบว่า แพ็กเกจของคุณมีขนาดไม่ใหญ่เกินไฟล์ภาพที่กำหนด ลดขนาดหรือ ควรพิจารณาวางภาพบนเซิร์ฟเวอร์ และดาวน์โหลดเฉพาะเมื่อจำเป็นเท่านั้น