เลือกรูปแบบรูปภาพที่เหมาะสม

Ilya Grigorik

เจเรมี แวกเนอร์

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

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

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

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

เลือกรูปแบบรูปภาพที่เหมาะสม

ถ้าคุณมั่นใจว่ารูปภาพเป็นตัวเลือกที่ถูกต้อง คุณควรเลือกชนิดรูปภาพที่เหมาะสมสำหรับงานอย่างรอบคอบ

รูปภาพเวกเตอร์แบบซูมเข้า (L) รูปภาพแรสเตอร์ (R)

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

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

อย่างไรก็ตาม รูปแบบเวกเตอร์จะสั้นเข้าเมื่อฉากมีความซับซ้อน (เช่น รูปภาพ) ขนาดมาร์กอัป SVG เพื่ออธิบายรูปร่างทั้งหมดอาจมีสูงเกินกว่าความเป็นจริงและเอาต์พุตก็อาจไม่ดู "สมจริง" ในกรณีนี้ คุณควรใช้รูปแบบรูปภาพแบบแรสเตอร์ เช่น PNG, JPEG, WebP หรือ AVIF

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

ผลกระทบของหน้าจอความละเอียดสูง

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

ความแตกต่างระหว่างพิกเซล CSS และพิกเซลของอุปกรณ์

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

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

ความละเอียดของหน้าจอ	พิกเซลทั้งหมด	ขนาดไฟล์ที่ไม่มีการบีบอัด (4 ไบต์ต่อพิกเซล)
1 เท่า	100 x 100 = 10,000	40,000 ไบต์
2 เท่า	100 x 100 x 4 = 40,000	160,000 ไบต์
3 เท่า	100 x 100 x 9 = 90,000	360,000 ไบต์

เมื่อเราเพิ่มความละเอียดของหน้าจอจริงเป็น 2 เท่า จำนวนพิกเซลทั้งหมดจะเพิ่มขึ้นตามตัวประกอบเป็น 4 นั่นคือ จำนวนพิกเซลแนวนอนเป็น 2 เท่า คูณกับจำนวนพิกเซลแนวตั้งเป็น 2 เท่า ดังนั้น หน้าจอ "2x" ไม่ใช่แค่เพิ่มเป็น 2 เท่า แต่ทำให้จำนวนพิกเซลที่ต้องใช้เพิ่มขึ้นเป็น 4 เท่า

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

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

ฟีเจอร์ของรูปแบบรูปภาพแรสเตอร์ต่างๆ

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

รูปแบบ	ความโปร่งใส	แอนิเมชัน	เบราว์เซอร์
PNG	ใช่	ไม่ได้	ทั้งหมด
JPEG	ไม่ได้	ไม่ได้	ทั้งหมด
WebP	ใช่	ใช่	เบราว์เซอร์ที่ทันสมัยทั้งหมด โปรดดูที่ฉันจะใช้ได้ไหม
AVIF	ใช่	ใช่	ไม่ โปรดดูที่ฉันจะใช้ได้ไหม

รูปแบบภาพแรสเตอร์ที่รองรับโดยทั่วไปมี 2 รูปแบบ ได้แก่ PNG และ JPEG นอกเหนือจากรูปแบบเหล่านี้แล้ว เบราว์เซอร์ที่ทันสมัยยังสนับสนุน WebP รูปแบบใหม่ที่มีเพียงบางรูปแบบเท่านั้นที่สนับสนุนรูปแบบ AVIF ที่ใหม่กว่า ทั้ง 2 รูปแบบใหม่ล่าสุดมีการบีบอัดโดยรวมที่ดีกว่าและมีฟีเจอร์มากกว่า แล้วคุณควรใช้รูปแบบใด

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

สำหรับรูปแบบรูปภาพเก่า ให้พิจารณาสิ่งต่อไปนี้

1. อยากดูภาพเคลื่อนไหวไหม ใช้องค์ประกอบ <video>
   • แล้ว GIF ล่ะ GIF จำกัดชุดสีไว้ที่ไม่เกิน 256 สี และสร้างขนาดไฟล์ที่ใหญ่กว่าองค์ประกอบ <video> อย่างมาก โปรดดูแทนที่ GIF แบบเคลื่อนไหวด้วยวิดีโอ
2. คุณต้องการเก็บรายละเอียดที่มีความละเอียดสูงสุดหรือไม่ โปรดใช้ PNG หรือ WebP แบบไม่สูญเสียรายละเอียด
   • PNG ไม่ใช้อัลกอริทึมการบีบอัดแบบสูญเสียเพิ่มเติมใดๆ นอกเหนือจากการเลือกขนาดของชุดสี ผลที่ได้คือรูปภาพจะได้รูปภาพที่มีคุณภาพสูงสุด แต่จะมีขนาดไฟล์สูงกว่ารูปแบบอื่นๆ อย่างมาก ใช้อย่างรอบคอบ
   • WebP มีโหมดการเข้ารหัสแบบไม่สูญเสียรายละเอียดซึ่งอาจมีประสิทธิภาพมากกว่า PNG
   • หากชิ้นงานรูปภาพมีภาพที่ประกอบด้วยรูปทรงเรขาคณิต ให้ลองแปลงเป็นรูปแบบเวกเตอร์ (SVG)
   • หากชิ้นงานรูปภาพมีข้อความ ให้หยุดแล้วพิจารณาใหม่ ไม่สามารถเลือก ค้นหา หรือ "ซูม" ข้อความในรูปภาพได้ หากต้องการสื่อถึงรูปลักษณ์ที่กำหนดเอง (เพื่อการสร้างแบรนด์หรือเหตุผลอื่นๆ) ให้ใช้แบบอักษรเว็บแทน
3. คุณกำลังเพิ่มประสิทธิภาพรูปภาพ ภาพหน้าจอ หรือชิ้นงานรูปภาพที่คล้ายกัน ใช้ JPEG, WebP แบบสูญเสียรายละเอียด หรือ AVIF แบบสูญเสียรายละเอียด
   • JPEG ใช้การผสมผสานระหว่างการเพิ่มประสิทธิภาพแบบไม่สูญเสียรายละเอียดและไม่สูญเสียข้อมูลเพื่อลดขนาดไฟล์ของชิ้นงานรูปภาพ ลองใช้ระดับคุณภาพ JPEG หลายๆ ระดับเพื่อค้นหาคุณภาพที่ดีที่สุดเมื่อเทียบกับขนาดไฟล์ที่ต้องการสำหรับชิ้นงาน
   • WebP แบบสูญเสียรายละเอียดหรือ AVIF แบบสูญเสียบางส่วนอาจเป็นตัวเลือก JPEG ที่ระบบรองรับ แต่อย่าลืมว่าโหมดที่สูญเสียข้อมูลแบบสูญเสียบางส่วนของ WebP จะทิ้งข้อมูลสีจางบางส่วนเพื่อให้ได้ภาพที่เล็กลง ซึ่งหมายความว่าสีที่เลือกอาจไม่เหมือนกัน JPEG ที่เทียบเท่า

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

ผลกระทบต่อการแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP)

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

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