ใช้ srcset เพื่อเลือกขนาดรูปภาพที่เหมาะสมโดยอัตโนมัติ
ตามรายงานของ HTTP Archive หน้าเว็บบนอุปกรณ์เคลื่อนที่โดยทั่วไปหนักกว่า 2.6 MB และมากกว่า 2 ใน 3 ของหน้าเว็บบนอุปกรณ์เคลื่อนที่นั้น น้ำหนักคือรูปภาพ นั่นเป็นโอกาสที่ดีในการเพิ่มประสิทธิภาพ
สรุป
- อย่าบันทึกรูปภาพที่มีขนาดใหญ่กว่าขนาดการแสดงผล
- บันทึกขนาดต่างๆ สำหรับแต่ละรูปภาพและใช้
srcsetเพื่อช่วยให้เบราว์เซอร์เลือกตัวระบุที่เล็กที่สุด ค่าwจะบอกความกว้างของแต่ละเวอร์ชันแก่เบราว์เซอร์ ดังนี้
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
บันทึกรูปภาพที่มีขนาดเหมาะสม
คุณสามารถทำให้เว็บไซต์ของคุณเร็วขึ้นและลดหิวข้อมูลน้อยลงได้โดยใช้รูปภาพที่มี ที่ตรงกับขนาดการแสดงผล กล่าวคือ ให้กำหนดรูปภาพที่เหมาะสม ความกว้างและความสูงเมื่อบันทึก
ดูรูปภาพด้านล่าง
ดูเหมือนจะเหมือนกันเกือบทั้งหมด แต่มีขนาดไฟล์มากกว่า 10 ครั้ง ใหญ่กว่าตัวอื่น
รูปภาพแรกมีขนาดไฟล์ใหญ่กว่ามากเนื่องจากบันทึกไว้โดยมีขนาด ใหญ่กว่าขนาดจอแสดงผลมาก ภาพทั้งสองแสดงด้วย ความกว้าง 300 พิกเซล ดังนั้นจึงเหมาะสมที่จะใช้ภาพที่บันทึกไว้ ขนาด
สำหรับความกว้างคงที่ ให้ใช้ภาพที่บันทึกที่มีขนาดเท่ากับ ขนาดการแสดงผล
แต่... จะเกิดอะไรขึ้นหากขนาดการแสดงผลแตกต่างกัน
ในโลกที่มีอุปกรณ์หลากหลาย รูปภาพอาจไม่ได้แสดงด้วยขนาดคงที่เสมอไป
องค์ประกอบรูปภาพอาจมีความกว้างเป็นเปอร์เซ็นต์หรือเป็นส่วนหนึ่งของเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์ ที่ขนาดการแสดงผลรูปภาพเปลี่ยนเพื่อให้พอดีกับขนาดหน้าจอ
...แล้วอุปกรณ์ที่เหมาะกับ Pixel อย่างจอแสดงผล Retina ล่ะ
ช่วยเบราว์เซอร์เลือกขนาดรูปภาพที่เหมาะสม
คงจะดีไม่น้อยหากคุณสามารถทำให้แต่ละภาพใช้งานได้ในขนาดต่างๆ กัน ให้เบราว์เซอร์เลือกขนาดที่ดีที่สุดสำหรับอุปกรณ์และขนาดการแสดงผล ขออภัย มี catch-22 เมื่อกล่าวถึง เพื่อดูว่าภาพใดดีที่สุด เบราว์เซอร์ควรใช้ขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ แต่ไม่ทราบความกว้างของรูปภาพโดยไม่ดาวน์โหลดเพื่อตรวจสอบ
srcset ช่วยคุณได้ในส่วนนี้ คุณบันทึกรูปภาพในขนาดต่างๆ กัน
บอกความกว้างของแต่ละเวอร์ชันของเบราว์เซอร์:
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
ค่า w จะแสดงความกว้างของรูปภาพแต่ละภาพเป็นพิกเซล ตัวอย่างเช่น
small.jpg 500w บอกเบราว์เซอร์ว่า small.jpg คือ 500
พิกเซล วิธีนี้จะช่วยให้เบราว์เซอร์สามารถเลือกภาพที่เล็กที่สุดได้
ตามประเภทหน้าจอและขนาดวิวพอร์ตโดยไม่ต้อง
ดาวน์โหลดรูปภาพเพื่อตรวจสอบขนาด
ดูการทํางานจริงของ srcset สําหรับรูปภาพด้านล่าง หากคุณใช้แล็ปท็อปหรือ
คอมพิวเตอร์เดสก์ท็อป โปรดเปลี่ยนขนาดหน้าต่างเบราว์เซอร์ แล้วเปิดหน้านี้อีกครั้ง
จากนั้นใช้แผงเครือข่ายของเครื่องมือเบราว์เซอร์เพื่อตรวจสอบว่ามีการใช้รูปภาพใด
(คุณจะต้องดำเนินการดังกล่าวในหน้าต่างที่ไม่ระบุตัวตนหรือหน้าต่างส่วนตัว มิเช่นนั้น
ไฟล์ภาพต้นฉบับจะถูกแคชไว้)
ฉันจะสร้างรูปภาพหลายขนาดได้อย่างไร
คุณต้องทำให้รูปภาพทุกรูปที่ต้องการใช้มีขนาดที่หลากหลาย
ด้วย srcset
สําหรับรูปภาพแบบครั้งเดียว เช่น รูปภาพหลัก คุณสามารถบันทึกขนาดต่างๆ ด้วยตนเองได้ ถ้า คุณมีรูปภาพจำนวนมาก เช่น รูปภาพผลิตภัณฑ์ คุณจะต้องกำหนดให้ทำงานแบบอัตโนมัติ เรามี 2 แนวทาง ดังนี้
ผสานรวมการประมวลผลรูปภาพในกระบวนการบิลด์
ในขณะที่กระบวนการสร้าง คุณเพิ่มขั้นตอนเพื่อสร้างขนาดต่างๆ ได้ เวอร์ชันรูปภาพ โปรดดู "ใช้ Imagemin เพื่อบีบอัดรูปภาพ" เพื่อดูข้อมูลเพิ่มเติม
ใช้บริการรูปภาพ
การสร้างและแสดงรูปภาพสามารถทำได้โดยอัตโนมัติโดยใช้บริการเชิงพาณิชย์ เช่น ระบบคลาวด์ หรือโอเพนซอร์สที่เทียบเท่า เช่น Thumbor ที่คุณติดตั้งและเรียกใช้ด้วยตนเอง
คุณจะอัปโหลดรูปภาพความละเอียดสูง และบริการรูปภาพโดยอัตโนมัติ
สร้างและแสดงรูปแบบและขนาดรูปภาพต่างๆ โดยขึ้นอยู่กับ URL
พารามิเตอร์ เช่น เปิดรูปภาพตัวอย่างนี้บนระบบคลาวด์ แล้วลองเปลี่ยนค่า w หรือนามสกุลไฟล์ในแถบ URL
บริการรูปภาพยังมีฟีเจอร์ขั้นสูงอื่นๆ เช่น ความสามารถในการทำงานอัตโนมัติ "การครอบตัดอัจฉริยะ" สำหรับรูปภาพขนาดต่างๆ และส่งรูปภาพ WebP โดยอัตโนมัติ เป็นเบราว์เซอร์ที่รองรับรูปแบบ ไม่ใช่ JPEG โดยไม่ต้องเปลี่ยนแปลงไฟล์ ส่วนขยาย
จะเกิดอะไรขึ้นถ้ารูปภาพมีขนาดที่แตกต่างกัน
ในกรณีดังกล่าว คุณจะต้องใช้องค์ประกอบ <picture> สำหรับ "ทิศทางศิลปะ":
ให้รูปภาพหรือรูปภาพที่ครอบตัดต่างกันในขนาดต่างๆ เพื่อดูข้อมูลเพิ่มเติม
ลองดู Codelab ของ "เส้นทางศิลปะ"
แล้วความหนาแน่นของพิกเซลล่ะ
อุปกรณ์ระดับไฮเอนด์มีพิกเซลทางกายภาพที่เล็กกว่า (หนาแน่นกว่า) ตัวอย่างเช่น โทรศัพท์ระดับไฮเอนด์อาจมีพิกเซลในแต่ละแถวมากกว่าสองหรือสามเท่า เป็นอุปกรณ์ที่ถูกกว่า
ซึ่งอาจส่งผลต่อขนาดที่คุณต้องการบันทึกรูปภาพ เราจะไม่เข้าไปอยู่ในเลือด รายละเอียดเพิ่มเติมที่นี่ แต่คุณสามารถหาข้อมูลเพิ่มเติมได้จาก "ใช้ตัวบอกความหนาแน่น" Codelab
แล้วรูปภาพมีขนาดแสดงผลเท่าใด
คุณสามารถใช้ sizes เพื่อให้ srcset ทำงานได้ดีขึ้น
หากไม่มี เบราว์เซอร์จะใช้ความกว้างของวิวพอร์ตเมื่อเลือก
รูปภาพจาก srcset แอตทริบิวต์ sizes จะบอกเบราว์เซอร์ว่า
องค์ประกอบรูปภาพจะปรากฏขึ้น ดังนั้นเบราว์เซอร์จึงสามารถเลือกองค์ประกอบที่เล็กที่สุด
ไฟล์ภาพ ก่อนที่จะคำนวณเลย์เอาต์ใดๆ
ในตัวอย่างด้านล่าง sizes="50vw" บอกเบราว์เซอร์ว่ารูปภาพนี้จะ
แสดงที่ 50% ของความกว้างของวิวพอร์ต
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
คุณสามารถดูการทำงานจริงได้ที่ simpl.info/sizes และ Codelab ของ "การระบุความกว้างของช่องโฆษณาหลายรายการ"
แล้วการรองรับเบราว์เซอร์ล่ะ
srcset และ sizes ได้รับการรองรับกว่า 90% ของ
เบราว์เซอร์ทั่วโลก
หากเบราว์เซอร์ไม่รองรับ srcset หรือ sizes ระบบจะกลับไปใช้เพียงแอตทริบิวต์ src
ทำให้ srcset และ sizes มีการเพิ่มประสิทธิภาพแบบต่อเนื่องที่ยอดเยี่ยม
ดูข้อมูลเพิ่มเติม
ดูส่วน "เพิ่มประสิทธิภาพรูปภาพของคุณ" ของ web.dev เพื่อเจาะลึกเกี่ยวกับการเพิ่มประสิทธิภาพรูปภาพ ดูคำแนะนำเพิ่มเติม ให้ทดลองใช้ Google Analytics " หลักสูตร "รูปภาพ" จาก Udacity.