ในขณะที่ปรับใช้เว็บไซต์ นักพัฒนามักจะใช้รูปภาพเดียวกันสำหรับหน้าจอทุกขนาด ซึ่งไม่ใช่วิธีปฏิบัติที่ดีเนื่องจากเบราว์เซอร์ไม่สามารถพึ่งพาการปรับขนาดได้ ในสถานการณ์เช่นนี้ ภาพที่ตอบสนองจะมีผลเพื่อให้แน่ใจว่ารูปภาพจะถูกดาวน์โหลดในขนาดและคุณภาพที่เหมาะสมสำหรับอุปกรณ์ที่เกี่ยวข้อง ซึ่งจะช่วยปรับปรุงความเร็วในการโหลดหน้าเว็บ
จะปรับปรุงความเร็วในการโหลดเพจโดยใช้รูปภาพที่ตอบสนองได้อย่างไร
หากต้องการเพิ่มความเร็วในการโหลดหน้าเว็บผ่านรูปภาพที่ตอบสนอง ให้พิจารณาวิธีการต่อไปนี้:
ตัวอย่างที่ 1: เพิ่มความเร็วในการโหลดหน้าเว็บผ่านรูปภาพที่ตอบสนองโดยใช้แอตทริบิวต์ 'srcset'
วิธีที่สะดวกที่สุดในการใช้รูปภาพแบบตอบสนองคือการใช้ “ srcset ” คุณลักษณะที่สะสมอยู่ใน “ แท็ก” คุณลักษณะนี้ช่วยให้โปรแกรมเมอร์สามารถระบุขนาดภาพต่างๆ และเบราว์เซอร์จะเลือกภาพที่เหมาะสมที่สุดตามขนาดหน้าจอของผู้ใช้โดยอัตโนมัติ ต่อไปนี้เป็นการสาธิต:
DOCTYPE html >
< html >
< ศีรษะ >
< เมตาดาต้า ชุดอักขระ = 'utf-8' >
< เมตาดาต้า ชื่อ = 'วิวพอร์ต' เนื้อหา = 'ความกว้าง=ความกว้างของอุปกรณ์, ขนาดเริ่มต้น=1' >
< ชื่อ > ชื่อ >
ศีรษะ >
< ร่างกาย >
< รูปภาพ src = 'F:\JOB บทความทางเทคนิค\imgre.png' ทุกอย่าง = 'ภาพที่ตอบสนอง'
srcset = 'F:\JOB บทความทางเทคนิค\imgre.png 400w, F:\JOB บทความทางเทคนิค\imgre.png 800w, F:\JOB บทความทางเทคนิค\imgre.png 1200w'
/>
ร่างกาย >
html >
ในรหัสนี้:
- “ srcset ” รวมแอตทริบิวต์ที่ประกอบด้วยเส้นทางของรูปภาพและความกว้างที่แตกต่างกันในแต่ละครั้ง
- ดังภาพนี้” F:\บทความทางเทคนิคของงาน\imgre.png 400w ” หมายถึงเส้นทางรูปภาพที่มีความกว้างเป็น “ 400 ” พิกเซล
- จากข้อมูลนี้ เบราว์เซอร์จะวิเคราะห์รูปภาพที่เหมาะสมที่สุดในการดาวน์โหลดตามขนาดหน้าจอของผู้ใช้ เช่น หน้าจอที่เล็กกว่าจะแสดงภาพที่เล็กกว่า ซึ่งจะช่วยประหยัดแบนด์วิธ
เอาท์พุต
ตัวอย่างที่ 2: เพิ่มความเร็วในการโหลดหน้าเว็บผ่านรูปภาพที่ตอบสนองโดยการระบุความหนาแน่นของพิกเซลที่แตกต่างกัน
ในตัวอย่างนี้ เส้นทางรูปภาพจะถูกระบุพร้อมกับความหนาแน่นของพิกเซลที่แตกต่างกันสำหรับการแสดงที่มีความละเอียดสูง ซึ่งสามารถทำได้ผ่านทาง “ srcset ” คุณลักษณะที่แสดงด้านล่าง:
DOCTYPE html >< html >
< ศีรษะ >
< เมตาดาต้า ชุดอักขระ = 'utf-8' >
< เมตาดาต้า ชื่อ = 'วิวพอร์ต' เนื้อหา = 'ความกว้าง=ความกว้างของอุปกรณ์, ขนาดเริ่มต้น=1' >
< ชื่อ > ชื่อ >
ศีรษะ >
< ร่างกาย >
< รูปภาพ src = 'F:\JOB บทความทางเทคนิค\imgre.png' ทุกอย่าง = 'ภาพที่ตอบสนอง' srcset = 'F:\JOB บทความทางเทคนิค\imgre.png 1x, F:\JOB บทความทางเทคนิค\imgre.png 1.5x, F:\JOB บทความทางเทคนิค\imgre.png 2x'
/>
ร่างกาย >
html >
ในตัวอย่างโค้ดนี้ ให้ระบุเส้นทางรูปภาพสามครั้งด้วยความหนาแน่นของพิกเซลที่แตกต่างกัน เบราว์เซอร์จะเลือกใช้รูปภาพที่เหมาะสม/เหมาะสมที่สุดเพื่อให้มั่นใจในคุณภาพสูงสุดบนหน้าจอต่างๆ
บันทึก: “ 1x ” พิกเซลเป็นค่าเริ่มต้น ดังนั้นจึงเป็นตัวเลือกสำหรับผู้ใช้ว่าจะเชื่อมโยงกับเส้นทางของรูปภาพหรือไม่
เอาท์พุต
ตัวอย่างที่ 3: เพิ่มความเร็วในการโหลดหน้าเว็บผ่านรูปภาพที่ตอบสนองโดยใช้แอตทริบิวต์ 'ขนาด'
ในบางสถานการณ์ อาจมีข้อจำกัดที่ขนาดภาพจริงบนหน้าจอจะแตกต่างกันไปตามความกว้างของหน้าจอ เพื่อแก้ไขปัญหานี้ “ ขนาด แอตทริบิวต์ ” สามารถใช้เพื่อรวมขนาดรูปภาพที่เกี่ยวข้องกับคำสั่งสื่อหรือขนาดคงที่ ด้านล่างนี้เป็นการสาธิตโค้ด:
DOCTYPE html >< html >
< ศีรษะ >
< เมตาดาต้า ชุดอักขระ = 'utf-8' >
< เมตาดาต้า ชื่อ = 'วิวพอร์ต' เนื้อหา = 'ความกว้าง=ความกว้างของอุปกรณ์, ขนาดเริ่มต้น=1' >
< ชื่อ > ชื่อ >
ศีรษะ >
< ร่างกาย >
< รูปภาพ src = 'F:\JOB บทความทางเทคนิค\imgre.png' ทุกอย่าง = 'ภาพที่ตอบสนอง' srcset = 'F:\JOB บทความทางเทคนิค\imgre.png 50w, F:\JOB บทความทางเทคนิค\imgre.png 800w, F:\JOB บทความทางเทคนิค\imgre.png 1200w'
ขนาด = '(ความกว้างสูงสุด: 800px) 100vw, 800px'
/>
ร่างกาย >
html >
ในบล็อคโค้ดนี้ “ ขนาด ” แอตทริบิวต์รวมข้อความค้นหาและขนาดสื่อ เป็นการแนะนำให้เบราว์เซอร์เลือกขนาดรูปภาพตามความกว้างหน้าจอของผู้ใช้ เพื่อให้แน่ใจว่ารูปภาพจะมีความกว้างไม่เกินเป้าหมาย
เอาท์พุต
ข้อควรพิจารณาที่สำคัญขณะใช้แอตทริบิวต์ 'ขนาด'
มีข้อจำกัดบางประการในการใช้ “ ขนาด ” แอตทริบิวต์ตามรายการด้านล่าง:
- เมื่อใช้คำสั่งสื่อหลายรายการใน “ ขนาด ” ตรวจสอบให้แน่ใจว่าได้เลือกคิวรีสื่อจริงรายการแรกแล้ว นอกจากนี้ ตรวจสอบให้แน่ใจว่าคำสั่งสื่อนั้นเรียงลำดับจากเฉพาะเจาะจงที่สุดไปหาเฉพาะเจาะจงน้อยที่สุด
- แอตทริบิวต์ 'ขนาด' ไม่รองรับขนาดเป็นเปอร์เซ็นต์ เนื่องจากเบราว์เซอร์ไม่ทราบว่าค่าที่ระบุเป็นเปอร์เซ็นต์จะกว้างเพียงใด จนกว่าจะทราบความกว้างขององค์ประกอบหลัก
ตัวอย่างที่ 4: เพิ่มความเร็วในการโหลดหน้าเว็บผ่านรูปภาพที่ตอบสนองโดยใช้องค์ประกอบ “
“ <ภาพ> องค์ประกอบ ” ช่วยให้โปรแกรมเมอร์สามารถแสดงและปรับใช้รูปภาพหลายภาพในขนาดหน้าจอที่แตกต่างกัน จะมีประโยชน์ในกรณีที่เนื้อหาแตกต่างกันไปตามอุปกรณ์ ด้านล่างนี้เป็นการสาธิตโค้ด:
DOCTYPE html >< html >
< ศีรษะ >
< เมตาดาต้า ชุดอักขระ = 'utf-8' >
< เมตาดาต้า ชื่อ = 'วิวพอร์ต' เนื้อหา = 'ความกว้าง=ความกว้างของอุปกรณ์, ขนาดเริ่มต้น=1' >
< ชื่อ > ชื่อ >
ศีรษะ >
< ร่างกาย >
< รูปภาพ >
< แหล่งที่มา สื่อ = '(ความกว้างสูงสุด: 100px)' srcset = 'F:\JOB บทความทางเทคนิค\imgbanner.png' />
< รูปภาพ src = 'F:\JOB บทความทางเทคนิค\imgre.png' ทุกอย่าง = 'ภาพที่ตอบสนอง' />
รูปภาพ >
ร่างกาย >
html >
ตามบรรทัดรหัสเหล่านี้:
- ระบุ “ <ภาพ> ” องค์ประกอบที่สะสม “ <แหล่งที่มา> ” สำหรับรูปภาพต่างๆ และให้เบราว์เซอร์เลือกองค์ประกอบที่เหมาะสมตามขนาดหน้าจอของผู้ใช้
- นอกจากนี้หากไม่มี “ <แหล่งที่มา> ” องค์ประกอบเหมาะสมกับขนาดหน้าจอรูปภาพที่ระบุใน “ <รูปภาพ> แท็ก ” ทำหน้าที่เป็นทางเลือก
- ซึ่งส่งผลให้มีการเพิ่มรูปภาพสำรองในกรณีที่ไม่คาดฝัน ซึ่งจะช่วยรักษาความเร็วในการโหลดหน้าเว็บที่ได้รับการปรับปรุง
เอาท์พุต
บทสรุป
ความเร็วในการโหลดหน้าเว็บสามารถปรับปรุงได้ผ่านรูปภาพที่ตอบสนองโดยใช้ปุ่ม “ srcset ” ระบุความหนาแน่นของพิกเซลที่แตกต่างกัน โดยใช้เครื่องหมาย “ ขนาด ” คุณลักษณะหรือผ่านทาง “ <ภาพ> ' องค์ประกอบ. “ <ภาพ> ” สามารถพิจารณาแนวทางองค์ประกอบได้ หากไม่มีวิธีอื่นใดที่ได้ผล เนื่องจากจะเพิ่มรูปภาพสำรองในกรณีที่ไม่คาดคิดโดยไม่มีตัวเลือกเพิ่มเติมสำหรับรูปภาพเดียวกัน