รูปภาพมักเป็นทรัพยากรที่สำคัญที่สุดและแพร่หลายที่สุดบนเว็บ เพื่อ ผลลัพธ์คือ การเพิ่มประสิทธิภาพรูปภาพจะช่วยปรับปรุงประสิทธิภาพในเว็บไซต์ได้อย่างมาก ในกรณีส่วนใหญ่ การเพิ่มประสิทธิภาพรูปภาพหมายถึงการลดเวลาของเครือข่ายโดยการส่ง จำนวนไบต์ที่ลดลง แต่คุณสามารถเพิ่มประสิทธิภาพของจำนวนไบต์ที่ส่งไปให้ผู้ใช้ได้โดย แสดงรูปภาพที่มีขนาดเหมาะสมกับอุปกรณ์ของผู้ใช้
เพิ่มรูปภาพลงในหน้าเว็บได้โดยใช้องค์ประกอบ <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 ประเภท ดังนี้
การบีบอัดแบบสูญเสียบางส่วนทำงานโดยการลดความแม่นยำของรูปภาพผ่านการวัดขนาด และสามารถทิ้งข้อมูลสีเพิ่มเติมได้โดยใช้การสุ่มตรวจสี การบีบอัดแบบสูญเสียจะมีประสิทธิภาพมากที่สุดในรูปภาพที่มีความหนาแน่นสูงที่มีสัญญาณรบกวนจำนวนมาก และสี โดยทั่วไปจะเป็นภาพถ่ายหรือภาพที่มีเนื้อหาคล้ายกัน นั่นเป็นเพราะ อาร์ติแฟกต์ที่เกิดจากการบีบอัดแบบสูญเสียบางส่วนมีแนวโน้มที่จะพบได้น้อย ในรูปภาพที่มีรายละเอียดดังกล่าว อย่างไรก็ตาม การบีบอัดแบบสูญเสียบางส่วนอาจมีประสิทธิภาพน้อยลง ภาพที่มีขอบคม เช่น ภาพลายเส้น รายละเอียดที่ชัดเจนคล้ายคลึงกัน หรือ ข้อความ การบีบอัดแบบสูญเสียบางส่วนสามารถใช้กับรูปภาพ 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
ช่วยให้คุณควบคุมรูปภาพที่จะใช้ได้ดียิ่งขึ้น
นี่เป็นภาพในตารางต่อไปนี้ ซึ่งมีความกว้างและ ระบบจะประเมินอัตราส่วนพิกเซลของอุปกรณ์ดังนี้
ความกว้างของวิวพอร์ต (พิกเซล) | 1 สาธารณรัฐประชาธิปไตยประชาชน | 1.5 DPR | 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 สาธารณรัฐประชาธิปไตยประชาชน | 1.5 DPR | 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 คุณควรใส่ตัวแปรกี่ตัว เช่นเดียวกับโจทย์ทางวิศวกรรมอื่นๆ คำตอบก็มักจะเป็น "แล้วแต่กรณี"
แม้การมีตัวแปรที่หลากหลายเพื่อนำเสนอขนาดที่พอดีที่สุดอาจเป็นเรื่องน่าดึงดูดใจ รูปแบบรูปภาพเพิ่มเติมทั้งหมดจะมีค่าใช้จ่าย และใช้งานได้อย่างมีประสิทธิภาพน้อยลง แคชของเบราว์เซอร์ เมื่อมีตัวแปรเดียว ผู้ใช้ทุกคนจะได้รับรูปภาพเดียวกัน จึงสามารถแคชได้อย่างมีประสิทธิภาพ
ในทางกลับกัน หากมีรูปแบบที่แตกต่างกันจำนวนมาก ตัวแปรแต่ละรายการจะต้องมีตัวแปรอีก 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
ทำให้เบราว์เซอร์ตัดสินใจได้ว่าอะไรคือสิ่งที่ดีที่สุดสำหรับ
ผู้ใช้
การสาธิตรูปภาพ
ทดสอบความรู้ของคุณ
รูปแบบรูปภาพใดรองรับการบีบอัดแบบไม่สูญเสียข้อมูล
รูปแบบรูปภาพใดรองรับการบีบอัดแบบสูญเสีย
ตัวบอกความกว้าง (เช่น 1000w
) บอกอะไร
เบราว์เซอร์เกี่ยวกับตัวเลือกรูปภาพที่ระบุใน srcset
ได้อย่างไร
แอตทริบิวต์ sizes
บอกอะไรเบราว์เซอร์เกี่ยวกับ
<img>
องค์ประกอบที่ใช้
srcset
ขององค์ประกอบ <img>
srcset
ขององค์ประกอบ <img>
แล้ว
ตามมิติข้อมูลของวิวพอร์ตปัจจุบันของผู้ใช้
รายการถัดไป: ประสิทธิภาพของวิดีโอ
แม้ว่ารูปภาพจะเป็นสื่อประเภทที่ใช้กันมากที่สุดบนเว็บ แต่รูปภาพก็อยู่ไกล จากหัวข้อเดียวที่คุณต้องคำนึงถึงเมื่อพูดถึงประสิทธิภาพ วิดีโอ เป็นสื่ออีกประเภทหนึ่งที่ใช้กันโดยทั่วไปในเว็บ และมาพร้อมกับ ประสิทธิภาพที่ควรพิจารณา ในโมดูลถัดไปของหลักสูตรนี้ ลองดู เกี่ยวกับการเพิ่มประสิทธิภาพของวิดีโอและวิธีโหลดอย่างมีประสิทธิภาพ