ใช้ 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 เท่า
รูปภาพแรกมีขนาดไฟล์ใหญ่กว่ามากเนื่องจากบันทึกด้วยขนาดที่ใหญ่กว่าขนาดที่แสดงมาก รูปภาพทั้ง 2 รูปจะแสดงโดยมีความกว้างคงที่ 300 พิกเซล ดังนั้นจึงควรใช้รูปภาพที่บันทึกไว้ในขนาดเดียวกัน
สําหรับความกว้างคงที่ ให้ใช้รูปภาพที่บันทึกด้วยขนาดเดียวกับ ขนาดที่แสดง
แต่จะเกิดอะไรขึ้นหากขนาดการแสดงผลแตกต่างกัน
ในโลกที่มีอุปกรณ์หลายเครื่อง รูปภาพไม่ได้แสดงในขนาดคงที่เพียงขนาดเดียวเสมอไป
องค์ประกอบรูปภาพอาจมีความกว้างเป็นเปอร์เซ็นต์ หรือเป็นส่วนหนึ่งของเลย์เอาต์ที่ปรับตามอุปกรณ์ ซึ่งขนาดการแสดงรูปภาพจะเปลี่ยนไปให้พอดีกับขนาดหน้าจอ
…แล้วอุปกรณ์ที่ต้องการพิกเซลสูงอย่างจอแสดงผล 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
พิกเซล ซึ่งจะช่วยให้เบราว์เซอร์เลือกรูปภาพที่เล็กที่สุดได้
โดยขึ้นอยู่กับประเภทหน้าจอและขนาด Viewport โดยไม่ต้อง
ดาวน์โหลดรูปภาพเพื่อตรวจสอบขนาด
คุณดูการทำงานของ srcset ได้ในรูปภาพด้านล่าง หากใช้แล็ปท็อปหรือ
คอมพิวเตอร์เดสก์ท็อป ให้เปลี่ยนขนาดหน้าต่างเบราว์เซอร์แล้วเปิดหน้านี้อีกครั้ง
จากนั้นใช้แผงเครือข่ายของเครื่องมือเบราว์เซอร์เพื่อตรวจสอบว่าใช้รูปภาพใด
(คุณจะต้องดำเนินการในหน้าต่างที่ไม่ระบุตัวตนหรือหน้าต่างส่วนตัว มิเช่นนั้นระบบจะแคชไฟล์รูปภาพต้นฉบับ)
ฉันจะสร้างรูปภาพหลายขนาดได้อย่างไร
คุณจะต้องจัดเตรียมรูปภาพทุกรูปที่ต้องการใช้กับ srcset ในหลายขนาด
สำหรับรูปภาพแบบครั้งเดียว เช่น รูปภาพฮีโร คุณสามารถบันทึกขนาดต่างๆ ได้ด้วยตนเอง หากมีรูปภาพจำนวนมาก เช่น รูปภาพผลิตภัณฑ์ คุณจะต้องใช้การทำงานอัตโนมัติ ซึ่งมี 2 วิธี
รวมการประมวลผลรูปภาพในกระบวนการบิลด์
คุณสามารถเพิ่มขั้นตอนเพื่อสร้างรูปภาพเวอร์ชันต่างๆ ที่มีขนาดแตกต่างกันได้ในกระบวนการสร้าง ดูข้อมูลเพิ่มเติมได้ที่ "ใช้ Imagemin เพื่อบีบอัดรูปภาพ"
ใช้บริการรูปภาพ
คุณสามารถสร้างและแสดงรูปภาพโดยอัตโนมัติได้โดยใช้บริการเชิงพาณิชย์ เช่น Cloudinary หรือบริการโอเพนซอร์สที่เทียบเท่า เช่น Thumbor ซึ่งคุณติดตั้งและเรียกใช้ได้ด้วยตนเอง
คุณอัปโหลดรูปภาพที่มีความละเอียดสูง และบริการรูปภาพจะสร้างและแสดงรูปแบบและขนาดรูปภาพต่างๆ โดยอัตโนมัติ
ตามพารามิเตอร์ URL เช่น เปิดรูปภาพตัวอย่างนี้ใน Cloudinary แล้วลองเปลี่ยนค่า w หรือนามสกุลไฟล์ในแถบ URL
นอกจากนี้ บริการรูปภาพยังมีฟีเจอร์ขั้นสูงอื่นๆ เช่น ความสามารถในการทำให้ "การครอบตัดอัจฉริยะ" เป็นแบบอัตโนมัติสำหรับรูปภาพขนาดต่างๆ และส่งรูปภาพ WebP ไปยังเบราว์เซอร์ที่รองรับรูปแบบนี้โดยอัตโนมัติแทนที่จะเป็น JPEG โดยไม่ต้องเปลี่ยนนามสกุลไฟล์
จะเกิดอะไรขึ้นหากรูปภาพดูไม่ถูกต้องในขนาดต่างๆ
ในกรณีนี้ คุณจะต้องใช้องค์ประกอบ <picture> สำหรับ "การกำกับศิลป์" โดยการระบุรูปภาพหรือการครอบตัดรูปภาพที่แตกต่างกันในขนาดต่างๆ ดูข้อมูลเพิ่มเติมได้ที่ Codelab "การกำกับศิลป์"
แล้วความหนาแน่นของพิกเซลล่ะ
อุปกรณ์ระดับไฮเอนด์มีพิกเซลจริงที่เล็กกว่า (หนาแน่นกว่า) เช่น โทรศัพท์ระดับไฮเอนด์อาจมีพิกเซลในแต่ละแถวของ พิกเซลมากกว่าอุปกรณ์ราคาถูก 2-3 เท่า
ซึ่งอาจส่งผลต่อขนาดที่คุณต้องใช้ในการบันทึกรูปภาพ เราจะไม่ลงรายละเอียดที่น่าสยดสยอง ที่นี่ แต่คุณดูข้อมูลเพิ่มเติมได้จาก "ใช้ตัวอธิบายความหนาแน่น" ใน 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 หากต้องการประสบการณ์การใช้งานที่มีคำแนะนำมากขึ้น ลองเรียนหลักสูตร "รูปภาพที่ ปรับตามพื้นที่โฆษณา" ฟรีที่ Udacity