การแสดงรูปภาพขนาดเดสก์ท็อปในอุปกรณ์เคลื่อนที่อาจใช้อินเทอร์เน็ตมากกว่าที่จำเป็น 2-4 เท่า โปรดปฏิบัติตามหลักเกณฑ์ในหน้านี้เพื่อปรับปรุงประสบการณ์ของผู้ใช้ด้วยการแสดงรูปภาพขนาดต่างๆ ในอุปกรณ์ต่างๆ
รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์และ Core Web Vitals
เมื่อแสดงรูปภาพที่ตอบสนองตามอุปกรณ์ หน้าเว็บจะประเมินความสามารถในการแสดงผลของอุปกรณ์ของผู้ใช้และเลือกรูปภาพจากชุดรูปภาพที่เหมาะสมที่สุดสำหรับการแสดงผลตามเกณฑ์เหล่านั้น ซึ่งจะช่วยประหยัดอินเทอร์เน็ตให้กับผู้ใช้ โดยแสดงรูปภาพขนาดที่เล็กลงสำหรับอุปกรณ์ที่มีหน้าจอขนาดเล็กเป็นหลัก
ผลกระทบของการโหลดรูปภาพเร็วขึ้นยังส่งผลต่อ Largest Contentful Paint (LCP) ของหน้าเว็บด้วย เช่น หากองค์ประกอบ LCP ของหน้าเว็บคือรูปภาพ การแสดงผลแบบตอบสนองจะช่วยลดระยะเวลาในการโหลดทรัพยากรได้
ระยะเวลาการโหลดทรัพยากรที่ต่ำลงจะลดเวลาในการโหลดรูปภาพ LCP ซึ่งจะปรับปรุงคะแนน LCP ของหน้าเว็บ LCP ที่ต่ำลงหมายความว่าผู้ใช้จะเห็นเว็บไซต์โหลดเร็วขึ้น และโดยเฉพาะอย่างยิ่งเมื่อโหลดเนื้อหาที่สําคัญที่สุด (องค์ประกอบ LCP) เร็วขึ้น การแสดงรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ยังช่วยลดการแย่งแบนด์วิดท์สำหรับทรัพยากรอื่นๆ ในหน้าเว็บ ซึ่งจะช่วยปรับปรุงความเร็วในการโหลดหน้าเว็บโดยทั่วไปได้
ปรับขนาดรูปภาพ
เครื่องมือปรับขนาดรูปภาพ 2 รายการที่ได้รับความนิยมสูงสุดคือ แพ็กเกจ npm ของ sharp และเครื่องมือ CLI ของ ImageMagick
แพ็กเกจ 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 (โอเพนซอร์ส) และ Cloudinary ได้ด้วย ทั้ง 2 วิธีเป็นวิธีที่ตรงไปตรงมาในการสร้างรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณา ซึ่งยังช่วยให้คุณปรับเปลี่ยนรูปภาพได้ตามต้องการ หากต้องการตั้งค่า 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"
แอตทริบิวต์ sizes จะบอกเบราว์เซอร์ว่ารูปภาพจะกว้างเท่าใดเมื่อแสดง แม้ว่าจะไม่ส่งผลต่อขนาดการแสดงผลของรูปภาพ คุณจึงยังคงต้องใช้ CSS
เบราว์เซอร์จะใช้ข้อมูลนี้ร่วมกับสิ่งที่ทราบเกี่ยวกับอุปกรณ์ของผู้ใช้ (รวมถึงขนาดและความหนาแน่นของพิกเซล) เพื่อพิจารณาว่าจะโหลดรูปภาพใด
หากเบราว์เซอร์ไม่รู้จักแอตทริบิวต์ "sizes" ระบบจะกลับไปโหลดรูปภาพที่ระบุโดยแอตทริบิวต์ "src" (sizes และ srcset เปิดตัวพร้อมกัน ดังนั้นเบราว์เซอร์ทุกรุ่นจึงรองรับทั้ง 2 รายการหรือไม่รองรับเลย)
คะแนนพิเศษ: หากต้องการเพิ่มความน่าสนใจ คุณสามารถใช้แอตทริบิวต์ sizes เพื่อระบุขนาดช่องหลายขนาดได้ วิธีนี้รองรับเว็บไซต์ที่ใช้เลย์เอาต์ที่แตกต่างกันสําหรับวิวพอร์ตขนาดต่างๆ ดูวิธีดำเนินการได้จากตัวอย่างโค้ดหลายช่องนี้
เครดิตพิเศษ (เพิ่มเติม)
นอกจากเครดิตเพิ่มเติมทั้งหมดที่ระบุไว้แล้ว (รูปภาพมีความซับซ้อน) คุณยังใช้แนวคิดเดียวกันนี้สำหรับการกำหนดแนวทางศิลป์ได้ด้วย การจัดอาร์ตเวิร์กคือการแสดงรูปภาพที่ดูแตกต่างออกไปโดยสิ้นเชิง (แทนที่จะเป็นรูปภาพเดียวกันในเวอร์ชันต่างๆ) ไปยังวิวพอร์ตต่างๆ ดูข้อมูลเพิ่มเติมได้ในห้องทดลองโค้ดสำหรับผู้กำกับศิลป์
ยืนยัน
หลังจากติดตั้งใช้งานรูปภาพที่ปรับเปลี่ยนขนาดได้แล้ว คุณสามารถใช้ Lighthouse เพื่อตรวจสอบว่าไม่ได้พลาดรูปภาพใดไป เรียกใช้การตรวจสอบประสิทธิภาพของ Lighthouse (Lighthouse > ตัวเลือก > ประสิทธิภาพ) แล้วดูผลการตรวจสอบปรับขนาดรูปภาพให้เหมาะสม ผลการค้นหาเหล่านี้จะแสดงรูปภาพที่คุณยังต้องปรับขนาด