การแสดงรูปภาพขนาดเดสก์ท็อปในอุปกรณ์เคลื่อนที่อาจใช้อินเทอร์เน็ตมากกว่าที่ต้องการ 2-4 เท่า ทำตามหลักเกณฑ์ในหน้านี้เพื่อปรับปรุงประสบการณ์ของผู้ใช้โดยการแสดงรูปภาพขนาดต่างๆ ในอุปกรณ์ต่างๆ
รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์และ Core Web Vitals
เมื่อคุณแสดงรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ หน้าเว็บจะประเมินความสามารถในการแสดงผลของอุปกรณ์ของผู้ใช้ และเลือกหนึ่งในชุดตัวเลือกรูปภาพที่เหมาะสมที่สุดสำหรับแสดงผลตามเกณฑ์ดังกล่าว การดำเนินการนี้จะบันทึกข้อมูลให้กับผู้ใช้ โดยหลักๆ จะเป็นการแสดงรูปภาพขนาดเล็กไปยังอุปกรณ์ที่มีหน้าจอขนาดเล็ก
นอกจากนี้ การโหลดรูปภาพที่เร็วขึ้นอาจมีผลกับ Largest Contentful Paint (LCP) ของหน้าเว็บด้วย เช่น หากองค์ประกอบ LCP ของหน้าเว็บคือรูปภาพ การแสดงผลที่ปรับเปลี่ยนตามอุปกรณ์จะลดระยะเวลาการโหลดทรัพยากรได้
ระยะเวลาการโหลดทรัพยากรที่ลดลงจะลดเวลาในการโหลดรูปภาพ LCP ซึ่งช่วยปรับปรุงคะแนน LCP ของหน้าเว็บ LCP ที่ต่ำลงหมายความว่าผู้ใช้จะเห็นเว็บไซต์ของคุณโหลดเร็วขึ้น โดยเฉพาะอย่างยิ่งเมื่อโหลดเนื้อหาที่สำคัญที่สุด (องค์ประกอบ LCP) เร็วขึ้น การแสดงรูปภาพที่ตอบสนองตามอุปกรณ์ยังช่วยลดการช่วงชิงแบนด์วิดท์สำหรับทรัพยากรอื่นๆ ในหน้าเว็บได้อีกด้วย ซึ่งจะช่วยปรับปรุงความเร็วโดยทั่วไปของหน้าเว็บได้
ปรับขนาดรูปภาพ
เครื่องมือปรับขนาดรูปภาพที่ได้รับความนิยมมากที่สุด 2 รายการคือแพ็กเกจ npm คมชัดและเครื่องมือ ImageMagick CLI
แพ็กเกจที่คมชัดเป็นทางเลือกที่ดีสำหรับการปรับขนาดรูปภาพอัตโนมัติ (เช่น การสร้างภาพขนาดย่อหลายขนาดสำหรับวิดีโอทั้งหมดบนเว็บไซต์) ทำงานเร็วและผสานรวมกับสคริปต์และเครื่องมือบิลด์ได้ดี ImageMagick จะปรับขนาดรูปภาพแบบครั้งเดียวได้สะดวกกว่าเนื่องจากทำงานจากบรรทัดคำสั่งทั้งหมด
รุนแรง
หากต้องการใช้ "ชาร์ป" เป็นสคริปต์โหนด ให้บันทึกโค้ดนี้เป็นสคริปต์แยกต่างหากในโปรเจ็กต์ จากนั้นเรียกใช้เพื่อแปลงรูปภาพ
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" size="50vw"> |
แอตทริบิวต์ของแท็ก <img>
src
,
srcset
และ sizes
ทั้งหมดทำงานร่วมกันเพื่อให้ได้ผลลัพธ์สุดท้ายนี้
แอตทริบิวต์ "src"
แอตทริบิวต์ src ทำให้โค้ดนี้ใช้งานได้กับเบราว์เซอร์ที่ไม่รองรับแอตทริบิวต์ srcset
และ sizes
เบราว์เซอร์เหล่านั้นกลับโหลดทรัพยากรที่ระบุในแอตทริบิวต์ src
แทน
แอตทริบิวต์ "srcset"
แอตทริบิวต์ srcset
คือรายการชื่อไฟล์รูปภาพแบบคั่นด้วยคอมมาและคำอธิบายความกว้างหรือความหนาแน่นของชื่อไฟล์
ตัวอย่างนี้ใช้ข้อบ่งชี้ความกว้าง ซึ่งจะบอกเบราว์เซอร์ว่ารูปภาพมีความกว้างเท่าใด จึงไม่ต้องดาวน์โหลดรูปภาพเพื่อหาคำตอบ 480w
เป็นตัวบ่งชี้ความกว้างเพื่อบอกเบราว์เซอร์ว่า
flower-small.jpg
กว้าง 480px 1080w
เป็นข้อบ่งชี้ความกว้างที่บอกเบราว์เซอร์ว่า flower-large.jpg
กว้าง 1080px
เครดิตเพิ่มเติม: คุณไม่จำเป็นต้องทราบเกี่ยวกับตัวบ่งชี้ความหนาแน่นเพื่อแสดงรูปภาพขนาดต่างๆ อย่างไรก็ตาม หากคุณมีข้อสงสัยเกี่ยวกับวิธีการทำงานของข้อบ่งชี้ความหนาแน่น โปรดดูห้องทดลองรหัสการเปลี่ยนความละเอียด ระบบจะใช้ข้อบ่งชี้ความหนาแน่นเพื่อแสดงรูปภาพที่แตกต่างกันตามความหนาแน่นพิกเซลของอุปกรณ์
แอตทริบิวต์ "ขนาด"
แอตทริบิวต์ขนาดจะบอกเบราว์เซอร์ว่ารูปภาพจะมีความกว้างเท่าใดเมื่อแสดง แต่จะไม่ส่งผลกระทบต่อขนาดการแสดงรูปภาพ คุณจึงยังต้องใช้ CSS ในการแสดงผล
เบราว์เซอร์จะใช้ข้อมูลนี้ร่วมกับข้อมูลเกี่ยวกับอุปกรณ์ของผู้ใช้ (รวมถึงขนาดและความหนาแน่นของพิกเซล) เพื่อกำหนดว่าจะโหลดรูปภาพใด
หากเบราว์เซอร์ไม่รู้จักแอตทริบิวต์ "sizes
" ก็จะกลับไปโหลดรูปภาพที่ระบุโดยแอตทริบิวต์ "src
" แทน (เรานำ sizes
และ srcset
มาใช้พร้อมกัน ดังนั้นทุกเบราว์เซอร์จึงรองรับแอตทริบิวต์ทั้งคู่หรือไม่รองรับทั้ง 2 อย่าง)
เครดิตพิเศษ: หากต้องการดูหรูหรา คุณใช้แอตทริบิวต์ขนาดเพื่อระบุช่องหลายขนาดได้ ซึ่งรองรับเว็บไซต์ที่ใช้เลย์เอาต์ที่ต่างกันสำหรับวิวพอร์ตขนาดต่างๆ ตรวจสอบตัวอย่างโค้ดช่องโฆษณาหลายรายการนี้เพื่อเรียนรู้วิธีดำเนินการนี้
(มากยิ่งขึ้น) เครดิตพิเศษ
นอกเหนือจากเครดิตเพิ่มเติมทั้งหมดที่ระบุไว้แล้ว (รูปภาพซับซ้อน) คุณยังใช้แนวคิดเดียวกันนี้สำหรับทิศทางศิลปะได้อีกด้วย การกำหนดทิศทางศิลปะคือการแสดงรูปภาพที่มีลักษณะต่างกันโดยสิ้นเชิง (แทนที่จะแสดงรูปภาพเดียวกันในเวอร์ชันต่างๆ) ไปยังวิวพอร์ตที่ต่างกัน ดูข้อมูลเพิ่มเติมได้ในห้องทดลองโค้ดทิศทางศิลปะ
ยืนยัน
หลังจากใช้รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์แล้ว คุณสามารถใช้ Lighthouse เพื่อให้แน่ใจว่าจะไม่พลาดรูปภาพใดๆ เรียกใช้การตรวจสอบประสิทธิภาพของ Lighthouse (Lighthouse > Options > Performance) และมองหาผลลัพธ์ของการตรวจสอบ ขนาดรูปภาพที่เหมาะสม ผลการค้นหาเหล่านี้จะแสดงรูปภาพที่คุณยังคงต้องปรับขนาด