คำถามแรกที่คุณควรถามตัวเองคือ ภาพ ที่จำเป็นต้องทำเพื่อให้ได้ผลลัพธ์ที่คุณต้องการ การออกแบบที่ดีนั้นเป็นเรื่องง่ายและจะให้ประสิทธิภาพที่ดีที่สุดเสมอ หากคุณกำจัดทรัพยากรรูปภาพได้ ซึ่งมักต้องการไบต์จำนวนมากเมื่อเทียบกับ HTML, CSS, JavaScript และเนื้อหาอื่นๆ ในหน้าเว็บ นั่นเป็นกลยุทธ์การเพิ่มประสิทธิภาพที่ดีที่สุดเสมอ อย่างไรก็ตาม รูปภาพที่จัดวางอย่างดียังสื่อสารข้อมูลได้มากกว่า 1,000 คำ ดังนั้นจึงขึ้นอยู่กับคุณที่จะหาจุดสมดุลนั้น
ถัดไป คุณควรพิจารณาว่ามีเทคโนโลยีอื่นที่สามารถให้ผลลัพธ์ที่ต้องการหรือไม่ แต่ด้วยวิธีที่มีประสิทธิภาพมากกว่า
- เอฟเฟกต์ CSS (เช่น เงาหรือการไล่ระดับสี) และภาพเคลื่อนไหว CSS สามารถใช้ในการสร้างองค์ประกอบที่ไม่ขึ้นอยู่กับความละเอียด ซึ่งจะดูคมชัดในทุกระดับความละเอียดและการซูมเสมอ ซึ่งมักจะเป็นส่วนของไบต์ที่ไฟล์ภาพต้องการ
- แบบอักษรสำหรับเว็บใช้ลักษณะแบบอักษรที่สวยงาม ขณะที่คงความสามารถในการเลือก ค้นหา และปรับขนาดข้อความ ซึ่งถือเป็นการปรับปรุงความสามารถในการใช้งานอย่างมาก
หากพบว่ามีการเข้ารหัสข้อความในชิ้นงานรูปภาพ ให้หยุดและพิจารณาอีกครั้ง การออกแบบตัวอักษรที่ดีคือสิ่งสำคัญ สำหรับการออกแบบที่ดี การสร้างแบรนด์ และอ่านง่าย แต่โฆษณาแบบข้อความในรูปภาพให้ประสบการณ์ที่ไม่ดีแก่ผู้ใช้ ข้อความไม่สามารถเลือกได้ ค้นหาไม่ได้ ไม่สามารถซูมได้ ไม่สามารถเข้าถึงได้ และไม่เหมาะกับอุปกรณ์ที่มี DPI สูง การใช้แบบอักษรเว็บจำเป็นต้องมีชุดการเพิ่มประสิทธิภาพของตัวเอง แต่ก็ช่วยแก้ปัญหาทั้งหมดเหล่านี้ได้และเป็นทางเลือกที่ดีกว่าสำหรับแสดงข้อความเสมอ
เลือกรูปแบบรูปภาพที่เหมาะสม
หากแน่ใจว่ารูปภาพเป็นตัวเลือกที่ถูกต้อง คุณควรเลือกประเภทรูปภาพที่เหมาะสมกับงานอย่างระมัดระวัง
![เวกเตอร์และภาพแรสเตอร์แบบซูมเข้า](https://web.developers.google.cn/static/articles/choose-the-right-image-format/image/zoomed-vector-raster-image.png?authuser=6&hl=th)
- กราฟิกเวกเตอร์ ใช้เส้น จุด และรูปหลายเหลี่ยมในการแทนภาพ
- กราฟิกแรสเตอร์ แสดงออกถึงภาพโดยการเข้ารหัสแต่ละค่าของแต่ละพิกเซลภายในตารางกริดสี่เหลี่ยมผืนผ้า
แต่ละรูปแบบจะมีข้อดีและข้อเสียของตัวเอง รูปแบบเวกเตอร์เหมาะอย่างยิ่งสำหรับรูปภาพที่ประกอบด้วยรูปทรงเรขาคณิตง่ายๆ เช่น โลโก้ ข้อความ หรือไอคอน เพื่อให้ได้ผลลัพธ์ที่คมชัดในทุกความละเอียดและการตั้งค่าการซูม จึงเป็นรูปแบบที่เหมาะกับหน้าจอและชิ้นงานความละเอียดสูงที่จำเป็นต้องแสดงในขนาดต่างๆ
อย่างไรก็ตาม รูปแบบเวกเตอร์จะไม่สมบูรณ์เมื่อฉากมีความซับซ้อน (เช่น รูปภาพ) จำนวนมาร์กอัป SVG ที่ใช้อธิบายรูปร่างทั้งหมดอาจสูงมากๆ และผลลัพธ์อาจยังคงไม่ดู "สมจริง" นั่นคือเวลาที่คุณควรใช้รูปแบบรูปภาพแรสเตอร์ เช่น PNG, JPEG, WebP หรือ AVIF
รูปภาพแรสเตอร์ไม่ได้มีคุณสมบัติที่ดีเดียวกันกับความละเอียดหรือการซูมโดยอิสระ —เมื่อคุณขยายขนาดรูปภาพแรสเตอร์ คุณจะเห็นกราฟิกที่ขรุขระและเบลอ ดังนั้น คุณอาจต้องบันทึกรูปภาพแรสเตอร์หลายเวอร์ชันที่มีความละเอียดต่างกัน เพื่อมอบประสบการณ์ที่ดีที่สุดแก่ผู้ใช้
ผลกระทบของหน้าจอความละเอียดสูง
พิกเซลมี 2 ประเภท ได้แก่ พิกเซล CSS และพิกเซลอุปกรณ์ พิกเซล CSS หนึ่งอาจสอดคล้องกับพิกเซลของอุปกรณ์ 1 พิกเซลโดยตรง หรืออาจสนับสนุนโดยพิกเซลอุปกรณ์หลายพิกเซล ประเด็นคืออะไร ยิ่งมีพิกเซลของอุปกรณ์มากเท่าใด รายละเอียดของเนื้อหาที่แสดงบนหน้าจอก็ยิ่งมากขึ้นเท่านั้น
![รูปภาพ 3 รูปแสดงความแตกต่างระหว่างพิกเซล CSS และพิกเซลของอุปกรณ์](https://web.developers.google.cn/static/articles/choose-the-right-image-format/image/three-images-showing-dif-674a2b17f1ab7.png?authuser=6&hl=th)
หน้าจอที่มี 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
ในแง่ของรูปแบบรูปภาพที่เก่ากว่า ให้พิจารณาสิ่งต่อไปนี้
- คุณต้องมีภาพเคลื่อนไหวไหม ใช้องค์ประกอบ
<video>
- แล้ว GIF ล่ะ GIF จำกัดชุดสีไว้ไม่เกิน 256 สี
และสร้างขนาดไฟล์ที่มีขนาดใหญ่กว่าองค์ประกอบ
<video>
อย่างมาก โปรดดู แทนที่ GIF แบบเคลื่อนไหวด้วยวิดีโอ
- แล้ว GIF ล่ะ GIF จำกัดชุดสีไว้ไม่เกิน 256 สี
และสร้างขนาดไฟล์ที่มีขนาดใหญ่กว่าองค์ประกอบ
- คุณต้องรักษารายละเอียดด้วยความละเอียดสูงสุดหรือไม่ ใช้ PNG หรือ WebP แบบไม่สูญเสียรายละเอียด
- PNG ไม่ใช้อัลกอริทึมการบีบอัดแบบสูญเสียบางส่วนที่เกินกว่าขนาดของชุดสีที่เลือก ผลลัพธ์ที่ได้คือรูปภาพที่มีคุณภาพสูงสุด แต่ไฟล์ต้องมีค่าใช้จ่าย สูงกว่ารูปแบบอื่นๆ อย่างมาก ใช้อย่างรอบคอบ
- WebP มีโหมดการเข้ารหัสแบบไม่สูญเสียรายละเอียดที่อาจมีประสิทธิภาพมากกว่า PNG
- หากเนื้อหารูปภาพมีภาพที่ประกอบด้วยรูปทรงเรขาคณิต ให้ลองแปลงเป็นรูปแบบเวกเตอร์ (SVG)
- หากชิ้นงานรูปภาพมีข้อความ ให้หยุดและพิจารณาใหม่ ข้อความในรูปภาพไม่สามารถเลือก ค้นหาได้ หรือ "ซูมได้" หากต้องการสื่อถึงรูปลักษณ์ที่กำหนดเอง (เพื่อการสร้างแบรนด์หรือเหตุผลอื่นๆ) ให้ใช้แบบอักษรเว็บแทน
- คุณเพิ่มประสิทธิภาพให้กับรูปภาพ ภาพหน้าจอ หรือชิ้นงานรูปภาพที่คล้ายกันใช่ไหม ให้ใช้ JPEG, WebP แบบสูญเสียบางส่วน หรือ AVIF
- JPEG ใช้ทั้งการเพิ่มประสิทธิภาพแบบสูญเสียบางส่วนและไม่สูญเสียข้อมูลเพื่อลดขนาดไฟล์ของชิ้นงานรูปภาพ ลองใช้ระดับคุณภาพของ JPEG หลายๆ ระดับเพื่อหาคุณภาพที่ดีที่สุดเมื่อเทียบกับคุณภาพที่ดีที่สุดสําหรับขนาดไฟล์ของคุณ
- WebP แบบสูญเสียรายละเอียดหรือ AVIF แบบสูญเสียบางส่วนเป็นตัวเลือก JPEG ที่ยอดเยี่ยมสำหรับรูปภาพที่มีคุณภาพระดับเว็บ แต่โปรดทราบว่าโหมดสูญเสียบางส่วนจะทิ้งข้อมูลบางส่วนเพื่อให้ได้รูปภาพที่มีขนาดเล็กกว่า ซึ่งหมายความว่าสีที่เลือกอาจไม่เหมือนกับภาพ JPEG ที่เทียบเท่ากัน
สุดท้ายนี้ โปรดทราบว่าหากคุณใช้ WebView เพื่อแสดงผลเนื้อหาในแอปพลิเคชันเฉพาะแพลตฟอร์ม คุณจะควบคุมไคลเอ็นต์ได้อย่างเต็มที่และใช้ WebP เพียงอย่างเดียวได้ Facebook และบริษัทอื่นๆ อีกหลายรายใช้ WebP เพื่อแสดงรูปภาพทั้งหมดของตนภายในแอปพลิเคชันของตน ที่ประหยัดได้นั้นคุ้มค่า
ผลกระทบต่อ Largest Contentful Paint (LCP)
รูปภาพอาจเป็นตัวเลือก LCP ซึ่งหมายความว่าขนาดของรูปภาพจะส่งผลต่อเวลาที่ใช้ในการโหลด เมื่อรูปภาพเป็นตัวเลือก LCP การเข้ารหัสรูปภาพอย่างมีประสิทธิภาพนั้นสำคัญต่อการปรับปรุง LCP
คุณควรพยายามนำคำแนะนำที่ให้ไว้ในบทความนี้ไปใช้เพื่อให้ประสิทธิภาพด้านการรับรู้ของหน้าเว็บมีประสิทธิภาพรวดเร็วที่สุดเท่าที่จะเป็นไปได้สำหรับผู้ใช้ทุกคน LCP เป็นส่วนหนึ่งของประสิทธิภาพทางการรับรู้ เนื่องจากจะวัดความเร็วในการแสดงองค์ประกอบที่ใหญ่ที่สุด (และรับรู้ได้ง่ายที่สุด) ในหน้าเว็บ