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

Ilya Grigorik

Jeremy Wagner

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

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

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

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

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

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

วันที่

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

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

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

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

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

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

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

วันที่

ความแตกต่างระหว่างพิกเซล 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 เท่า ดังนั้น "2 เท่า" ไม่เพียงทวีคูณเท่านั้น แต่ยังเพิ่มจำนวนพิกเซลที่จำเป็นถึง 4 เท่าด้วย!

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

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

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

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

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

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

โดยทั่วไปแล้ว 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 เพื่อแสดงรูปภาพทั้งหมดของตนภายในแอปพลิเคชันของตน ที่ประหยัดได้นั้นคุ้มค่า

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

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

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