แสดงรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์

Katie Hempenius

การแสดงภาพขนาดเดสก์ท็อปไปยังอุปกรณ์เคลื่อนที่อาจใช้อินเทอร์เน็ตมากกว่าถึง 2-4 เท่า ที่จำเป็น ปฏิบัติตามหลักเกณฑ์ในหน้านี้เพื่อปรับปรุงประสบการณ์ของผู้ใช้โดย แสดงรูปภาพในอุปกรณ์ขนาดต่างๆ กัน

รูปภาพที่ตอบสนองตามอุปกรณ์และ Core Web Vitals

เมื่อแสดงรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ หน้าเว็บจะประเมินความสามารถในการแสดงผล อุปกรณ์ของผู้ใช้ และเลือกหนึ่งใน ชุดของตัวเลือกรูปภาพที่ เหมาะสำหรับการแสดงผลมากที่สุด โดยอิงตามเกณฑ์เหล่านั้น ซึ่งจะช่วยบันทึกข้อมูลให้กับผู้ใช้ โดยใช้รูปภาพที่เล็กลงในอุปกรณ์ที่มีหน้าจอขนาดเล็กเป็นหลัก

การโหลดรูปภาพที่เร็วขึ้นยังส่งผลถึง การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP) ตัวอย่างเช่น หากแท็ก องค์ประกอบ LCP เป็นรูปภาพที่แสดง ที่ปรับเปลี่ยนตามอุปกรณ์จะช่วยลดระยะเวลาการโหลดทรัพยากรได้

ระยะเวลาการโหลดทรัพยากรที่ต่ำลงจะช่วยลดเวลาโหลดสำหรับอิมเมจ LCP ซึ่งจะช่วยปรับปรุง คะแนน LCP ของหน้าเว็บ LCP ที่ต่ำลงหมายความว่าผู้ใช้จะเห็นว่าเว็บไซต์โหลดเร็วขึ้น และโดยเฉพาะเมื่อโหลดเนื้อหาที่สำคัญที่สุด (องค์ประกอบ LCP) ได้เร็วขึ้น การแสดงรูปภาพที่ตอบสนองตามอุปกรณ์ยังสามารถลดการแย่งชิงแบนด์วิดท์ของผู้อื่น ทรัพยากรบนหน้าเว็บ ซึ่งสามารถปรับปรุงความเร็วในการโหลดหน้าเว็บโดยทั่วไปได้

ปรับขนาดรูปภาพ

เครื่องมือปรับขนาดรูปภาพยอดนิยม 2 อย่างคือแพ็กเกจ NPM ที่คมชัด และเครื่องมือ ImageMagick CLI

แพ็กเกจที่คมชัดเป็นทางเลือกที่ดีในการปรับขนาดรูปภาพอัตโนมัติ (ตัวอย่างเช่น สร้างภาพขนาดย่อหลายขนาดสำหรับวิดีโอทั้งหมดบนเว็บไซต์ของคุณ) ทั้งนี้ ทำงานรวดเร็วและผสานรวมกับสคริปต์และเครื่องมือบิลด์ได้เป็นอย่างดี ImageMagick มากกว่า สะดวกสำหรับการปรับขนาดภาพครั้งเดียวเนื่องจากการทำงานจากคำสั่งทั้งหมด บรรทัด

รุนแรง

เมื่อต้องการใช้ Sharp เป็นสคริปต์โหนด ให้บันทึกโค้ดนี้เป็นสคริปต์แยกต่างหากใน จากนั้นเรียกใช้เพื่อแปลงรูปภาพ

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

แสดงรูปภาพหลายเวอร์ชัน

เมื่อคุณระบุเวอร์ชันรูปภาพหลายเวอร์ชัน เบราว์เซอร์จะเลือกเวอร์ชันที่ดีที่สุดเพื่อ ใช้:

ของแท็ก <img> src, srcset, และ sizes ทั้งหมดจะมีการโต้ตอบกันเพื่อให้ได้ผลลัพธ์สุดท้ายนี้

"src" แอตทริบิวต์

แอตทริบิวต์ src ทำให้โค้ดนี้ทำงานได้สำหรับเบราว์เซอร์ที่ไม่ สนับสนุน srcset และ sizes เบราว์เซอร์เหล่านั้นจะกลับไปโหลดทรัพยากรที่ระบุไว้ใน src

"srcset" แอตทริบิวต์

แอตทริบิวต์ srcset คือรายการชื่อไฟล์รูปภาพที่คั่นด้วยคอมมาและ ตัวบอกความกว้างหรือความหนาแน่น

ตัวอย่างนี้ใช้ ตัวบอกความกว้าง ซึ่งบอกเบราว์เซอร์ว่ารูปภาพกว้างแค่ไหน จะได้ไม่ต้องดาวน์โหลด รูปภาพให้คุณได้เรียนรู้ 480w เป็นตัวบ่งชี้ความกว้างเพื่อให้เบราว์เซอร์ทราบว่า flower-small.jpg กว้าง 480 พิกเซล 1080w เป็นตัวบ่งชี้ความกว้างที่บอก เบราว์เซอร์ที่ flower-large.jpg กว้าง 1080 พิกเซล

เครดิตพิเศษ: คุณไม่จําเป็นต้องทราบเกี่ยวกับตัวบอกความหนาแน่นเพื่อแสดงรูปภาพขนาดต่างๆ แต่ถ้าคุณสงสัยว่าตัวบอกความหนาแน่นทำงานอย่างไร ให้ไปที่ การแก้ปัญหาการเปลี่ยนโค้ด มีการใช้ตัวบอกความหนาแน่นเพื่อแสดงรูปภาพที่แตกต่างกันตามอุปกรณ์ ความหนาแน่นของพิกเซล

"ขนาด" แอตทริบิวต์

แอตทริบิวต์ขนาดจะบอกเบราว์เซอร์ว่ารูปภาพจะกว้างเพียงใดเมื่อ แม้ว่าจะไม่ได้ส่งผลต่อขนาดการแสดงผลของภาพ ดังนั้นคุณจะต้อง CSS

เบราว์เซอร์จะใช้ข้อมูลนี้ ร่วมกับสิ่งที่เบราว์เซอร์รู้เกี่ยวกับ (รวมถึงขนาดและความหนาแน่นของพิกเซล) เพื่อกำหนดรูปภาพที่จะ โหลด

หากเบราว์เซอร์ไม่รู้จัก "sizes" แอตทริบิวต์จะกลับไปที่ กำลังโหลดรูปภาพที่ระบุโดย "src" (sizes และ srcset เกิดขึ้นพร้อมกัน ดังนั้น ทุกเบราว์เซอร์จะสนับสนุน แอตทริบิวต์หรือไม่)

เครดิตพิเศษ: ถ้าคุณต้องการให้เรียบง่าย คุณสามารถใช้แอตทริบิวต์ขนาดเพื่อระบุ ช่องโฆษณาหลายขนาด ซึ่งจะรองรับเว็บไซต์ที่ใช้เลย์เอาต์แบบต่างๆ กัน ขนาดวิวพอร์ตที่แตกต่างกัน ดูตัวอย่างโค้ดช่องหลายรายการนี้ เพื่อเรียนรู้วิธีการดังกล่าว

(มากยิ่งขึ้น) เครดิตเพิ่มเติม

นอกจากเครดิตเพิ่มเติมทั้งหมดที่แสดงแล้ว (รูปภาพมีความซับซ้อน!) คุณ คุณสามารถใช้แนวคิดเดียวกันนี้เพื่อ ทิศทางภาพ ทิศทางศิลปะคือการแสดงรูปภาพที่ดูแตกต่างไปอย่างสิ้นเชิง (แทนที่รูปภาพเดียวกันแต่ต่างเวอร์ชัน) ไปยังวิวพอร์ตที่ต่างกัน คุณ ดูข้อมูลเพิ่มเติมได้ในห้องทดลองรหัสทิศทางศิลปะ

ยืนยัน

หลังจากใช้รูปภาพที่ตอบสนองตามอุปกรณ์แล้ว คุณสามารถใช้ Lighthouse เพื่อ ไม่ได้พลาดภาพใดเลย เรียกใช้การตรวจสอบประสิทธิภาพ Lighthouse (Lighthouse > ตัวเลือก > ประสิทธิภาพ) และมองหาผลลัพธ์ของ ตรวจสอบขนาดรูปภาพที่เหมาะสม ผลการค้นหาเหล่านี้แสดงรูปภาพที่คุณยังต้องการ ปรับขนาดได้