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

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

คุณสามารถเพิ่มรูปภาพลงในหน้าเว็บได้โดยใช้องค์ประกอบ <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

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

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

decoding

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

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

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

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

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