การลดขนาดการดาวน์โหลดภาพ

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

เกี่ยวกับรูปแบบรูปภาพ

โดยปกติแล้ว แอป Android จะใช้รูปภาพที่อยู่ในรูปแบบไฟล์ต่อไปนี้อย่างน้อย 1 รูปแบบ ได้แก่ AVIF, PNG, JPG และ WebP สำหรับแต่ละรูปแบบเหล่านี้ คุณสามารถทำตามขั้นตอนเพื่อลดขนาดรูปภาพได้

AVIF

Android 12 (API ระดับ 31) ขึ้นไปรองรับรูปภาพที่ใช้รูปแบบไฟล์ภาพ AV1 (AVIF) AVIF เป็นรูปแบบคอนเทนเนอร์สำหรับรูปภาพและลำดับรูปภาพที่เข้ารหัสโดยใช้ AV1 AVIF ใช้ประโยชน์จากเนื้อหาที่เข้ารหัสภายในเฟรมจากการบีบอัดวิดีโอ ซึ่งจะช่วยปรับปรุงคุณภาพของรูปภาพอย่างมากสำหรับ ไฟล์ขนาดเท่ากันเมื่อเทียบกับรูปแบบรูปภาพรุ่นเก่า เช่น JPEG หากต้องการดูข้อดีของรูปแบบนี้อย่างละเอียด โปรดดูบล็อกโพสต์ของ Jake Archibald

PNG

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

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

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

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

มุ่งมั่นที่จะใช้รูปแบบที่จัดทำดัชนี

การพยายามลดสีควรเริ่มต้นด้วยการลองเพิ่มประสิทธิภาพสี เพื่อให้คุณใช้รูปแบบ INDEXED ได้เมื่อส่งออกรูปภาพเป็น PNG โหมดสี INDEXED จะทำงานโดยการเลือกสีที่ดีที่สุด 256 สีเพื่อใช้ และแทนที่ ค่าพิกเซลทั้งหมดด้วยดัชนีในชุดสีนั้น ผลลัพธ์คือการ ลดจำนวนสีจาก 16 ล้านสี (ที่เป็นไปได้) เหลือเพียง 256 สี จาก 3 (ไม่มี ความโปร่งใส) หรือ 4 (มีความโปร่งใส) ไบต์ต่อพิกเซลเป็น 1 ไบต์ต่อพิกเซล การเปลี่ยนแปลงนี้เป็นการลดขนาดไฟล์ครั้งแรกที่สำคัญ

รูปที่ 1 แสดงรูปภาพและรูปภาพที่ได้รับการจัดทำดัชนี

รูปที่ 1 รูปภาพก่อนและหลังการแปลงเป็นรูปแบบ INDEXED

รูปที่ 2 แสดงชุดสีสำหรับรูปภาพในรูปที่ 1

รูปที่ 2 ชุดสีสำหรับรูปภาพในรูปที่ 1

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

แน่นอนว่าไม่ใช่ทุกรูปภาพที่จะแสดงได้อย่างถูกต้องด้วยสีเพียง 256 สี เช่น รูปภาพบางรูปอาจต้องใช้ 257, 310, 512 หรือ 912 สีจึงจะ ดูถูกต้อง ในกรณีดังกล่าว การหาปริมาณเวกเตอร์ก็อาจมีประโยชน์เช่นกัน

การหาปริมาณเวกเตอร์

กระบวนการสร้างรูปภาพที่จัดทำดัชนีอาจอธิบายได้ดีกว่าว่าเป็นการหาปริมาณเวกเตอร์ (VQ) VQ เป็นกระบวนการปัดเศษสำหรับตัวเลขหลายมิติ ในกระบวนการนี้ ระบบจะจัดกลุ่มสีทั้งหมดในรูปภาพตาม ความคล้ายคลึงกัน สำหรับกลุ่มที่กำหนด ระบบจะแทนที่สีทั้งหมดในกลุ่มนั้นด้วยค่าจุดกึ่งกลางเดียว ซึ่งจะช่วยลดข้อผิดพลาดสำหรับสีในเซลล์นั้น (หรือ "ไซต์" หากคุณใช้คำศัพท์ของ Voronoi) ในรูปที่ 3 จุดสีเขียวแสดงถึงสีอินพุต และจุดสีแดงคือจุดกึ่งกลาง ที่แทนที่สีอินพุต แต่ละเซลล์จะล้อมรอบด้วยเส้นสีน้ำเงิน

รูปที่ 3 ใช้การหาปริมาณเวกเตอร์กับสีในรูปภาพ

ผลลัพธ์ของการใช้ VQ กับรูปภาพจะลดจำนวนสีที่ไม่ซ้ำกัน โดยแทนที่กลุ่มสีแต่ละกลุ่มด้วยสีเดียวที่ "ใกล้เคียง" ในด้านคุณภาพของภาพ

เทคนิคนี้ยังช่วยให้คุณกำหนดจำนวนสีที่ไม่ซ้ำกันสูงสุดในรูปภาพได้ด้วย ตัวอย่างเช่น รูปที่ 4 แสดงหัวนกแก้วในสี 16.7 ล้านสี (24 บิตต่อพิกเซล หรือ bpp) ควบคู่ไปกับเวอร์ชันที่อนุญาตให้ใช้สีที่ไม่ซ้ำกันเพียง 16 สี (3 bpp) เท่านั้น

รูปที่ 4 รูปภาพก่อนและหลังการใช้การหาปริมาณเวกเตอร์

คุณจะเห็นได้ทันทีว่าคุณภาพลดลง สีไล่ระดับส่วนใหญ่ถูกแทนที่ ทำให้เกิดเอฟเฟกต์แถบสีในรูปภาพ รูปภาพนี้ ต้องมีสีที่ไม่ซ้ำกันมากกว่า 16 สี

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

JPG

หากใช้รูปภาพ JPG คุณสามารถทำการเปลี่ยนแปลงเล็กๆ น้อยๆ หลายอย่างที่ อาจช่วยลดขนาดไฟล์ได้อย่างมาก ซึ่งรวมถึงฟีเจอร์ต่อไปนี้

• การสร้างไฟล์ที่มีขนาดเล็กลงผ่านวิธีการเข้ารหัสต่างๆ (โดยไม่ ส่งผลต่อคุณภาพ)
• ปรับคุณภาพเล็กน้อยเพื่อให้บีบอัดได้ดีขึ้น

การใช้กลยุทธ์เหล่านี้มักจะช่วยลดขนาดไฟล์ได้สูงสุดถึง 25%

เมื่อเลือกเครื่องมือ โปรดทราบว่าเครื่องมือส่งออกรูปภาพอาจแทรกข้อมูลเมตาที่ไม่จำเป็น เช่น ข้อมูล GPS ลงในรูปภาพ อย่างน้อยที่สุด ให้ลองใช้เครื่องมือที่มีอยู่เพื่อช่วยนำข้อมูลนี้ออกจากไฟล์

WebP

WebP เป็นรูปแบบรูปภาพใหม่กว่าที่รองรับตั้งแต่ Android 4.2.1 (API ระดับ 17) รูปแบบนี้ช่วยป้องกันไม่ให้สูญเสียข้อมูลและบีบอัดรูปภาพแบบสูญเสียบางส่วนบนเว็บได้ดีกว่ารูปแบบอื่น การใช้ WebP ช่วยให้นักพัฒนาแอปสามารถสร้างรูปภาพที่มีขนาดเล็กลงและสมบูรณ์มากขึ้นได้ ไฟล์รูปภาพ WebP แบบไม่สูญเสียรายละเอียด มีขนาดเล็กกว่า PNG โดยเฉลี่ย 26% ไฟล์รูปภาพเหล่านี้ยังรองรับความโปร่งใส (หรือที่เรียกว่าช่องอัลฟ่า) โดยมีค่าใช้จ่ายเพียง 22% ของไบต์

รูปภาพ WebP ที่มีการสูญเสียมีขนาดเล็กกว่ารูปภาพ JPG ที่เทียบกันได้ 25-34% ที่ดัชนีคุณภาพ SSIM ที่เทียบเท่า ในกรณีที่ยอมรับการบีบอัด RGB แบบสูญเสียบางส่วนได้ WebP แบบสูญเสียบางส่วนยังรองรับความโปร่งใสด้วย โดยปกติแล้วจะมีขนาดไฟล์เล็กกว่า PNG 3 เท่า

ดูข้อมูลเพิ่มเติมเกี่ยวกับ WebP ได้ที่ เว็บไซต์ WebP

คุณสามารถแปลงรูปภาพ BMP, JPG, PNG หรือ GIF แบบคงที่มีอยู่เป็นรูปแบบ WebP ได้โดยใช้ Android Studio ดูข้อมูลเพิ่มเติมได้ที่สร้างรูปภาพ WebP โดยใช้ Android Studio

การเลือกรูปแบบ

รูปแบบรูปภาพที่แตกต่างกันเหมาะสำหรับรูปภาพประเภทต่างๆ JPG และ PNG มีกระบวนการบีบอัดที่แตกต่างกันมาก และให้ผลลัพธ์ที่แตกต่างกัน อย่างเห็นได้ชัด

การตัดสินใจเลือกระหว่าง PNG กับ JPG มักขึ้นอยู่กับความซับซ้อนของ รูปภาพเอง รูปที่ 5 แสดงรูปภาพ 2 รูปที่ออกมาแตกต่างกันอย่างมาก ขึ้นอยู่กับรูปแบบการบีบอัดที่นักพัฒนาแอปใช้ รูปภาพทางด้าน ซ้ายมีรายละเอียดเล็กๆ น้อยๆ จำนวนมาก จึงบีบอัดได้อย่างมีประสิทธิภาพมากกว่าด้วย JPG ส่วน รูปภาพทางด้านขวาที่มีสีเดียวกันจะบีบอัดได้อย่างมีประสิทธิภาพมากกว่า ด้วย PNG

รูปที่ 5 กรณีที่เหมาะสมสำหรับ JPG เทียบกับ PNG

รูปแบบ WebP รองรับทั้งโหมดแบบสูญเสียรายละเอียดบางส่วนและแบบไม่สูญเสียรายละเอียด ทำให้เป็นตัวเลือกที่เหมาะ ในการแทนที่ทั้ง PNG และ JPG สิ่งเดียวที่ควรทราบคือฟีเจอร์นี้รองรับในอุปกรณ์ที่ใช้ Android 4.2.1 (API ระดับ 17) ขึ้นไปเท่านั้น โชคดีที่ อุปกรณ์ส่วนใหญ่เป็นไปตามข้อกำหนดดังกล่าว

รูปที่ 6 แสดงภาพอย่างง่ายเพื่อช่วยคุณตัดสินใจว่าจะใช้รูปแบบการบีบอัดใด

รูปที่ 6 การตัดสินใจเลือกรูปแบบการบีบอัด

กำหนดค่าคุณภาพที่เหมาะสม

คุณใช้เทคนิคต่างๆ เพื่อให้ได้ความสมดุลที่เหมาะสมระหว่าง การบีบอัดและคุณภาพของรูปภาพได้ เทคนิคหนึ่งใช้ค่าสเกลาร์ จึงใช้ได้กับ JPG และ WebP เท่านั้น เทคนิคอีกอย่างใช้ประโยชน์จาก ไลบรารี Butteraugli และใช้ได้กับรูปภาพทุกรูปแบบ

ค่าสเกลาร์ (เฉพาะ JPG และ WebP)

ความสามารถของ JPG และ WebP มาจากข้อเท็จจริงที่ว่าคุณสามารถใช้ค่าสเกลาร์ เพื่อรักษาสมดุลระหว่างคุณภาพกับขนาดไฟล์ได้ เคล็ดลับคือการค้นหาค่าคุณภาพที่ถูกต้องสำหรับรูปภาพ ระดับคุณภาพที่ต่ำเกินไปจะทำให้ได้ไฟล์ขนาดเล็ก แต่คุณภาพของรูปภาพจะลดลง ระดับคุณภาพที่สูงเกินไปจะเพิ่มขนาดไฟล์ โดยที่ผู้ใช้ไม่ได้รับประโยชน์ที่เห็นได้ชัด

โซลูชันที่ตรงไปตรงมาที่สุดคือการเลือกค่าที่ไม่ใช่ค่าสูงสุด แล้วใช้ค่านั้น อย่างไรก็ตาม โปรดทราบว่าค่าคุณภาพจะส่งผลต่อรูปภาพทุกรูป แตกต่างกัน แม้ว่าคุณภาพ 75% จะดูดีในรูปภาพส่วนใหญ่ แต่ก็อาจมีบางกรณีที่ดูไม่ดีเท่าที่ควร คุณควรทดสอบค่าสูงสุดที่เลือกกับตัวอย่างรูปภาพที่เป็นตัวแทน นอกจากนี้ โปรดทำการทดสอบทั้งหมดกับรูปภาพต้นฉบับ ไม่ใช่เวอร์ชันที่บีบอัด

สำหรับแอปพลิเคชันสื่อขนาดใหญ่ที่อัปโหลดและส่ง JPG หลายล้านรายการต่อวัน การปรับแต่งด้วยตนเองสำหรับชิ้นงานแต่ละรายการจึงเป็นไปไม่ได้ คุณอาจรับมือกับความท้าทายนี้ได้โดย ระบุระดับคุณภาพที่แตกต่างกันหลายระดับตามหมวดหมู่รูปภาพ ตัวอย่างเช่น คุณอาจตั้งค่าคุณภาพเป็น 35% สำหรับภาพปก เนื่องจาก รูปภาพขนาดเล็กจะซ่อนอาร์ติแฟกต์จากการบีบอัดได้มากกว่า

Butteraugli

โปรเจ็กต์ Butteraugli เป็นไลบรารีสำหรับทดสอบเกณฑ์ข้อผิดพลาดทางจิตวิทยาของภาพ ซึ่งเป็นจุดที่ผู้ชมเริ่มสังเกตเห็นว่าคุณภาพของภาพลดลง กล่าวอีกนัยหนึ่ง โปรเจ็กต์นี้พยายามวัดปริมาณความบิดเบือนของรูปภาพที่บีบอัด

Butteraugli ช่วยให้คุณกำหนดเป้าหมายสำหรับคุณภาพของภาพ แล้วเรียกใช้การบีบอัด PNG, JPG, WebP แบบสูญเสียรายละเอียด และ WebP แบบไม่สูญเสียรายละเอียด จากนั้นคุณสามารถเลือกรูปภาพ ที่ให้สมดุลที่ดีที่สุดระหว่างขนาดไฟล์และระดับ Butteraugli รูปที่ 7 แสดงตัวอย่างวิธีใช้ Butteraugli เพื่อหาระดับคุณภาพ JPG ขั้นต่ำ ก่อนที่การบิดเบือนภาพจะสูงพอที่ผู้ใช้จะรับรู้ถึงปัญหา ผลลัพธ์คือขนาดไฟล์ลดลงประมาณ 65%

รูปที่ 7 รูปภาพก่อนและหลังการใช้เทคโนโลยี Butteraugli

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

ขนาดที่จะแสดง

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

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

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

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