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

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

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

Image size

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

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

การแสดงทุกอย่างที่ความละเอียดสูงขึ้นจะทำให้ข้อความและรูปภาพมีขนาดเล็กลงอย่างมาก ซึ่งก็คือเล็กลงครึ่งหนึ่งของขนาดก่อนหน้านี้ แต่ 1 พิกเซล จะกลายเป็น 2 พิกเซลของอุปกรณ์แทน ซึ่งเรียกว่าอัตราส่วนพิกเซลของอุปกรณ์ (DPR) iPhone 4 (และ iPhone หลายรุ่นที่เปิดตัวหลังจากนั้น) มี DPR เท่ากับ 2

จากตัวอย่างก่อนหน้า หากอุปกรณ์มี DPR เป็น 2 และรูปภาพแสดงในคอนเทนเนอร์ขนาด 500x500 พิกเซล รูปภาพสี่เหลี่ยมจัตุรัสขนาด 1000 พิกเซล (เรียกว่าขนาดโดยธรรมชาติ) จะเป็นขนาดที่เหมาะสมที่สุด ในทำนองเดียวกัน หากอุปกรณ์มี DPR เท่ากับ 3 รูปภาพสี่เหลี่ยมจัตุรัสขนาด 1500 พิกเซลจะเป็นขนาดที่เหมาะสมที่สุด

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 เดียวกันในทุก Viewport ในหลายกรณี เลย์เอาต์ของหน้าเว็บและขนาดของคอนเทนเนอร์ จะเปลี่ยนแปลงไปตามอุปกรณ์ของผู้ใช้

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 และในกรณีนี้จะได้รับคำสั่งว่าหากความกว้างของ Viewport ของอุปกรณ์เกิน 768 พิกเซล ระบบจะแสดงรูปภาพที่ความกว้าง 500 พิกเซล ในอุปกรณ์ขนาดเล็ก รูปภาพจะแสดงที่ 100vw หรือความกว้างของ Viewport เต็ม

จากนั้นเบราว์เซอร์จะรวมข้อมูลนี้เข้ากับรายการ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 ยังรองรับความโปร่งใสของ Alpha Channel แม้ว่าจะ ใช้การบีบอัดแบบสูญเสียบางส่วน ซึ่งเป็นฟีเจอร์ที่ตัวแปลงรหัส JPEG ไม่มี

AVIF เป็นรูปแบบรูปภาพที่ใหม่กว่า และแม้ว่าจะไม่ได้รับการรองรับอย่างกว้างขวางเท่า WebP แต่ก็ได้รับการรองรับในระดับที่เหมาะสมในเบราว์เซอร์ต่างๆ AVIF รองรับการบีบอัดทั้งแบบสูญเสีย และไม่สูญเสียรายละเอียด และการทดสอบแสดงให้เห็นว่าในบางกรณี AVIF ประหยัดพื้นที่ได้มากกว่า 50% เมื่อ เทียบกับ JPEG นอกจากนี้ AVIF ยังมีฟีเจอร์ช่วงสีแบบกว้าง (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 ที่กล่าวถึงข้างต้น รูปแบบ AVIF จะมีความสำคัญเหนือกว่ารูปแบบ WebP และจะกลับไปใช้ รูปแบบ JPEG หากไม่รองรับทั้ง AVIF และ WebP

องค์ประกอบ <picture> ต้องมีองค์ประกอบ <img> ที่ซ้อนอยู่ภายใน แอตทริบิวต์ alt, width และ height จะกำหนดไว้ใน <img> และใช้โดยไม่คำนึงถึง <source> ที่เลือก

นอกจากนี้ องค์ประกอบ <source> ยังรองรับแอตทริบิวต์ media, srcset และ sizes ด้วย เช่นเดียวกับ<img>ตัวอย่างก่อนหน้านี้ สิ่งเหล่านี้จะระบุให้เบราว์เซอร์ทราบว่าควรเลือกรูปภาพใดใน Viewport ต่างๆ

<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 จะช่วยให้คุณควบคุมรูปภาพที่จะใช้ได้ดียิ่งขึ้น

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

อุปกรณ์ที่มี DPR เท่ากับ 1 จะดาวน์โหลดimage-500.jpgรูปภาพ รวมถึงผู้ใช้เดสก์ท็อปส่วนใหญ่ ซึ่งจะดูรูปภาพที่ขนาดภายนอกกว้าง 500 พิกเซล ในทางกลับกัน ผู้ใช้อุปกรณ์เคลื่อนที่มี DPR เท่ากับ 3 จะดาวน์โหลดimage-1500.jpgที่มีขนาดใหญ่กว่าได้ ซึ่งเป็นรูปภาพเดียวกันกับที่ใช้ในอุปกรณ์เดสก์ท็อปที่มี DPR เท่ากับ 3

<picture>
  <source
    media="(min-width: 561px) 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: 561px)"
    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

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

แอตทริบิวต์การถอดรหัส

แอตทริบิวต์ decoding จะบอกเบราว์เซอร์ว่าควรจะถอดรหัสรูปภาพอย่างไร โดยมีค่าที่เป็นไปได้ 3 ค่า ดังนี้

• async บอกเบราว์เซอร์ว่าสามารถถอดรหัสรูปภาพแบบอะซิงโครนัสได้ ซึ่งอาจช่วยปรับปรุงเวลาในการแสดงผลเนื้อหาอื่นๆ
• sync จะบอกเบราว์เซอร์ว่าควรแสดงรูปภาพพร้อมกับเนื้อหาอื่นๆ
• auto (ค่าเริ่มต้น) อนุญาตให้เบราว์เซอร์ตัดสินใจว่าอะไรดีที่สุดสำหรับผู้ใช้

คุณสามารถใช้เมธอด decode ในอินสแตนซ์ของ HTMLImageElement ใน JavaScript เมื่อแทรกรูปภาพ ลงใน DOM

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

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

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

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