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

Ilya Grigorik

Jeremy Wagner

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

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

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

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

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

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

วันที่

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

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

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

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

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

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

วันที่

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

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

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

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

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

คุณลักษณะของรูปภาพแรสเตอร์รูปแบบต่างๆ

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

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

โดยทั่วไปแล้ว 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 เป็นส่วนหนึ่งของประสิทธิภาพทางการรับรู้ เนื่องจากจะวัดความเร็วในการแสดงองค์ประกอบที่ใหญ่ที่สุด (และรับรู้ได้ง่ายที่สุด) ในหน้าเว็บ