จัดการภาพที่ใช้ในบนแอนดรอยด์อย่างไรให้ถูกต้อง

จริงๆเรื่องการจัดการกับไฟล์ภาพที่ใช้ในแอปบนแอนดรอยด์เรียกได้ว่าเป็นปัญหาหลักๆของนักพัฒนาหลายๆคนเลยก็ว่าได้ เพราะบนแอนดรอยด์นั้นมีเรื่องของ Configuration Qualifier ที่ทำให้นักพัฒนาต้องปวดหัวกับมันมากมาย ไม่ว่าจะเป็นเรื่อง DPI หรือ Smallest-width ซึ่งทั้งสองอย่างนี้เป็นเรื่องที่ต้องใช้เวลาในการทำความเข้าใจพอสมควร

นักพัฒนาส่วนใหญ่ที่ไม่เข้าใจเรื่อง Configuration Qualifier มักจะจัดการกับไฟล์ภาพที่ใช้ในแอปกันแบบผิดวิธี ซึ่งจะส่งผลในหลายๆเรื่อง เช่น เมื่อเปิดบนเครื่องรุ่นอื่นๆแล้วภาพแสดงผลเพี้ยนบ้าง หรือแอปกระตุกเพราะภาพที่ใช้มีขนาดที่ไม่เหมาะสม และอื่นๆอีกมากมาย

ดังนั้นมาดูกันดีกว่าว่า ปกติเวลาเจ้าของบล็อกต้องทำแอปตัวหนึ่ง เจ้าของบล็อกนั้นมีวิธีจัดการกับไฟล์ภาพอย่างไรไม่ให้มีปัญหาวุ่นวายแบบนั้น

Android App สามารถใช้ภาพแบบไหนได้บ้าง?

อันนี้ขอเริ่มจากปูทางให้กับนักพัฒนามือใหม่ด้วยก็ว่าได้ ว่าปกติแล้วภาพที่ใช้ในแอปนั้นมีหลายประเภท และมีชื่อเรียกรวมกันทั้งหมดว่า Drawable

โดยจะแยกประเภทออกได้เป็น 3 ประเภทหลักๆดังนี้

Bitmap Drawable
Shape Drawable
Vector Drawable

Bitmap Drawable

ไฟล์ภาพต่างๆไม่ว่าจะเป็น JPG, PNG, GIF หรือ WebP นั้นอยู่ในกลุ่มของ Bitmap Drawable ครับ ซึ่งเป็นธรรมดาอยู่แล้วล่ะที่จะต้องมีการเอาไฟล์ภาพที่ UI Designer ทำไว้ให้ หรือทำเอง หรือว่าไปหาดาวน์โหลดมาใช้งาน

ซึ่งไฟล์เหล่านี้สามารถเลือกได้ว่าจะเก็บไว้ใน drawable หรือว่า mipmap ทั้งนี้ขึ้นอยู่กับเวอร์ชันขั้นต่ำของแอปนั้นๆ แต่โดยปกติแล้วจะเก็บไว้ใน drawable มีแค่ไอคอนของแอปเท่านั้นที่จะเก็บไว้ใน mipmap

ถ้าผู้ที่หลงเข้ามาอ่านคนไหนยังไม่รู้จักกับ Mipmap ในแอนดรอยด์ แนะนำให้ไปอ่านบทความ รู้จักกับ mipmap ในวันที่ Android Studio 1.1 ย้ายไอคอนใน Template จาก drawable ไป mipmap [NuuNeoI] ก่อนละกันเนอะ

Shape Drawable

เป็น XML Resource อย่างหนึ่งของแอนดรอยด์ที่จะทำให้นักพัฒนาสามารถสร้างภาพที่มีรูปทรงง่ายๆโดยใช้ XML โดยเก็บไฟล์เหล่านั้นไว้ใน drawable

ส่วนรายละเอียดตามไปอ่านกันได้ที่ สร้างภาพง่ายๆจาก XML ด้วย Shape Drawable

Vector Drawable

เป็น XML Resource แบบใหม่ที่ทางแอนดรอยด์พัฒนาขึ้นมาใน Android 5.0 Lollipop ซึ่งเป็นการทำให้สามารถใช้ภาพที่เป็นแบบ Vector ภายในแอปได้

ส่วนรายละเอียดตามไปอ่านกันได้ที่ ยินดีต้อนรับเข้าสู่โลกของ Vector ด้วย Vector Drawable

เลือกใช้ Drawable แบบไหนให้เหมาะสม

ทีนี้ผู้ที่หลงเข้ามาอ่านก็ต้องพิจารณาก่อนว่าแต่ละภาพที่จะเอามาใช้ในแอปนั้นควรเลือกเป็น Drawable แบบไหนดี โดยจะมีวิธีพิจารณาแบบง่ายๆดังนี้

ใช้ Vector Drawable ถ้า…

เป็นภาพ Icon หรือสัญลักษณ์
สามารถทำเป็นภาพ Vector ได้

โดย Vector Drawable มีเงื่อนไขในการใช้งานดังนี้

Vector Drawable เดิมทีถูกสร้างขึ้นมา เพื่อใช้งานบน API 21 ขึ้นไป
ควรใช้ Support Vector Drawable เพื่อให้รองรับกับเวอร์ชันต่ำกว่า API 21 ได้
ตัวไฟล์จะอยู่ในรูป XML และเก็บไว้ใน drawable
กรณีของ Support Vector Drawable เมื่อแอปทำงานบนเครื่องที่เป็น API 21 ขึ้นไป จะใช้ Vector Drawable โดยตรงเลย แต่ถ้าทำงานบนเครื่องที่ต่ำกว่า API 21 จะใช้ไฟล์ภาพ PNG ที่ถูกสร้างขึ้นตอน Compile

ใช้ Shape Drawable ถ้า…

ภาพเป็นรูปทรงพื้นฐาน เช่น วงกลม สี่เหลี่ยม
ใช้เป็นภาพพื้นหลังสำหรับปุ่มหรือกรอบข้อความ

โดย Shape Drawable มีเงื่อนไขในการใช้งานดังนี้

ไม่สามารถทำรูปทรงที่ซับซ้อนได้
รองรับกับทุกเวอร์ชัน
ตัวไฟล์จะอยู่ในรูป XML และเก็บไว้ใน drawable

ใช้ Bitmap Drawable ถ้า…

เป็นภาพที่มีรายละเอียดเยอะ
ไม่ได้ทำเป็นภาพ Vector ตั้งแต่แรกหรือทำไม่เป็น

โดย Shape Drawable มีเงื่อนไขในการใช้งานดังนี้

รองรับกับทุกเวอร์ชันแน่นอน
รองรับไฟล์ JPG, PNG, GIF และ WebP (แนะนำให้ใช้เป็น WebP)
ตัวไฟล์จะเก็บไว้ในโฟลเดอร์ drawable หรือ mipmap ก็ได้ (แต่แนะนำ drawable)

คำแนะนำ

ถึงแม้แอนดรอยด์จะรองรับ GIF แต่ก็ไม่ต้องไปใช้หรอก…
ภาพ Icon หรือภาพที่มีพื้นหลังโปร่งใสควรใช้เป็น WebP หรือ PNG
ภาพธรรมดาทั่วไปหรือภาพที่มีขนาดใหญ่ควรใช้เป็น WebP หรือ JPG
ควรทำไฟล์ภาพแยกตาม Density ของแต่ละเครื่อง เช่น MDPI, HDPI, XHDPI และ XXHDPI เพื่อให้ภาพสามารถแสดงบนหน้าจอแต่ละขนาดได้คมชัด ภาพไม่แตกจนน่าเกลียด
ถ้ากลัวว่าแอปจะมีขนาดบวมมากเพราะมีภาพเยอะและแยกไว้หลายๆขนาด จะทำ APK แยกตาม Configuration ของแต่ละเครื่องด้วย Android App Bundle ก็ได้นะ (สามารถอ่านเพิ่มเติมได้ที่ Android App Bundle — ตอนที่ 1 รู้จักความสามารถและเบื้องหลังในการทำงาน)

มาจัดการกับ Bitmap Drawable อย่างถูกต้องกันเถอะ

นักพัฒนาส่วนใหญ่รู้กันอยู่แล้วล่ะว่าภาพจำพวก Bitmap Drawable เนี่ย เวลาเอาไปเก็บไว้ใน drawable ควรแยกตาม Density นะ ว่าแต่ละแยกยังไงให้ถูกต้องล่ะ?

วิธีการแยกโฟลเดอร์สำหรับ Bitmap Drawable นั้น ต้องบอกเลยว่าขึ้นอยู่กับว่าแอปของผู้ที่หลงเข้ามาอ่านนั้นออกแบบให้รองรับกับหน้าจอทุกขนาดด้วยวิธีแบบไหนอยู่

ค่า DP ที่จะพูดถึงต่อไปนี้เป็นค่า DP ที่กำหนดให้กับ View แล้วส่งผลต่อการแสดงผลของภาพ เช่น ขนาดของปุ่มที่ใช้ภาพเป็นพื้นหลัง ดังนั้นผู้ที่หลงเข้ามาอ่านคนใดยังไม่รู้จักกับ DP ให้ไปอ่านบทความเรื่อง ทำไมแอนดรอยด์ต้องใช้หน่วย DP? เพื่อทำความรู้จักกับหน่วย DP เสียก่อน

รูปแบบอุดมคติ

รูปแบบนี้ไม่ค่อยเจอกันง่ายๆ เพราะมันคือ Best Practice ใน Mobile Application Design เลยก็ว่าได้ เป็นรูปแบบที่มีต้นทุนสูง ใช้เวลานาน แต่ได้งานคุณภาพ

วิธีการออกแบบ

การออกแบบที่คำนึงถึงค่า DP ไม่ใช่อิงจากหน่วย PX
View ที่ออกแบบบน Mobile แล้วมีการกำหนดเป็นหน่วย DP ทุกตัว เมื่อไปแสดงผลอยู่บน Tablet จะต้องมีค่า DP เท่าเดิม
Layout จะมีการจัดวางแตกต่างกันระหว่าง Mobile กับ Tablet หรือไม่ ไม่สำคัญ สนใจแค่ว่าค่า DP ที่ใช้กำหนดให้กับ View ตัวเดียวกันนั้นมีค่าเหมือนกันหรือป่าว ยกตัวอย่างเช่น ปุ่มวงกลมที่เป็นรูป Icon ที่กำหนดไว้ใน Mobile ไว้ว่าให้มีค่าเป็น 60dp เมื่อออกแบบสำหรับ Tablet ก็ควรกำหนดให้ปุ่มนั้นมีค่าเป็น 60dp เหมือนเดิม
สำหรับค่า DP บางอย่างที่กำหนดไว้ใน Mobile หรือ Tablet อย่างใดอย่างหนึ่งเท่านั้น ก็ไม่เป็นไร

ถ้าเจอแอปตัวไหนออกแบบไว้แบบนี้อยู่ บอกเลยว่าเป็นบุญของผู้ที่หลงเข้ามาอ่านแล้วล่ะ เพราะมันคือการออกแบบที่ใส่ใจถึงรูปแบบของตัวแอปที่มีผลต่อผู้ใช้งานบนอุปกรณ์แอนดรอยด์ที่แตกต่างกันออกไป เพราะงั้นอย่าปล่อยให้งานแบบนี้หลุดมือไปล่ะ

สำหรับแอปที่ออกแบบด้วยรูปแบบที่อุดมคติแบบนี้ บอกเลยว่านักพัฒนาจะจัดการกับภาพที่จะต้องใช้ได้ง่ายมากๆ เพราะ Mobile และ Tablet นั้นสามารถใช้ภาพเดียวกันได้เลย ขอแค่แยกตาม Density ก็พอ

ในกรณีที่ใช้ drawable แนะนำให้แยกภาพตาม Density แบบนี้

drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi

รูปแบบ Mobile เป็นหลัก ส่วน Tablet ขยายใหญ่เอา

อันนี้เป็นรูปแบบที่สามารถพบเจอได้ทั่วไปครับ เพราะเป็นรูปแบบที่ใช้ต้นทุนไม่เยอะมาก เน้นทำแอปให้รองรับ Mobile เป็นหลัก แล้วค่อยไปปรับ Scale ให้ใหญ่ขึ้นเมื่อเปิดบน Tablet

วิธีการออกแบบ

การออกแบบที่คำนึงถึงค่า DP ไม่ใช่อิงจากหน่วย PX
ตำแหน่งของ View ทั้งหมดของ Tablet แทบจะเหมือนกับ Mobile
View บน Mobile กำหนดไว้ขนาดเท่าไร จะขยายใหญ่ขึ้นบน Tablet โดยไม่มีอัตราส่วนที่แน่นอน ใช้วิธีกะด้วยสายตาและความรู้สึกล้วนๆว่ามันโอเคแล้ว (ฮาๆ)

ดังนั้นรูปแบบนี้ส่วนใหญ่จึงใช้วิธีจัด Layout สำหรับ Mobile เพียงอย่างเดียว แต่ค่า Dimension จะแยกโฟลเดอร์ระหว่าง values กับ values-sw...dp ไว้ เพื่อให้กำหนดค่า DP แตกต่างกันระหว่าง Mobile กับ Tablet ได้

ในกรณีที่ใช้ drawable แนะนำให้แยกภาพตาม Density แบบนี้

drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-sw540dp-mhdpi
drawable-sw540dp-xhdpi

เพราะ View บน Mobile กับ Tablet จะมีขนาดไม่เท่ากัน จึงต้องแยกภาพเป็น 2 ชุด แล้วทำเป็นหลายๆขนาดตามค่า Density โดยทั้ง Mobile และ Tablet แยกกัน

รูปแบบตามใจฉัน อะไรๆก็ไม่แน่นอน

ถ้า View เป็นต้องใช้ภาพที่มีขนาดไม่แน่นอน แล้วแสดงผลแบบ Dynamic (ยืดขยายความกว้างหรือความสูงได้ตามขนาดหน้าจอ) จะไม่ถือว่าอยู่ในรูปแบบนี้นะ

วิธีการออกแบบ

View มีการอ้างอิงขนาดจากค่า PX เป็นหลัก เช่น ปุ่มที่ใช้เป็นภาพ แล้วกำหนดความกว้างความสูงเป็น Wrap Content เพื่อให้ปุ่มมีขนาดตามขนาดของภาพ

ในกรณีแบบนี้แนะนำว่าให้คุยกับทุกๆคนที่มีชะตากรรมร่วมกันในโปรเจคตัวนั้นครับ แล้วออกแบบใหม่โดยใช้หน่วย DP ให้ถูกต้องตามแบบฉบับของแอนดรอยด์เถอะ

จะรู้ได้ยังไง ว่าต้องใช้ภาพขนาดเท่าไร?

โดยปกติแล้วเวลาเจ้าของบล็อกจะอ้างอิงจากหน้าจอที่เจ้าของบล็อกใช้ออกแบบเป็นหลัก เช่น Nexus 5X ที่หน้าจอเป็น XXHDPI ดังนั้นเจ้าของบล็อกก็จะจัด Layout ในหน้าจอแบบนี้จนเสร็จเสียก่อน แล้วภาพที่ใช้ก็จะดูว่าบนหน้าจอตัวนี้ใน View แต่ละตัวจะต้องใช้ภาพขนาดเท่าไรถึงจะเหมาะสม เมื่อได้ขนาดภาพที่พอดีกับหน้าจอแล้ว ก็จะเอาภาพนั้นไปลดขนาดให้เหมาะสมกับ XHDPI, HDPI และ MDPI ตามอัตราส่วนของแต่ละ Density

ที่เจ้าของบล็อกเลือกออกแบบจากหน้าจอ XXHDPI ก็เพราะว่าเจ้าของบล็อกใช้เครื่องหน้าจอ XXHDPI อยู่แล้ว เวลาทดสอบก็จะทดสอบบนเครื่องจริงได้เลย และไม่ต้องขยายขนาดภาพสำหรับ Density อื่นๆแล้ว มีแต่ย่อขนาดภาพอย่างเดียว จึงหายห่วงเรื่องภาพแตก

โดยปกติแล้วค่า dp ที่กำหนดลงไปใน View นั้นจะมีค่าเท่ากับ MDPI แบบ 1 ต่อ 1 ดังนั้นจะใช้ MDPI เป็นเกณฑ์หลังแล้วขยายตาม DPI ต่างๆก็ได้เช่นกัน

ทำไมเจ้าของบล็อกถึงแยก Mobile แค่ MDPI, HDPI, XHDPI และ XXHDPI ส่วน Tablet แยกเป็น MDPI และ XHDPI เท่านั้น?

ถึงแม้ว่าบนโลกของแอนดรอยด์นั้นจะมี LDPI, MDPI, HDPI, XHDPI, XXHDPI, XXXHDPI แต่ในความเป็นจริงนักพัฒนาก็ไม่จำเป็นต้องทำทุกๆ Density เสมอไปครับ

LDPI

ต้องบอกเลยว่ายุคนี้อุปกรณ์แอนดรอยด์ที่มี Density ระดับนี้คงไม่หลงเหลืออยู่ในโลกนี้แล้วล่ะ เพราะงั้นจึงตัดออกไปได้เลย

MDPI

ในยุคนี้จะเหลือก็แค่ Tablet เท่านั้น ส่วน Mobile ก็ไม่หลงเหลือแล้วล่ะ ดังนั้นการสร้าง Drawable สำหรับ MDPI ก็มีไว้เพื่อ Tablet เป็นหลัก ซึ่งถ้าสังเกตดีๆจะเห็นว่ากรณีที่ทำ Bitmap Drawable แยกกันระหว่าง Mobile กับ Tablet ก็จะมีแค่ MDPI สำหรับ Tablet เท่านั้น

HDPI

จะไม่มีใน Tablet ซักเท่าไรนัก เพราะ Tablet ส่วนใหญ่จะมี Density อยู่ระหว่าง MDPI กับ XHDPI ส่วน Mobile ก็ยังพอมีอยู่บ้าง เลยต้องทำเผื่อไว้

XXXHDPI

เป็น Density ที่ก้าวข้ามจุดที่มนุษย์จะแยกแยะความแตกต่างเมื่อเทียบกับ XXHDPI ได้แล้วล่ะ เพราะจริงๆแค่ XXHDPI ก็คมชัดเพียงพอต่อสายตามนุษย์แล้ว ดังนั้น XXXHDPI จึงไม่ได้จำเป็นซักเท่าไร แถมยังทำให้ตัวแอปมีขนาดบวมเกินจำเป็นอีก

อย่ามานั่งปรับขนาดภาพเองให้เสียเวลา ลองใช้ Android Drawable Importer สิ

Android Drawable Importer เป็น Plugin สำหรับ Android Studio ที่จะช่วยให้นักพัฒนาไม่ต้องมานั่งเสียเวลากับการย่อ/ขยายขนาดภาพสำหรับ Bitmap Drawable อีกต่อไป

อยากรู้ว่ามันใช้ยังไง สะดวกแค่ไหน ลองไปอ่านบทความเกี่ยวกับ Plugin ตัวนี้กันได้ที่ Android Drawable Importer — Plugin แนะนำสำหรับ Android Studio

ไม่ควรเอา Bitmap Drawable ไปใส่ไว้ใน drawable โดยตรง

การเอาไฟล์ภาพไปเก็บไว้ใน drawable โดยตรงนั้นไม่ใช่เรื่องที่ถูกต้องซักเท่าไร อย่างน้อยก็ควรเก็บแยกตาม Density ไว้หน่อยก็ดี

ถึงแม้ว่าการเก็บไฟล์ไว้ในนี้โดยตรงก็เหมือนกับ drawable-mdpi ก็เถอะ แต่ทางที่ดีก็ควรแยกเป็น drawable-mdpi ดีกว่า แล้วโฟลเดอร์ drawable ค่อยเอาไว้เก็บพวก Shape Drawable หรือ Vector Drawable แทน เพื่อไม่ให้ปนกันมั่วซั่ว

ภาพ 9-Patch ก็ควรแยกตามขนาดหน้าจอเหมือนกันนะ

9-Patch เป็น Bitmap Drawable ที่อาจจะไม่ได้นิยมใช้งานกันซักเท่าไร แต่ข้อดีของ 9-Patch คือสามารถยืดและขยายได้โดยไม่ทำให้สัดส่วนของภาพบิดเบี้ยว

แต่เวลาทำภาพ 9-Patch ก็ควรแยกตาม Density อยู่ดีนะ เพราะว่าภาพ 9-Patch สุดท้ายแล้วก็คือภาพที่ขึ้นอยู่กับหน่วย PX อยู่ดี ดังนั้นเวลาแสดงบน HDPI กับ XXHDPI ก็จะมีความแตกต่างกัน

ยกตัวอย่างเช่น 9-Patch ของภาพปุ่มที่มีมุมโค้งมนจะไม่เท่ากันเมื่อแสดงในหน้าจอที่ Density ต่างกัน แต่เจ้าของบล็อกดันทำภาพไว้แค่ใน drawable-mdpi อย่างเดียว เวลาแสดงใน XHDPI ก็จะเห็นได้ชัดว่ามุมของปุ่มจะมีมุมที่โค้งน้อยลง

เพราะงั้นผู้ที่หลงเข้ามาอ่านคนใดคิดว่าทำ 9-Patch แล้วไม่ต้องทำหลายๆขนาด ยังไงก็ควรทำหลายๆขนาดแยกตาม Density อยู่ดีนะครับ แต่ถ้าไม่ซีเรียสตรงจุดนี้ก็สามารถปล่อยข้ามไปได้ครับ

ควรทดสอบจริงทุกครั้งเพื่อความมั่นใจ

ที่เจ้าของบล็อกแนะนำนั้นก็น่าจะครอบคลุมเกือบทั้งหมดแหละ แต่เนื่องจากแอปไม่ได้ออกแบบเหมือนๆกันทั้งหมด ดังนั้นทางที่ดีควรทดสอบจาก Emulator หรือเครื่องจริง โดยให้ครอบคลุมกับทุกๆ Density ด้วย (ทดสอบแยกระหว่าง Mobile และ Tablet ด้วยนะ)

ถ้าทดสอบแล้วพบว่ามีหน้าจอบางขนาดแสดงภาพไม่ชัดหรือหยาบ ให้ดูว่าเครื่องนั้นเป็น Density แบบไหน เป็น Mobile หรือ Tablet แล้วจึงทำภาพที่มีขนาดพอดีกับหน้าจอนั้นๆเพิ่มเข้าไป

UI Designer ควรรู้อะไรบ้างเวลาทำภาพ?

ในการทำงานจริงๆนักพัฒนาคงไม่ได้เป็นคนทำเองซักเท่าไรนัก ส่วนมากจะมีคนอื่นทำมาให้อย่างเช่น UI Designer แต่ปัญหาก็คือ คนที่ทำภาพให้เค้าควรจะทำภาพขนาดเท่าไรให้ล่ะ? ต้องรู้เกี่ยวกับ Configuration Qualifier ด้วยหรือป่าว?

เวลาทำภาพนั้นเจ้าของบล็อกแนะนำให้ออกแบบจากหน้าจอที่มีความละเอียดสูงสุดเท่าที่ทำได้ (หรือมีอยู่บนโลกนี้) จะเป็น Mobile ที่มีหน้าจอ 2,560x1,440 px ก็ได้ แล้ว Tablet ก็ออกแบบที่ขนาด 2,560x1,600 px เมื่อเสร็จแล้วก็ส่งภาพแต่ละส่วนให้ Android Dev ไปจัดการต่ออีกที แล้ว Android Dev ก็จะเอาไปใช้ในโปรเจคโดยใช้ Android Drawable Importer เข้ามาเพื่อช่วยในการย่อรูปสำหรับ Density ต่างๆแทน

และนอกจากนี้โปรแกรมที่ใช้ออกแบบ UI ในปัจจุบันหลายๆตัวก็รองรับการ Export ไฟล์รูปโดยแบ่งหลายขนาดตามแอนดรอยด์ได้แล้วด้วย (อยู่ที่ว่าเค้าจะใช้โปรแกรมเหล่านั้นหรือป่าว)

สรุป

เรื่องของภาพที่จะเอามาใช้ในแอปบนแอนดรอยด์ถือว่าเป็นพื้นฐานอย่างหนึ่งที่ Android Dev ควรจะรู้และจัดการกับไฟล์ภาพเหล่านั้นให้ถูกต้องตามขนาดหน้าจอ ควรดูว่าภาพที่จะใช้สามารถทำเป็น Vector Drawable หรือ Shape Drawable ได้มั้ย ถ้าทำได้ก็ควรทำ เพราะมันจะลดขนาดของไฟล์ที่ต้องใช้ให้ลดลงได้

ส่วนเรื่องการเก็บไฟล์ Bitmap Drawable ก็สามารถอ้างอิงจาก Guideline ที่เจ้าของบล็อกแนะนำไว้ได้เลย แต่อย่าลืมด้วยว่าขึ้นอยู่กับโปรเจคของผู้ที่หลงเข้ามาอ่านแต่ละคนด้วยนะ ว่าต้องใช้เทคนิคอื่นๆเพิ่มเติมหรือเปล่า เพื่อให้ภาพสามารถแสดงบนแอปได้อย่างถูกต้อง ภาพไม่เบลอหรือแตก แต่ส่วนใหญ่ก็อิงจากวิธีที่เจ้าของบล็อกใช้นั่นแหละ ถ้าไม่ใช่ ก็ลองดูก่อนว่าวิธีที่ใช้กันอยู่นั้นถูกต้องแล้วหรือป่าว

และควรมองหา Tools มาช่วยเพื่อให้จัดการได้ง่ายขึ้น อย่างเช่นการเอา Android Drawable Importer มาใช้ เพื่อที่จะได้ไม่ต้องมานั่งทำภาพหลายๆขนาดเอง ซึ่งพวกนี้จะช่วยลดระยะเวลาในการทำงานได้เยอะพอสมควรเลยล่ะ

และสุดท้ายของสุดท้ายก็ต้องขอบคุณพี่เนย NuuNeoI ที่ช่วยตรวจทานเนื้อหานี้ให้