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

Katie Hempenius

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เครดิตพิเศษ (เพิ่มเติม)

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

ยืนยัน

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