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

Ilya Grigorik

Jeremy Wagner

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

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

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

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

เลือกรูปแบบรูปภาพที่ถูกต้อง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ผลกระทบต่อ Largest Contentful Paint (LCP)

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

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