[Android] Reduce Download Size with WebP Images :)
วิธีการทำให้ APK ของเรามีขนาดที่เล็กลง มีหลายวิธี ไม่ว่าจะเป็นการทำ Proguard การลดทรัพยากร Resource ใน Project ของเรา ลด Code บลาๆๆ
ในหัวข้อนี้ ขอนำเสนอการทำ WebP ที่ทำให้ขนาดไฟล์รูปขนาดใหญ่ ลดลง ~25 %!!
เอาเข้าจริงๆ เรื่องขนาดไฟล์ก็เป็นเรื่องที่สำคัญมากๆเลยนะครับ User ส่วนใหญ่เวลาโหลดแอพ ก็ไม่ค่อยอยากรอนานมากหรอกครับ ถ้าเจอไฟล์เกิน 30 MB เป็นผมก็ไม่โหลดแล้วครับ ใหญ่อิบอาย :(
นี้ขนาดยังไม่รวม Data กับ Cache ในแอพอีกนะครับ ถ้าเป็น App Game ค่อยว่าไปอย่าง
มาเริ่มรู้จักก่อนดีกว่าครับว่า WebP คืออะไร ?
WebP คืออะไร
เป็นฟอร์แมตรูปภาพแบบ lossy แต่มีการบีบอัดที่เหนือกว่าไฟล์ JPEG หรือ PNG เพราะกูเกิลใช้ VP8 มาบีบอัดรูปภาพ ทำให้ได้ภาพที่มีขนาดเล็กกว่า JPEG ที่คุณภาพใกล้เคียง
WebP มันมาได้พักใหญ่ๆแล้วละ (เกิดก่อน Vector Drawable เสียอีก) แต่คนใช้นั้นน้อยเสียเหลือเกิน ถ้าเทียบกับไฟล์ SVG
WebP VS Png Sample :
https://developers.google.com/speed/webp/gallery?csw=1
WebP มี 2 รูปแบบ
- lossy (WebP)
- lossless encoding (transparent WebP)
Sample ระหว่าง lossy กับ lossless ของ WebP
https://developers.google.com/speed/webp/gallery2
Support Android Version ?
- WebP รองรับขั้นต่ำที่ Android 4.0 (API level 14) ขึ้นไป
- transparent WebP รองรับที่ Android 4.3 (API level 18) ขึ้นไป
เทียบกับไฟล์ SVG อันไหนดีกว่า ?
ต้องบอกก่อนเลยว่า ใช้งานคนละรูปแบบกันมากกว่า
ในขณะที่ SVG ออกแบบมาเพื่อไม่ให้ต้องใส่ไฟล์รูปหลายขนาด
(mdph ,hdpi ,xhdpi ,xxhdpi, xxxhdpi) ซึ่งเป็นสาเหตุที่ทำให้ไฟล์ APK ใหญ่ขึ้น
ส่วนตัวแล้ว ถ้าเป็นไฟล์ภาพขนาดใหญ่ๆ ส่วนใหญ่ก็จะใช้ WebP
แต่ถ้าเป็น icon แบบง่ายๆ อย่าง Material Icon ที่มีขนาดเล็กๆ ไม่ใหญ่ ก็จะใช้เป็น SVG
Guide : Recommend ขนาดไฟล์ภาพ SVG ไว้ไม่ให้เกิน 200 x 200 dp
ใช้ Tool ตัวไหนในการ Convert
Android Studio 2.3 มี Tool ในการ Convert เป็น WebP ให้เรียบร้อยแล้ว !!
สบาย ~~~~~~ !!
ขั้นตอนการทำ WebP ใน Android Studio
Android Studio สามารถ Convert ไฟล์ PNG, JPG, BMP, หรือ static GIF images เป็น WebP ได้
- เลือกรูปที่จะ Convert ใน Drawable / mipmap คลิ๊กขวา แล้วเลือก
Convert to WebP…
สามารถเลือกได้มากกว่า 1 รูปนะ
2. จะขึ้น Dialog ซึ่ง Default settings จะขึ้นอยู่กับว่าเราเลือก minSdkVersion ของ Project ไว้ที่เท่าไหร่
- Encoding quality คือ จำกัดคุณภาพให้เหลือกี่ % จากรูปดังเดิม
- Skips files where the encoded result is larger than the original หมายความว่า ถ้าแปลงเป็น WebP แล้วมันได้ขนาดไฟล์ที่ใหญ่กว่าเดิม มันจะไม่ทำไฟล์พวกนั้นให้
ไฟล์ภาพ 9 patch ไม่สามารถแปลงเป็น WebP ได้นะครับ
3. ถ้าติ๊ก Preview จะขึ้นหน้าต่างเพื่อเปรียบเทียบขนาดของภาพ จะแบ่งเป็น 3 ช่อง ช่อง 1 คือ รูป Original ที่เลือกไว้ของเรา
ช่อง 2 คือความแตกต่างระหว่าง Original และ WEBP
ช่อง 3 คือ WebP ที่แปลงร่างสำเร็จแล้ว !!
จะเห็นได้ว่า ขนาดไฟล์นั้นจาก 158.2 KB เหลือเพียง 9.9 KB !!! ลด 10 เท่ากว่าๆ
ความแตกต่างของภาพนั้นดูออกยากมาก เอาจริงๆ สายตาของคนดูไม่ออกหรอกครับว่ามันแตกต่างกัน มากน้อยเพียงใด
คราวนี้ขอลองอะไรเล่นๆดูบ้าง ถ้าลองใส่ Quality ให้เลือกซัก 0% จะเกิดอะไรขึ้น !!
อันนี้สายตาคนเริ่มเห็นความแตกต่างละ แต่ขนาดไฟล์นั้นลดลงเหลือ จาก
158.2 KB > 1.1 KB ซึ่งเยอะมาก !!!!!!
อันนี้ก็คงแล้วแต่งานละครับว่า อยากให้ภาพละเอียดมากน้อยเพียงใด แต่เอาจริงๆไม่มีใครตั้ง 0% หรอกครับ อย่างน้อยถ้ารูปที่ไม่ค่อยชัด หรือภาพที่มีแต่ Background ปรับซัก 10 - 20% ก็กำลังดีละครับ
Note:ถ้า Set Quality เป็น 100% และ
minSdkVersionเป็น level 18
Android Studioจะเป็นการ convert เป็น lossless encoding โดยอัตโนมัติทันที
แค่นี้ก็ลดลงไปมากแล้ว ถ้า Project มีไฟล์รูปเยอะมากกกก สามารถุลดขนาดไฟล์ APK ได้มากขึ้นไปอีก (ดีไม่ดี อาจลดได้เกือบ 5–10 MB)
สามารถใช้ APK Analyze ก่อน เพื่อวิเคราะห์ดูขนาดไฟล์ APK ก่อนว่ามันใหญ่เพราะว่าอะไรก่อนนะครับ บางทีอาจจะไม่ได้ใหญ่ที่ขนาดรูป
แต่โดยส่วนใหญ่แล้วมันใหญ่เพราะไฟล์รูปแหละครับ
ก็ถือเป็น Blog สั้นๆ ความจริงมันก็มาได้พักใหญ่ๆแล้ว แต่คิดว่าคงมีอีกหลายคนไม่รู้ คงมีประโยชน์มากๆสำหรับทุกคน นะครับ :) เจอกัน Blog เรื่องหน้าครับ ~
Reference
https://developers.google.com/speed/webp/
https://developer.android.com/studio/write/convert-webp.html
