ทำไมไฟล์ PNG ถึงใหญ่มาก และ 3 วิธีแก้ไข

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

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

3 ตัวเลือกของคุณ

• ลดขนาดมิติภาพ ฟรี และมักจะช่วยลดขนาดได้มากที่สุด ไม่มีใครต้องการภาพหน้าจอความกว้าง 5,000 พิกเซล
• ลดความลึกของสี ใช้ได้ดีกับภาพกราฟิกแบนๆ แต่ใช้ได้ไม่ดีกับภาพถ่าย
• เปลี่ยนรูปแบบไฟล์ WebP รักษาความโปร่งใสไว้ได้และโดยทั่วไปจะมีขนาดเล็กกว่าเดิม 25 ถึง 35 เปอร์เซ็นต์

ทำไมไฟล์ PNG ถึงโตขึ้นอย่างรวดเร็ว

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

ภาพหน้าจอขนาด 5120 คูณ 2880 จากจอภาพความละเอียดสูงจะมีพิกเซลถึง 14.7 ล้านพิกเซล หากคำนวณที่ 3 ไบต์ต่อพิกเซลก่อนการบีบอัด จะได้ข้อมูลดิบถึง 44 MB และการบีบอัดแบบ PNG มักจะลดขนาดลงมาเหลืออยู่ระหว่าง 4 MB ถึง 12 MB ขึ้นอยู่กับว่าภาพนั้นมีสีแบบเรียบๆ มากน้อยเพียงใด ผลลัพธ์ขนาด 8 MB จึงถือเป็นเรื่องปกติ ไม่ใช่ข้อผิดพลาด

วิธีที่ 1: ลดขนาดมิติภาพ

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

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

วิธีที่ 2: ลดความลึกของสี

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

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

วิธีที่ 3: เปลี่ยนรูปแบบไฟล์

แปลงเป็น WebP สำหรับการใช้งานบนเว็บ ซึ่งจะรักษาความโปร่งใสไว้ได้และโดยทั่วไปจะมีขนาดเล็กกว่า PNG 25 ถึง 35 เปอร์เซ็นต์ แปลงเป็น JPG เฉพาะเมื่อภาพนั้นเป็นภาพถ่ายและไม่ต้องการความโปร่งใส

• WebP แบบไม่สูญเสียคุณภาพ สำหรับกราฟิกและภาพหน้าจอ ซึ่งรักษาความแม่นยำของทุกพิกเซลและยังคงประหยัดพื้นที่ได้ 20 ถึง 30 เปอร์เซ็นต์
• WebP แบบสูญเสียคุณภาพ สำหรับไฟล์ภาพถ่าย PNG ซึ่งช่วยประหยัดพื้นที่ได้ถึง 70 เปอร์เซ็นต์หรือมากกว่า
• JPG สำหรับภาพถ่ายที่ไม่มีความโปร่งใส ซึ่งการใช้ PNG ถือเป็นตัวเลือกที่ไม่ถูกต้องตั้งแต่แรก
• AVIF สำหรับภาพถ่ายขนาดใหญ่ ซึ่งจะบีบอัดได้ดีกว่าเดิมบนไฟล์ที่มีขนาดเกิน 100 KB
• เวกเตอร์กราฟิก สำหรับโลโก้และไอคอน ซึ่งไฟล์ SVG อาจมีขนาดเพียงเสี้ยวเดียวของรูปแบบแรสเตอร์ใดๆ

สาเหตุที่พบบ่อยที่สุด: ภาพถ่ายที่ถูกบันทึกเป็น PNG

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

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

วิธีลดขนาด PNG โดยไม่สูญเสียคุณภาพ

หากต้องการลดขนาด PNG โดยยังคงรักษาคุณภาพแบบไม่สูญเสียความละเอียด ให้ทำตาม 5 ขั้นตอนเหล่านี้ตามลำดับ

1. ครอบตัดส่วนที่ไม่ได้ใช้ออก เนื่องจากขอบที่ว่างเปล่ายังคงทำให้เปลืองขนาดไฟล์
2. ปรับขนาดให้เท่ากับขนาดแสดงผลที่ใหญ่ที่สุดที่รูปภาพจะต้องใช้ โดยคูณสองสำหรับหน้าจอความหนาแน่นสูง
3. ตรวจสอบว่ารูปภาพจำเป็นต้องมีความโปร่งใสจริงๆ หรือไม่ เนื่องจากภาพที่ยุบเลเยอร์แล้วจะบีบอัดได้ดีกว่า
4. ลดพาเลตต์สีลงหากรูปภาพเป็นกราฟิกไม่ใช่ภาพถ่าย
5. แปลงเป็น WebP แบบไม่สูญเสียคุณภาพ ซึ่งยังคงมีความแม่นยำและโดยทั่วไปจะมีขนาดเล็กกว่า 20 ถึง 30 เปอร์เซ็นต์

ขั้นตอนที่ 1 และ 2 มักจะช่วยแก้ปัญหาได้ด้วยตัวเอง ขั้นตอนที่เหลือจะมีความสำคัญเมื่อรูปภาพจำเป็นต้องมีขนาดใหญ่มากๆ เช่น ภาพหน้าจอเต็มหน้าในคู่มือเอกสาร

ทำไมภาพหน้าจอบนหน้าจอสมัยใหม่จึงมีขนาดใหญ่มาก

จอแสดงผลความหนาแน่นสูงจะบันทึกภาพที่ความละเอียดสูงกว่าความละเอียดเชิงตรรกะ 2 หรือ 3 เท่า ดังนั้นภาพหน้าจอของหน้าต่างที่มีความกว้าง 1200 พิกเซล จึงถูกบันทึกที่ความละเอียด 2400 หรือ 3600 พิกเซล ไฟล์จึงมีขนาดใหญ่กว่าที่หน้าต่างนั้นปรากฏให้เห็นอยู่มาก

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

ควรเก็บ PNG ขนาดใหญ่ไว้เมื่อใด

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

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

ความโปร่งใสทำให้เปลืองพื้นที่มากกว่าที่คาดไว้

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

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

การบีบอัด PNG ทำให้คุณภาพลดลงหรือไม่

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

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

การแก้ไขไฟล์ PNG ขนาดใหญ่ทั้งโฟลเดอร์

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

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

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