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