ประสิทธิภาพของรูปภาพ

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

เพิ่มรูปภาพลงในหน้าเว็บได้โดยใช้องค์ประกอบ <img> หรือ <picture> หรือ พร็อพเพอร์ตี้ background-image ของ CSS

Image size

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

อย่างไรก็ตาม มีตัวแปรจำนวนมากที่เกี่ยวข้องกับการเลือกขนาดรูปภาพที่เหมาะสม การเลือกขนาดภาพที่เหมาะสมในทุกกรณี มีความซับซ้อน ในปี 2010 เมื่อเปิดตัว iPhone 4 ความละเอียดของหน้าจอ (640x960) เพิ่มขึ้นเป็นสองเท่าของ iPhone 3 (320x480) อย่างไรก็ตาม ขนาดจริง ของหน้าจอ iPhone 4 จะยังคงเดิมเหมือน 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 ของหน้าจอไม่ได้เป็นเพียงปัจจัยเดียว ที่ควรพิจารณาในการเลือกรูปภาพที่เหมาะสมที่สุดสำหรับหน้าเว็บหนึ่งๆ แท็ก layout ก็ถือเป็นอีกปัจจัยหนึ่ง

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 ประเภท ดังนี้

1. การบีบอัดที่สูญเสียข้อมูล
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 ก่อนหน้านี้ Google จะให้ความสำคัญกับรูปแบบ 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 ช่วยให้คุณควบคุมรูปภาพที่จะใช้ได้ดียิ่งขึ้น

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

อุปกรณ์ที่มี 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 สูง

ด้วยคำค้นหาเพิ่มเติมนี้ คุณจะเห็นได้ว่า 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 คุณควรใส่ตัวแปรกี่ตัว เช่นเดียวกับโจทย์ทางวิศวกรรมอื่นๆ คำตอบก็มักจะเป็น "แล้วแต่กรณี"

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

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

นอกจากนี้ ขนาดของเอกสาร 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 ทำให้เบราว์เซอร์ตัดสินใจได้ว่าอะไรคือสิ่งที่ดีที่สุดสำหรับ ผู้ใช้

การสาธิตรูปภาพ

ทดสอบความรู้ของคุณ

รายการถัดไป: ประสิทธิภาพของวิดีโอ

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