เคล็ดลับยอดนิยมสำหรับประสิทธิภาพเว็บ

ใช้ srcset เพื่อเลือกขนาดรูปภาพที่เหมาะสมโดยอัตโนมัติ

Sam Dutton

ตามรายงานของ 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.