คู่มือใช้งานจริงเรื่องขนาดและรูปแบบไฟล์รูปสำหรับเว็บ

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

งบเริ่มต้นตามกรณีใช้งาน

ช่วงเหล่านี้แสดงงบส่งเว็บแบบประหยัด ผล JPEG, WebP หรือ AVIF อาจสูงหรือต่ำกว่า ปรับตามต้นฉบับ ตัวเข้ารหัส ขนาดแสดง ประสิทธิภาพจริง และการตรวจด้วยตา

เปลี่ยนช่วงเริ่มต้นให้เป็นงบของคุณ

รายงานน้ำหนักหน้าของ HTTP Archive มีข้อมูลการกระจายปัจจุบัน แต่ค่ากลางโลกไม่ใช่ผู้ชมของคุณ เกณฑ์ LCP “ดี” ที่ Google เผยแพร่คือ 2.5 วินาทีที่เปอร์เซ็นไทล์ 75 ของการเข้าชม ใช้ข้อมูลจริงและ waterfall แบ่งเวลาระหว่างการตอบเซิร์ฟเวอร์ การค้นพบทรัพยากร การส่ง การถอดรหัส และความล่าช้าในการแสดงผล

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

รูปแบบเป็นหนึ่งในตัวแปรหลัก

ต้นฉบับเดียวกันสร้างขนาดต่างกันมากได้ตามตัวเข้ารหัสและเป้าคุณภาพ ตารางนี้แสดงพฤติกรรมให้เปรียบเทียบ ไม่ใช่ผลมาตรฐานสากลสำหรับภาพ 1200 พิกเซล

WebP หรือ AVIF อาจชนะ JPEG ในบางการเปรียบเทียบ แต่ไม่มีเปอร์เซ็นต์คงที่สำหรับทุกต้นฉบับและตัวเข้ารหัส ทั้งสองรองรับความโปร่งใส ดูคู่มือ WebP กับ AVIF

สร้างไฟล์ตัวเลือกด้วย JPG เป็น WebP, แปลงเป็น AVIF สำหรับอินพุตที่ระบุ หรือ แปลงเป็นชุด สำหรับรูปแบบที่เครื่องมือแสดง

ขนาดพิกเซล: ตัวคูณที่ถูกมองข้าม

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

รูป 4000 × 3000 มี 12 MP ส่วน 1200 × 900 มี 1.08 MP หรือพิกเซลน้อยกว่า 91% เมื่อจำนวนช่องและความแม่นยำเท่ากัน raster ที่ไม่บีบอัดสำหรับตัวเข้ารหัสลดมาก แต่การประหยัดไบต์สุดท้ายยังขึ้นกับเนื้อหาและค่า

หลัก responsive: เตรียมตัวเลือกใกล้ความกว้างและความหนาแน่นที่อาจแสดง หากช่องกว้าง 720 CSS พิกเซล ตัวเลือก 1440px อาจเหมาะกับจอ 2× แต่การซูม ครอบ เปลี่ยนเลย์เอาต์ และความหนาแน่นสูงกว่าจะเปลี่ยนการเลือก ใช้ srcset และ sizes อธิบายตัวเลือก

ใช้ ปรับขนาดรูป ของ Vizua สร้างตัวเลือกตามเลย์เอาต์ แล้วทดสอบตัวบีบอัด JPEG หรือ PNG ที่เหมาะ ต้นฉบับที่ปรับแล้วอาจไม่เล็กลง

คุณภาพการบีบอัด: หาจุดสมดุลที่เหมาะสม

เมื่อรูปมีขนาดและฟอร์แมตที่ถูกต้องแล้ว ค่าคุณภาพคือการปรับขั้นสุดท้าย ตัวอย่างต่อไปนี้แสดงให้เห็นว่าขนาด ฟอร์แมต และการบีบอัดทำงานร่วมกันอย่างไร

ขั้นตอนตัวอย่าง: เริ่มจากไฟล์แม่ 4000 × 3000 และเก็บไว้นอกชุดส่ง

1. ปรับขนาด เป็นตัวเลือกอย่าง 1200 × 900 เมื่อเหมาะกับช่องและความหนาแน่นเป้าหมาย
2. ส่งออก WebP ตัวเลือก ที่คุณภาพเริ่มต้นแล้วตรวจไฟล์จริง
3. ส่งออก AVIF ตัวเลือก เมื่อระบบรองรับ แล้วเปรียบเทียบขนาด หน้าตา และต้นทุนเข้ารหัส

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

สำหรับคำแนะนำค่าคุณภาพโดยละเอียดแยกตามฟอร์แมต อ่านคู่มือ: วิธีบีบอัดรูปไม่เสียคุณภาพ

กรณีพิเศษ

หน้าสินค้าอีคอมเมิร์ซ

รูปสินค้าต้องยังมีประโยชน์ที่ระดับซูมซึ่งร้านรองรับ สร้างตัวเลือก responsive จากไฟล์แม่ที่ปกป้อง ทดสอบรายละเอียด และตั้งงบแยกสำหรับตาราง มุมหลัก และซูม ข้อกำหนดอัปโหลด marketplace อาจต่างจากการส่งของร้าน

พอร์ตโฟลิโอช่างภาพ

พอร์ตโฟลิโอส่งตัวอย่าง responsive และเปิดมุมความละเอียดสูงโดยตั้งใจได้เมื่อเหมาะสม กำหนดขนาดและงบไบต์จากเลย์เอาต์และจอที่คาด แล้วตรวจพื้นผิว การไล่สี และโปรไฟล์สี

รูปแชร์โซเชียล (Open Graph)

คำแนะนำและรูปแบบ Open Graph ต่างกันตามแพลตฟอร์มและเปลี่ยนได้ JPEG หรือ PNG 1200 × 630 เป็นจุดเริ่มต้นทั่วไป แต่ตรวจคำแนะนำและตัวอย่างปัจจุบันของปลายทาง crawler ดึงไฟล์นี้แยกจาก lazy loading ของหน้า

งบประมาณรูปทั้งหน้า

สร้างงบหน้าจากเป้าประสิทธิภาพ ตัวอย่างการแบ่งเริ่มต้นสำหรับทดสอบคือ:

• รูป Hero 1 รูป: ~150 KB
• รูปเนื้อหา 3-4 รูป: ~100 KB ต่อรูป รวม ~300-400 KB
• Thumbnail, Avatar, ไอคอน: ~50 KB รวมกัน

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

คำถามที่พบบ่อย