รูปภาพมักเป็นแหล่งข้อมูลที่หนักที่สุดและพบบ่อยที่สุดในเว็บ ด้วยเหตุนี้ การเพิ่มประสิทธิภาพรูปภาพจึงช่วยปรับปรุงประสิทธิภาพเว็บไซต์ได้อย่างมาก ในกรณีส่วนใหญ่ การเพิ่มประสิทธิภาพรูปภาพหมายถึงการลดเวลาของเครือข่ายโดยส่งไบต์น้อยลง แต่คุณยังเพิ่มประสิทธิภาพจำนวนไบต์ที่ส่งให้ผู้ใช้ได้ด้วยโดยแสดงรูปภาพที่มีขนาดเหมาะสมสำหรับอุปกรณ์ของผู้ใช้
คุณเพิ่มรูปภาพลงในหน้าเว็บได้โดยใช้องค์ประกอบ <img> หรือ <picture> หรือพร็อพเพอร์ตี้ background-image ของ CSS
Image size
การเพิ่มประสิทธิภาพอย่างแรกที่คุณทำได้เมื่อต้องใช้ทรัพยากรรูปภาพคือการแสดงภาพในขนาดที่ถูกต้อง ในกรณีนี้คำว่าขนาดหมายถึงขนาดของรูปภาพ เมื่อพิจารณาไม่ใช่ตัวแปรอื่น รูปภาพที่แสดงในคอนเทนเนอร์ 500 x 500 พิกเซลจะมีขนาดที่เหมาะสมที่ 500 พิกเซล x 500 พิกเซล เช่น การใช้รูปภาพสี่เหลี่ยมจัตุรัสขนาด 1000 พิกเซลหมายความว่ารูปภาพมีขนาดใหญ่เป็น 2 เท่าตามต้องการ
อย่างไรก็ตาม มีตัวแปรมากมายที่เกี่ยวข้องกับการเลือกขนาดรูปภาพที่เหมาะสม ซึ่งทำให้การเลือกขนาดรูปภาพที่เหมาะสมในทุกกรณีเป็นเรื่องที่ค่อนข้างซับซ้อน ในปี 2010 เมื่อ iPhone 4 วางจำหน่าย ความละเอียดหน้าจอ (640x960) เป็น 2 เท่าของ iPhone 3 (320x480) แต่ขนาดจริงของหน้าจอ iPhone 4 ยังใกล้เคียงกับ iPhone 3 พอๆ กับ iPhone 3
การแสดงทุกอย่างที่ความละเอียดสูงกว่าจะทำให้ข้อความและรูปภาพมีขนาดเล็กลงมาก เมื่อลดขนาดลงครึ่งหนึ่งของขนาดก่อนหน้านี้ แต่ 1 พิกเซลจะกลายเป็น 2 พิกเซลของอุปกรณ์ ซึ่งเรียกว่าอัตราส่วนพิกเซลของอุปกรณ์ (DPR) iPhone 4 และ iPhone หลายๆ รุ่นที่เปิดตัวหลังจากนั้นมี DPR เท่ากับ 2
ดูตัวอย่างก่อนหน้านี้ หากอุปกรณ์มี DPR เป็น 2 และรูปภาพแสดงในคอนเทนเนอร์ขนาด 500 x 500 พิกเซล จากนั้นรูปภาพสี่เหลี่ยมจัตุรัสขนาด 1,000 พิกเซล (หรือที่เรียกว่าขนาดภายใน) จะเป็นขนาดที่เหมาะสมที่สุดแล้ว ในทำนองเดียวกัน หากอุปกรณ์มี DPR เท่ากับ 3 รูปภาพสี่เหลี่ยมจัตุรัสขนาด 1,500 พิกเซลจะเป็นขนาดที่เหมาะสมที่สุด
srcset
องค์ประกอบ <img> รองรับแอตทริบิวต์ srcset ซึ่งช่วยให้คุณระบุรายการแหล่งที่มาของรูปภาพที่เป็นไปได้ซึ่งเบราว์เซอร์อาจใช้ แหล่งที่มาของรูปภาพแต่ละแหล่งที่ระบุ
ต้องมี URL ของรูปภาพและข้อบ่งชี้ความกว้างหรือความหนาแน่นของพิกเซล
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
ข้อมูลโค้ด HTML ก่อนหน้านี้ใช้ข้อบ่งชี้ความหนาแน่นของพิกเซลในการบอกใบ้ให้เบราว์เซอร์ใช้ image-500.png ในอุปกรณ์ที่มี DPR เป็น 1, image-1000.jpg ในอุปกรณ์ที่มี DPR เท่ากับ 2 และ image-1500.jpg ในอุปกรณ์ที่มี DPR เท่ากับ 3
แม้ว่าทั้งหมดนี้อาจจะดูไม่ซับซ้อน แต่ DPR ของหน้าจอก็ไม่ใช่ข้อควรพิจารณาเพียงอย่างเดียวในการเลือกรูปภาพที่เหมาะสมที่สุดสำหรับหน้าเว็บหนึ่งๆ เลย์เอาต์ของหน้าก็เป็นอีกปัจจัยหนึ่งที่ต้องพิจารณา
sizes
โซลูชันก่อนหน้านี้จะใช้ได้ก็ต่อเมื่อคุณแสดงรูปภาพที่ขนาดพิกเซล CSS เดียวกันบนวิวพอร์ตทั้งหมดเท่านั้น ในหลายๆ กรณี เลย์เอาต์ของหน้าเว็บและขนาดคอนเทนเนอร์ในหน้านั้นจะเปลี่ยนไปตามอุปกรณ์ของผู้ใช้
แอตทริบิวต์ sizes ช่วยให้คุณระบุชุดของขนาดแหล่งที่มาได้ โดยขนาดแหล่งที่มาแต่ละขนาดประกอบด้วยเงื่อนไขสื่อและค่า แอตทริบิวต์ sizes อธิบายขนาดการแสดงผลที่ต้องการของรูปภาพเป็นพิกเซล CSS เมื่อผสานกับตัวบ่งชี้ความกว้าง srcset เบราว์เซอร์จะสามารถเลือกแหล่งที่มาของรูปภาพที่ดีที่สุดสำหรับอุปกรณ์ของผู้ใช้ได้
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
ในข้อมูลโค้ด HTML ก่อนหน้า แอตทริบิวต์ srcset จะระบุรายการตัวเลือกรูปภาพที่เบราว์เซอร์สามารถเลือกได้ โดยคั่นด้วยเครื่องหมายจุลภาค แต่ละคำที่รอพิจารณาในรายการประกอบด้วย URL ของรูปภาพ ตามด้วยไวยากรณ์ที่แสดงความกว้างที่แท้จริงของรูปภาพ ขนาดภายในของรูปภาพคือขนาด เช่น ตัวบ่งชี้ของ 1000w หมายความว่าความกว้างที่แท้จริงของรูปภาพมีความกว้าง 1, 000 พิกเซล
เมื่อใช้ข้อมูลนี้ เบราว์เซอร์จะประเมินเงื่อนไขของสื่อในแอตทริบิวต์ sizes และในกรณีนี้จะได้รับคำสั่งว่าหากความกว้างของวิวพอร์ตของอุปกรณ์เกิน 768 พิกเซล รูปภาพจะแสดงเป็นความกว้าง 500 พิกเซล ในอุปกรณ์ขนาดเล็ก รูปภาพจะแสดงเป็น 100vw หรือความกว้างเต็มวิวพอร์ต
จากนั้นเบราว์เซอร์จะรวมข้อมูลนี้กับรายการแหล่งที่มาของรูปภาพ srcset เพื่อหารูปภาพที่ดีที่สุด เช่น หากผู้ใช้ใช้อุปกรณ์เคลื่อนที่ที่มีความกว้างหน้าจอ 320 พิกเซลโดยมี DPR เท่ากับ 3 รูปภาพจะแสดงที่ 320 CSS pixels x 3 DPR = 960 device pixels ในตัวอย่างนี้ รูปภาพขนาดที่ใกล้เคียงที่สุดคือ image-1000.jpg ซึ่งมีความกว้างที่แท้จริง 1, 000 พิกเซล (1000w)
รูปแบบไฟล์
เบราว์เซอร์รองรับไฟล์ภาพหลายรูปแบบ รูปแบบรูปภาพที่ทันสมัย เช่น WebP และ AVIF อาจบีบอัดได้ดีกว่า PNG หรือ JPEG ทำให้ขนาดไฟล์รูปภาพเล็กลงและใช้เวลาในการดาวน์โหลดน้อยลง การแสดงรูปภาพในรูปแบบสมัยใหม่ช่วยให้คุณลดเวลาในการโหลดของทรัพยากรได้ ซึ่งอาจส่งผลให้ Largest Contentful Paint (LCP) ลดลง
WebP เป็นรูปแบบที่รองรับอย่างกว้างขวางและทำงานได้ในเบราว์เซอร์สมัยใหม่ทั้งหมด WebP มักมีการบีบอัดดีกว่า JPEG, PNG หรือ GIF ซึ่งให้ทั้งไฟล์แบบสูญเสียข้อมูลและการบีบอัดแบบไม่สูญเสียข้อมูล นอกจากนี้ WebP ยังรองรับความโปร่งใสของช่องอัลฟ่าแม้ว่าจะใช้การบีบอัดแบบสูญเสียบางส่วน ซึ่งเป็นฟีเจอร์ที่ตัวแปลงรหัส JPEG ไม่มี
AVIF เป็นรูปแบบรูปภาพที่ใหม่กว่าและถึงแม้ว่าจะไม่ได้รับการสนับสนุนอย่างกว้างขวางเท่ากับ WebP แต่ก็ได้รับการสนับสนุนที่สมเหตุสมผลในเบราว์เซอร์ต่างๆ AVIF รองรับทั้งการบีบอัดแบบสูญเสียและไม่สูญเสียข้อมูล และการทดสอบพบว่าประหยัดได้มากกว่า 50% เมื่อเปรียบเทียบกับ JPEG ในบางกรณี AVIF ยังมีฟีเจอร์ wide Color Gamut (WCG) และ High Dynamic Range (HDR)
การบีบอัด
หากเกี่ยวข้องกับรูปภาพ การบีบอัดมี 2 ประเภท ได้แก่
การบีบอัดแบบเสียดสีทำงานโดยการลดความแม่นยำของรูปภาพผ่านการวัดปริมาณ และคุณอาจทิ้งข้อมูลสีเพิ่มเติมได้โดยใช้การสุ่มย่อยโครมา การบีบอัดแบบเสียดสีมีประสิทธิภาพมากที่สุดในภาพความหนาแน่นสูงที่มีนอยส์และสีจำนวนมาก โดยทั่วไปจะเป็นภาพถ่ายหรือภาพที่มีเนื้อหาคล้ายกัน เนื่องจากอาร์ติแฟกต์ที่เกิดจากการบีบอัดแบบสูญเสียบางส่วนมีแนวโน้มที่จะสังเกตเห็นได้น้อยในภาพที่มีรายละเอียดเช่นนี้ อย่างไรก็ตาม การบีบอัดแบบสูญเสียบางส่วนอาจมีประสิทธิภาพน้อยกว่าสำหรับภาพที่มีขอบคมชัด เช่น ภาพลายเส้น รายละเอียดที่คล้ายคลึงกัน หรือข้อความ การบีบอัดแบบสูญเสียอาจใช้ได้กับรูปภาพ JPEG, WebP และ AVIF
การบีบอัดแบบไม่สูญเสียข้อมูลจะลดขนาดไฟล์โดยการบีบอัดรูปภาพโดยไม่สูญเสียข้อมูล การบีบอัดแบบไม่สูญเสียข้อมูลจะอธิบายพิกเซลตามความแตกต่างจากพิกเซลที่อยู่ใกล้เคียง การบีบอัดแบบไม่สูญเสียข้อมูลจะใช้สำหรับรูปแบบรูปภาพ GIF, PNG, WebP และ AVIF
คุณบีบอัดรูปภาพได้โดยใช้ Squoosh, ImageOptim หรือบริการเพิ่มประสิทธิภาพรูปภาพ ขณะบีบอัด จะไม่มีการตั้งค่าสากลที่เหมาะสำหรับทุกกรณี วิธีที่แนะนำคือทดลองใช้ระดับการบีบอัดที่ต่างกันจนกว่าจะพบความสมดุลระหว่างคุณภาพของรูปกับขนาดไฟล์ บริการเพิ่มประสิทธิภาพรูปภาพขั้นสูงบางบริการสามารถดำเนินการนี้ให้คุณโดยอัตโนมัติ แต่อาจไม่สามารถใช้ทางการเงินได้สำหรับผู้ใช้ทุกคน
องค์ประกอบ <picture>
องค์ประกอบ <picture> ช่วยให้คุณระบุตัวเลือกรูปภาพหลายรูปได้อย่างยืดหยุ่นมากขึ้น ดังนี้
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img
alt="An image"
width="500"
height="500"
src="/image.jpg"
>
</picture>
เมื่อใช้องค์ประกอบ <source> ภายในองค์ประกอบ <picture> คุณจะเพิ่มการรองรับรูปภาพ AVIF และ WebP ได้ แต่กลับไปใช้รูปแบบรูปภาพเดิมที่เข้ากันได้มากกว่าหากเบราว์เซอร์ไม่รองรับรูปแบบสมัยใหม่ ด้วยวิธีนี้ เบราว์เซอร์จะเลือกองค์ประกอบ <source> แรกที่ระบุว่าตรงกัน หากแสดงผลรูปภาพในรูปแบบนั้นได้ ก็จะใช้รูปภาพนั้น มิเช่นนั้น เบราว์เซอร์จะย้ายไปยังองค์ประกอบ <source> ที่ระบุถัดไป ในข้อมูลโค้ด HTML ก่อนหน้านี้ รูปแบบ AVIF จะมีลำดับความสำคัญเหนือรูปแบบ WebP โดยจะกลับไปใช้รูปแบบ JPEG หากไม่รองรับ AVIF หรือ WebP
องค์ประกอบ <picture> ต้องมีองค์ประกอบ <img> ที่ฝังอยู่ภายใน แอตทริบิวต์ alt, width และ height ได้รับการกําหนดไว้ใน<img> และจะมีการใช้งานไม่ว่าจะเลือก <source> ใดไว้ก็ตาม
องค์ประกอบ <source> รองรับแอตทริบิวต์ media, srcset และ sizes ด้วย คล้ายกับตัวอย่าง <img> ก่อนหน้านี้ โดยจะแสดงให้เบราว์เซอร์ทราบว่าควรเลือกรูปภาพใดในวิวพอร์ตต่างๆ
<picture>
<source
media="(min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
แอตทริบิวต์ media จะใช้เงื่อนไขสื่อ ในตัวอย่างก่อนหน้านี้ ระบบใช้ DPR ของอุปกรณ์เป็นเงื่อนไขของสื่อ อุปกรณ์ที่มี DPR มากกว่าหรือเท่ากับ 1.5 จะใช้องค์ประกอบ <source> แรก องค์ประกอบ <source> จะบอกเบราว์เซอร์ว่าในอุปกรณ์ที่มีวิวพอร์ตกว้างกว่า 768 พิกเซล ตัวเลือกรูปภาพที่เลือกจะแสดงที่ความกว้าง 500 พิกเซล ส่วนในอุปกรณ์ขนาดเล็ก
จะใช้ความกว้างของวิวพอร์ตทั้งหมด การรวมแอตทริบิวต์ media และ srcset เข้าด้วยกันจะทำให้คุณควบคุมได้มากขึ้นว่าจะใช้รูปภาพใด
ดังที่เห็นในตารางต่อไปนี้ซึ่งมีการประเมินความกว้างของวิวพอร์ตและอัตราส่วนพิกเซลของอุปกรณ์หลายรายการ
| ความกว้างของวิวพอร์ต (พิกเซล) | 1 DPR | 1.5 สาธารณรัฐประชาธิปไตยประชาชน | 2 DPR | 3 DPR |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.jpg | 1000.jpg |
| 480 | 500.jpg | 500.jpg | 1000.jpg | 1500.jpg |
| 560 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
อุปกรณ์ที่มี DPR เท่ากับ 1 จะดาวน์โหลดรูปภาพ image-500.jpg รวมถึงผู้ใช้เดสก์ท็อปส่วนใหญ่ที่ดูรูปภาพในขนาดภายนอกกว้าง 500 พิกเซล ในทางตรงกันข้าม ผู้ใช้อุปกรณ์เคลื่อนที่ที่มี DPR เท่ากับ 3 จะดาวน์โหลด image-1500.jpg ที่อาจมีขนาดใหญ่กว่า ซึ่งเป็นรูปภาพเดียวกับที่ใช้ในอุปกรณ์เดสก์ท็อปที่มี DPR เท่ากับ 3
<picture>
<source
media="(min-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<source
media="(max-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
ในตัวอย่างนี้ องค์ประกอบ <picture> ได้รับการปรับให้รวมองค์ประกอบ <source> เพิ่มเติมเพื่อใช้รูปภาพที่แตกต่างกันสำหรับอุปกรณ์แบบกว้างที่มี DPR สูง
| ความกว้างของวิวพอร์ต (พิกเซล) | 1 DPR | 1.5 สาธารณรัฐประชาธิปไตยประชาชน | 2 DPR | 3 DPR |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.jpg | 1000-sm.jpg |
| 480 | 500.jpg | 500.jpg | 1000-sm.jpg | 1500-sm.jpg |
| 560 | 500.jpg | 1000-sm.jpg | 1000-sm.jpg | 1500-sm.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
การค้นหาเพิ่มเติมนี้จะแสดงให้เห็นว่า image-1000-sm.jpg และ image-1500-sm.jpg แสดงอยู่ในวิวพอร์ตขนาดเล็ก ข้อมูลเพิ่มเติมนี้จะช่วยคุณบีบอัดรูปภาพได้เพิ่มเติม เนื่องจากอาร์ติแฟกต์การบีบอัดจะมองไม่เห็นขนาดและความหนาแน่นสูงนัก และจะไม่ทำให้คุณภาพของรูปในอุปกรณ์เดสก์ท็อปลดลงด้วย
นอกจากนี้ การปรับแอตทริบิวต์ srcset และ media จะช่วยให้คุณหลีกเลี่ยงการแสดงรูปภาพขนาดใหญ่ในวิวพอร์ตขนาดเล็กได้ โดยทำดังนี้
<picture>
<source
media="(min-width: 560px)"
srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
<source
media="(max-width: 560px)"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
ในข้อมูลโค้ด HTML ก่อนหน้านี้ เราได้นำข้อบ่งชี้ความกว้างออกเพื่อใช้ข้อบ่งชี้อัตราส่วนพิกเซลของอุปกรณ์ รูปภาพที่แสดงในอุปกรณ์เคลื่อนที่จะจำกัดไว้ที่ /image-500.jpg หรือ /image-1000.jpg แม้จะอยู่ในอุปกรณ์ที่มี DPR เท่ากับ 3 ก็ตาม
วิธีจัดการความซับซ้อน
เมื่อใช้รูปภาพที่ตอบสนองตามอุปกรณ์ คุณจะเห็นได้ว่าแต่ละรูปภาพมีหลายขนาดและหลายรูปแบบ ในตัวอย่างก่อนหน้านี้จะใช้รูปแบบต่างๆ สำหรับแต่ละขนาด แต่ไม่รวม AVIF และ WebP คุณควรมีตัวแปรกี่ตัว เช่นเดียวกับโจทย์ด้านวิศวกรรมหลายๆ ข้อ คำตอบมักจะเป็น "แล้วแต่กรณี"
แม้ว่าการมีรูปแบบที่หลากหลายเพื่อให้ขนาดเหมาะสมที่สุดจะน่าดึงดูด แต่รูปแบบรูปภาพเพิ่มเติมทุกแบบจะต้องมีค่าใช้จ่ายและทำให้การใช้แคชของเบราว์เซอร์มีประสิทธิภาพลดลง เมื่อมีตัวแปรเดียว ผู้ใช้ทุกคนจะได้รับรูปภาพเดียวกัน จึงแคชได้อย่างมีประสิทธิภาพ
ในทางกลับกัน หากมีหลายรูปแบบ แต่ละตัวแปรก็ต้องใช้รายการแคชอีกรายการ ค่าใช้จ่ายของเซิร์ฟเวอร์อาจเพิ่มขึ้นและอาจลดประสิทธิภาพหากรายการแคชของตัวแปรหมดอายุแล้ว และต้องมีการดึงข้อมูลรูปภาพอีกครั้งจากเซิร์ฟเวอร์ต้นทาง
นอกจากนี้ ขนาดของเอกสาร HTML จะเพิ่มขึ้นตามแต่ละรูปแบบ คุณจะพบว่าตัวเองส่ง HTML หลายกิโลไบต์ต่อรูป
แสดงรูปภาพตามส่วนหัวของคำขอ Accept
ส่วนหัวคำขอ HTTP ของ Accept จะแจ้งให้เซิร์ฟเวอร์ทราบประเภทเนื้อหาที่เบราว์เซอร์ของผู้ใช้เข้าใจ เซิร์ฟเวอร์จะใช้ข้อมูลนี้เพื่อแสดงรูปแบบรูปภาพที่ดีที่สุดโดยไม่ต้องเพิ่มไบต์เพิ่มเติมลงในการตอบสนอง HTML
if (request.headers.accept) {
if (request.headers.accept.includes('image/avif')) {
return reply.from('image.avif');
} else if (request.headers.accept.includes('image/webp')) {
return reply.from('image.webp');
}
}
return reply.from('image.jpg');
ข้อมูลโค้ด HTML ก่อนหน้านี้คือโค้ดเวอร์ชันง่ายๆ ที่คุณสามารถเพิ่มลงในแบ็กเอนด์ JavaScript ของเซิร์ฟเวอร์เพื่อเลือกและแสดงรูปแบบรูปภาพที่เหมาะสมที่สุดได้
หากส่วนหัว Accept ของคำขอมี image/avif ระบบจะแสดงรูปภาพ AVIF มิเช่นนั้น หากส่วนหัว Accept มี image/webp ระบบจะแสดงรูปภาพ WebP หากไม่มีเงื่อนไขใดเป็นจริง รูปภาพ JPEG จะแสดงขึ้นมา
คุณแก้ไขการตอบกลับตามเนื้อหาของส่วนหัวของคำขอ Accept ในเว็บเซิร์ฟเวอร์ได้เกือบทุกประเภท เช่น อาจเขียนคำขอรูปภาพใหม่ในเซิร์ฟเวอร์ Apache โดยอิงตามส่วนหัว Accept โดยใช้ mod_rewrite
ซึ่งไม่เหมือนกับลักษณะการทำงานที่คุณจะพบในเครือข่ายนำส่งเนื้อหารูปภาพ (CDN) CDN ของรูปภาพเป็นโซลูชันที่ยอดเยี่ยมสำหรับการเพิ่มประสิทธิภาพรูปภาพและส่งรูปแบบที่เหมาะสมที่สุดตามอุปกรณ์และเบราว์เซอร์ของผู้ใช้
สิ่งสำคัญคือการหาสมดุล สร้างตัวเลือกรูปภาพที่สมเหตุสมผล และวัดผลกระทบที่มีต่อประสบการณ์ของผู้ใช้ รูปภาพที่ต่างกันอาจให้ผลลัพธ์ที่ต่างกัน และการเพิ่มประสิทธิภาพที่ใช้กับรูปภาพแต่ละรูปจะขึ้นอยู่กับขนาดภายในหน้าเว็บและอุปกรณ์ที่ผู้ใช้ใช้ เช่น รูปภาพหลักแบบเต็มความกว้างอาจต้องใช้รูปแบบต่างๆ มากกว่าภาพขนาดย่อในหน้าข้อมูลผลิตภัณฑ์อีคอมเมิร์ซ
การโหลดแบบ Lazy Loading
คุณบอกให้เบราว์เซอร์โหลดรูปภาพแบบ Lazy Loading เมื่อรูปภาพปรากฏในวิวพอร์ตได้โดยใช้แอตทริบิวต์ loading ค่าแอตทริบิวต์ lazy จะบอกเบราว์เซอร์ว่าอย่าดาวน์โหลดรูปภาพจนกว่าจะอยู่ใน (หรือใกล้) วิวพอร์ต ซึ่งจะช่วยประหยัดแบนด์วิดท์ ทำให้เบราว์เซอร์จัดลำดับความสำคัญของทรัพยากรที่จำเป็นต่อการแสดงผลเนื้อหาสำคัญที่อยู่ในวิวพอร์ตอยู่แล้วได้
decoding
แอตทริบิวต์ decoding จะบอกเบราว์เซอร์ว่าควรถอดรหัสรูปภาพอย่างไร ค่า async จะบอกเบราว์เซอร์ว่าถอดรหัสรูปภาพแบบไม่พร้อมกันได้ ซึ่งอาจทำให้เวลาในการแสดงเนื้อหาอื่นๆ ดีขึ้น ค่า sync จะบอกเบราว์เซอร์ว่าควรนำเสนอรูปภาพพร้อมกับเนื้อหาอื่นๆ
ค่าเริ่มต้นจะเป็น auto ช่วยให้เบราว์เซอร์ตัดสินใจได้ว่าอะไรคือสิ่งที่ดีที่สุดสำหรับผู้ใช้
การสาธิตรูปภาพ
ทดสอบความรู้ของคุณ
รูปแบบรูปภาพใดรองรับการบีบอัดแบบไม่สูญเสีย
รูปแบบรูปภาพใดรองรับการบีบอัดแบบสูญเสีย
ข้อบ่งชี้ความกว้าง (เช่น 1000w) บอกอะไรในเบราว์เซอร์เกี่ยวกับตัวเลือกรูปภาพที่ระบุในแอตทริบิวต์ srcset
แอตทริบิวต์ sizes บอกอะไรกับเบราว์เซอร์เกี่ยวกับองค์ประกอบ <img> ที่นําไปใช้
srcset ขององค์ประกอบ <img> โดยพิจารณาจากมิติข้อมูลวิวพอร์ตปัจจุบันของผู้ใช้
srcset ขององค์ประกอบ <img>
ถัดไป: ประสิทธิภาพของวิดีโอ
แม้ว่ารูปภาพอาจเป็นสื่อประเภทที่แพร่หลายที่สุดบนเว็บ แต่ก็อยู่ห่างไกลจากสื่อที่คุณต้องคำนึงถึงเกี่ยวกับประสิทธิภาพ วิดีโอเป็นสื่ออีกประเภทหนึ่งที่ใช้กันทั่วไปในเว็บ และมาพร้อมข้อควรพิจารณาด้านประสิทธิภาพของตัวผลิตภัณฑ์เอง ในโมดูลถัดไปของหลักสูตรนี้ โปรดดูเทคนิคบางส่วนเกี่ยวกับการเพิ่มประสิทธิภาพวิดีโอและวิธีโหลดวิดีโออย่างมีประสิทธิภาพ