การแสดงภาพขนาดเดสก์ท็อปไปยังอุปกรณ์เคลื่อนที่อาจใช้อินเทอร์เน็ตมากกว่าที่จำเป็นถึง 2-4 เท่า โปรดปฏิบัติตามหลักเกณฑ์ในหน้านี้เพื่อปรับปรุงประสบการณ์ของผู้ใช้ด้วยการแสดงรูปภาพขนาดต่างๆ ในอุปกรณ์ต่างๆ
รูปภาพที่ตอบสนองตามอุปกรณ์และ Core Web Vitals
เมื่อแสดงรูปภาพที่ตอบสนองตามอุปกรณ์ หน้าเว็บจะประเมินความสามารถในการแสดงผลของอุปกรณ์ของผู้ใช้และเลือกรูปภาพจากชุดรูปภาพที่เหมาะสมที่สุดสำหรับการแสดงผลตามเกณฑ์เหล่านั้น วิธีนี้จะช่วยบันทึกข้อมูลให้กับผู้ใช้โดยให้รูปภาพขนาดเล็กกว่าแสดงบนอุปกรณ์ที่มีหน้าจอขนาดเล็ก
ผลกระทบของการโหลดรูปภาพเร็วขึ้นยังส่งผลต่อ Largest Contentful Paint (LCP) ของหน้าเว็บด้วย เช่น หากองค์ประกอบ LCP ของหน้าเว็บคือรูปภาพ การแสดงผลแบบตอบสนองจะช่วยลดระยะเวลาในการโหลดทรัพยากรได้
ระยะเวลาการโหลดทรัพยากรที่ต่ำลงจะลดเวลาในการโหลดรูปภาพ LCP ซึ่งจะปรับปรุงคะแนน LCP ของหน้าเว็บ LCP ที่ต่ำลงหมายความว่าผู้ใช้จะเห็นเว็บไซต์โหลดเร็วขึ้น และโดยเฉพาะอย่างยิ่งเมื่อโหลดเนื้อหาที่สําคัญที่สุด (องค์ประกอบ LCP) เร็วขึ้น การแสดงรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ยังช่วยลดการแย่งแบนด์วิดท์สำหรับทรัพยากรอื่นๆ ในหน้าเว็บ ซึ่งจะช่วยปรับปรุงความเร็วในการโหลดหน้าเว็บโดยทั่วไปได้
ปรับขนาดรูปภาพ
เครื่องมือปรับขนาดรูปภาพยอดนิยม 2 อย่างคือแพ็กเกจ Sharp npm และเครื่องมือ ImageMagick CLI
แพ็กเกจ Sharp เป็นตัวเลือกที่ดีสำหรับการปรับขนาดรูปภาพโดยอัตโนมัติ (เช่น การสร้างภาพปกหลายขนาดสำหรับวิดีโอทั้งหมดในเว็บไซต์) เครื่องมือนี้ทำงานได้รวดเร็วและผสานรวมกับสคริปต์และเครื่องมือการสร้างได้ดี ImageMagick เหมาะสำหรับการปรับขนาดรูปภาพแบบครั้งเดียวมากกว่าเนื่องจากจะทำงานจากบรรทัดคำสั่งทั้งหมด
คม
หากต้องการใช้ sharp เป็นสคริปต์ Node ให้บันทึกโค้ดนี้เป็นสคริปต์แยกต่างหากในโปรเจ็กต์ แล้วเรียกใช้เพื่อแปลงรูปภาพ
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
หากต้องการปรับขนาดรูปภาพเป็น 33% ของขนาดเดิม ให้เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล
convert -resize 33% flower.jpg flower-small.jpg
หากต้องการปรับขนาดรูปภาพให้พอดีกับพื้นที่ 300 พิกเซลกว้าง x 200 พิกเซลสูง ให้เรียกใช้คำสั่งต่อไปนี้
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
คุณควรสร้างรูปภาพกี่เวอร์ชัน
คำถามนี้ไม่มีคำตอบที่ "ถูกต้อง" เพียงคำตอบเดียว อย่างไรก็ตาม การแสดงรูปภาพขนาดต่างๆ 3-5 ขนาดเป็นเรื่องปกติ การแสดงรูปภาพขนาดต่างๆ มากขึ้นจะส่งผลดีต่อประสิทธิภาพ แต่จะใช้พื้นที่ในเซิร์ฟเวอร์มากขึ้นและคุณจะต้องเขียน HTML เพิ่มขึ้นเล็กน้อย
ตัวเลือกอื่นๆ
นอกจากนี้ บริการรูปภาพ เช่น Thumbor (โอเพนซอร์ส) และ CloudORY ควรลองใช้ ทั้งสองวิธีเป็นวิธีที่ตรงไปตรงมาในการสร้างรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณา ซึ่งยังช่วยให้คุณปรับเปลี่ยนรูปภาพได้ตามต้องการ หากต้องการตั้งค่า Thumbor ให้ติดตั้งในเซิร์ฟเวอร์ Cloudinary จะจัดการรายละเอียดให้คุณและไม่ต้องตั้งค่าเซิร์ฟเวอร์
แสดงรูปภาพหลายเวอร์ชัน
เมื่อคุณระบุรูปภาพหลายเวอร์ชัน เบราว์เซอร์จะเลือกรูปภาพที่ดีที่สุดเพื่อใช้ โดยพิจารณาจากปัจจัยต่อไปนี้
| ก่อน | หลัง |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw"> |
แอตทริบิวต์ src,
srcset และ sizes ของแท็ก <img> ทั้งหมดทำงานร่วมกันเพื่อให้ได้ผลลัพธ์นี้
แอตทริบิวต์ "src"
แอตทริบิวต์ src ทําให้โค้ดนี้ทํางานกับเบราว์เซอร์ที่ไม่รองรับแอตทริบิวต์ srcset และ sizes เบราว์เซอร์เหล่านั้นจะเปลี่ยนไปโหลดทรัพยากรที่ระบุในแอตทริบิวต์ src
แอตทริบิวต์ "srcset"
แอตทริบิวต์ srcset คือรายการชื่อไฟล์รูปภาพที่คั่นด้วยคอมมาและคำอธิบายความกว้างหรือความหนาแน่นของรูปภาพ
ตัวอย่างนี้ใช้ข้อบ่งชี้ความกว้าง ซึ่งบอกเบราว์เซอร์ว่ารูปภาพกว้างแค่ไหน จะได้ไม่ต้องดาวน์โหลดรูปภาพเพื่อหาคำตอบ 480w คือตัวระบุความกว้างที่บอกให้เบราว์เซอร์ทราบว่า flower-small.jpg มีความกว้าง 480 พิกเซล 1080w คือตัวบ่งชี้ความกว้างที่บอกเบราว์เซอร์ว่า flower-large.jpg มีความกว้าง 1080 พิกเซล
คะแนนพิเศษ: คุณไม่จำเป็นต้องทราบเกี่ยวกับตัวบ่งชี้ความหนาแน่นเพื่อแสดงรูปภาพขนาดต่างๆ อย่างไรก็ตาม หากอยากทราบวิธีการทำงานของตัวบ่งชี้ความหนาแน่น โปรดดูห้องทดลองโค้ดการเปลี่ยนความละเอียด ตัวบอกความหนาแน่นจะใช้เพื่อแสดงรูปภาพที่แตกต่างกันตามความหนาแน่นของพิกเซลของอุปกรณ์
แอตทริบิวต์ "sizes"
แอตทริบิวต์ขนาดจะบอกให้เบราว์เซอร์รู้ว่ารูปภาพจะกว้างเพียงใดเมื่อแสดง แต่จะไม่ส่งผลกระทบต่อขนาดการแสดงผลของรูปภาพ คุณจึงต้องใช้ CSS เพื่อให้แสดงได้
เบราว์เซอร์จะใช้ข้อมูลนี้ร่วมกับสิ่งที่ทราบเกี่ยวกับอุปกรณ์ของผู้ใช้ (รวมถึงขนาดและความหนาแน่นของพิกเซล) เพื่อพิจารณาว่าจะโหลดรูปภาพใด
หากเบราว์เซอร์ไม่รู้จักแอตทริบิวต์ "sizes" ระบบจะกลับไปโหลดรูปภาพที่ระบุโดยแอตทริบิวต์ "src" (เราเริ่มใช้ sizes และ srcset พร้อมกัน ทุกเบราว์เซอร์จึงรองรับทั้ง 2 แอตทริบิวต์หรือทั้ง 2 อย่างไม่ได้)
คะแนนพิเศษ: หากต้องการเพิ่มความน่าสนใจ คุณสามารถใช้แอตทริบิวต์ sizes เพื่อระบุขนาดช่องหลายขนาดได้ วิธีนี้รองรับเว็บไซต์ที่ใช้เลย์เอาต์ที่แตกต่างกันสําหรับวิวพอร์ตขนาดต่างๆ ดูวิธีดำเนินการได้จากตัวอย่างโค้ดหลายช่องนี้
เครดิตพิเศษ (เพิ่มเติม)
นอกจากเครดิตเพิ่มเติมทั้งหมดที่แสดงแล้ว (รูปภาพมีความซับซ้อน!) คุณยังใช้แนวคิดเดียวกันนี้สำหรับทิศทางศิลป์ได้ด้วย ทิศทางศิลปะคือการแสดงรูปภาพที่มีหน้าตาแตกต่างกันโดยสิ้นเชิง (แทนที่จะเป็นรูปภาพเดียวกันแต่ต่างเวอร์ชัน) ไปยังวิวพอร์ตที่ต่างกัน ดูข้อมูลเพิ่มเติมได้ในห้องทดลองโค้ดสำหรับผู้กำกับศิลป์
ยืนยัน
หลังจากใช้รูปภาพที่ปรับขนาดได้ คุณสามารถใช้ Lighthouse เพื่อตรวจสอบว่าไม่ได้พลาดรูปภาพใดไป เรียกใช้การตรวจสอบประสิทธิภาพของ Lighthouse (Lighthouse > ตัวเลือก > ประสิทธิภาพ) แล้วดูผลการตรวจสอบปรับขนาดรูปภาพให้เหมาะสม ผลการค้นหาเหล่านี้จะแสดงรูปภาพที่คุณยังต้องปรับขนาด