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

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

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

AVIF เป็นรูปแบบรูปภาพที่ใหม่กว่า และแม้ว่าจะไม่ได้รับการรองรับอย่างกว้างขวางเท่า WebP แต่ก็ได้รับการรองรับในระดับที่เหมาะสมในเบราว์เซอร์ต่างๆ 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

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

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

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

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

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