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

Katie Hempenius

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

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

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

แอตทริบิวต์ 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 > ตัวเลือก > ประสิทธิภาพ) แล้วดูผลการตรวจสอบปรับขนาดรูปภาพให้เหมาะสม ผลการค้นหาเหล่านี้จะแสดงรูปภาพที่คุณยังต้องปรับขนาด