ทำไมการปรับขนาดภาพให้เหมาะสมจึงปรับปรุงเว็บไซต์
ภาพมักเป็นส่วนสำคัญของข้อมูลที่ดาวน์โหลดโดยหน้าเว็บ ไฟล์ขนาดใหญ่ทำให้เนื้อหาแสดงช้า ใช้ข้อมูลมือถือมากขึ้น และอาจทำให้ประสบการณ์ผู้เข้าชมแย่ลง การปรับแต่งรวมสามการตัดสินใจ: ขนาด รูปแบบ และระดับการบีบอัด
ไม่มีขีดจำกัดที่สมบูรณ์แบบสำหรับภาพทั้งหมด ขนาดย่อควรมีน้ำหนักน้อยกว่าภาพถ่ายเต็มหน้าจอ เป้าหมายคือส่งพิกเซลและคุณภาพเพียงพอสำหรับพื้นที่จริงโดยไม่บังคับให้เว็บเบราว์เซอร์ดาวน์โหลดข้อมูลที่ไม่ใช้
ขั้นตอนที่แนะนำทีละขั้น
- ระบุความกว้างสูงสุดที่ภาพจะแสดงในแบบ
- ตัดกรอบก่อนบีบอัดเพื่อไม่เก็บส่วนที่ถูกลบออก
- เลือกรูปแบบตามเนื้อหาและความต้องการของความโปร่งใส
- เปิดไฟล์ใน ตัวบีบอัดภาพ และลองใช้อย่างคุณภาพกลาง-สูง
- เปรียบเทียบขนาดไฟล์และตรวจสอบข้อความ ขอบ ใบหน้า และการไล่สี
- เผยแพร่ผลลัพธ์และตรวจสอบหน้าเว็บบนมือถือและเดสก์ท็อป
ขนาด: หลีกเลี่ยงการอัปโหลดพิกเซลเกินความจําเป็น
หากการ์ดแสดงภาพด้วยความกว้าง 600 พิกเซล การโหลดภาพขนาด 5000 พิกเซลมักจะเป็นการสิ้นเปลือง เว็บเบราว์เซอร์จะปรับขนาดภาพให้เล็กลงในทางสายตา แต่ก่อนหน้านั้นต้องดาวน์โหลดไฟล์ทั้งหมด เตรียมเวอร์ชันใกล้กับขนาดสูงสุดที่ออกแบบต้องการ
สำหรับหน้าจอความหนาแน่นสูง อาจมีประโยชน์ที่จะให้เวอร์ชันใหญ่ขึ้นประมาณสองเท่า แต่ที่เหมาะสมที่สุดคือเว็บไซต์ใช้ภาพตอบสนอง srcset y ขนาดแบบนี้แต่ละอุปกรณ์จะดาวน์โหลดเวอร์ชันที่เหมาะสมแทนไฟล์ยักษ์เดียวกัน
เลือกรูปแบบใด
- JPG: ความเข้ากันได้ดีและขนาดที่เหมาะสมสําหรับภาพถ่ายที่ไม่โปร่งใส
- WebP: มีประโยชน์สำหรับภาพถ่ายและกราฟิกเว็บ; สามารถรักษาความโปร่งใสและให้ไฟล์กะทัดรัด
- PNG: เหมาะสำหรับความโปร่งใส การจับภาพที่มีข้อความชัดเจน และกราฟิกง่าย ๆ; อาจมีขนาดใหญ่ในภาพถ่าย
- SVG: เหมาะสำหรับโลโก้และไอคอนเวกเตอร์เมื่อไฟล์ปลอดภัยและออกแบบเป็นเวกเตอร์
การแปลงฟอร์แมตไม่รับประกันว่าจะได้ไฟล์เล็กกว่าเสมอ เปรียบเทียบผลลัพธ์เสมอและเก็บฟอร์แมตต้นฉบับเมื่อเป็นตัวเลือกที่มีประสิทธิภาพที่สุด ดู การเปรียบเทียบระหว่าง JPG, PNG และ WebP ถ้าคุณไม่รู้จะเลือกอันไหน
วิธีเลือกคุณภาพการบีบอัด
เริ่มด้วยการตั้งค่าที่ให้ความสำคัญกับรูปลักษณ์และค่อย ๆ ลดลง รูปถ่ายทนต่อการบีบอัดได้ดีกว่าภาพหน้าจอ แผนภาพ และข้อความขนาดเล็ก หากปรากฏแสงรอบ ๆ บล็อก หรือขอบเบลอ ให้เพิ่มคุณภาพหรือทดลองใช้รูปแบบอื่น
ประเมินไฟล์ภายในหน้า ไม่เพียงแค่ดูในมุมมองขยาย ความแตกต่างเล็ก ๆ ที่เห็นได้ชัดที่ 300% อาจไม่เห็นในขนาดปกติ ในขณะเดียวกัน ตัวอักษรที่อ่านไม่ออกในบัตรถือเป็นปัญหาจริง
การบีบอัดไม่สามารถทดแทนการใช้งานที่ดีได้
นอกจากการปรับไฟล์ให้เหมาะสมแล้ว ให้สงวนที่ว่างด้วยคุณสมบัติ ความกว้าง y ความสูง เพื่อหลีกเลี่ยงการกระโดดของเนื้อหา ใช้การโหลดช้าในภาพที่อยู่นอกบล็อกแรกที่มองเห็น แต่ไม่เลื่อนภาพหลักหากจำเป็นต่อการเข้าใจหน้า
ควรกำหนดแคชยาวสำหรับไฟล์ที่มีชื่อเวอร์ชันเพื่อหลีกเลี่ยงการโหลดภาพเดียวกันในหลายความละเอียดผ่าน CSS การตัดสินใจเหล่านี้ต้องมีการเปลี่ยนแปลงในเว็บไซต์ แต่ช่วยเสริมการประหยัดที่เกิดขึ้นระหว่างการบีบอัด
ข้อผิดพลาดทั่วไป
บีบอัดก่อนตัดสินใจเลือกขนาด
การปรับขนาดหลังจากนั้นจะทําให้คุณต้องประมวลผลไฟล์สองครั้งและอาจสะสมการสูญเสียได้ ตัดสินใจเรื่องกรอบและขนาดก่อน; บีบอัดตอนท้าย
แปลงภาพหน้าจอเป็น JPG คุณภาพต่ำ
ตัวอักษรและเส้นบาง ๆ อาจทําให้เกิดรอยเปื้อน ลองใช้ PNG หรือ WebP ด้วยคุณภาพที่สูงขึ้นและเปรียบเทียบน้ําหนัก
ใช้ภาพขนาดเล็กเป็นหัวเรื่อง
การขยายไม่ได้กู้คืนรายละเอียด เริ่มจากแหล่งที่มีขนาดเพียงพอและสร้างเวอร์ชันย่อยจากเวอร์ชันนั้น
คำถามที่พบบ่อย
ภาพเว็บควรหนักเท่าไหร่?
ขึ้นอยู่กับขนาด ความสำคัญ และความซับซ้อน ใช้เป็นเกณฑ์น้ำหนักที่น้อยที่สุดซึ่งยังคงคุณภาพที่ยอมรับได้ในขนาดสุดท้าย แทนการตามหาตัวเลขสากล
ฉันควรแปลงรูปภาพทั้งหมดเป็น WebP หรือไม่?
ไม่จําเป็นเสมอไป WebP มีประโยชน์ แต่ไฟล์ [PNG ที่เรียบง่ายหรือไฟล์ที่ได้รับการปรับแต่งแล้วอาจไม่ดีขึ้น แปลงตัวอย่าง วัด และเก็บรักษาต้นฉบับไว้
การบีบอัดภาพช่วยปรับตำแหน่งโดยอัตโนมัติหรือไม่?
ช่วยในด้านประสบการณ์และประสิทธิภาพ แต่การจัดอันดับยังขึ้นอยู่กับเนื้อหาที่มีประโยชน์ การติดตาม ลิงก์ ความตั้งใจในการค้นหา และสัญญาณอื่น ๆ อีกมากมาย การบีบอัดเป็นส่วนหนึ่งของเว็บไซต์ที่เตรียมพร้อมอย่างดี
เตรียมภาพให้เบาลง
ปรับคุณภาพหรือตั้งขนาดเป้าหมาย เปรียบเทียบผลลัพธ์ และดาวน์โหลดเวอร์ชันที่เหมาะกับหน้าของคุณที่สุด
บีบอัดภาพสําหรับเว็บ