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

Katie Hempenius

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