การเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บ: คู่มือฉบับสมบูรณ์

การโหลดหน้าเว็บช้าทำให้มี Conversion ทำลาย การศึกษาพบว่า 40% ของผู้ใช้ละทิ้งไซต์ที่ใช้เวลามากกว่า 3 วินาที สาเหตุที่ใหญ่ที่สุด? รูปภาพที่ไม่ได้เพิ่มประสิทธิภาพ รูปภาพขนาด 5 MB รูปเดียวบนหน้าแรกของคุณสามารถโหลดได้นานขึ้นแม้ในการเชื่อมต่อที่รวดเร็ว

รายการตรวจสอบการปรับภาพให้เหมาะสม

ขนาดที่ถูกต้อง — อย่าจัดส่งรูปภาพขนาด 4000px ที่คุณแสดงขนาด 800px
รูปแบบที่ถูกต้อง — WebP/AVIF สมัยใหม่, JPG/PNG สำรอง
การบีบอัดที่ถูกต้อง — คุณภาพ 75–85% สำหรับภาพถ่าย โดยไม่สูญเสียคุณภาพสำหรับกราฟิก
การจัดส่งที่ถูกต้อง — การโหลดแบบ Lazy Loading, srcset ที่ตอบสนอง

ขนาดที่แนะนำในปี 2026

รูปภาพหลัก: สูงสุด 1920×1080 (Full HD) หรือ 2560×1440 (2K) สูงสุด
ฮีโร่ของโพสต์บล็อก: 1200×675 (16:9)
ภาพถ่ายผลิตภัณฑ์: 1500×1500 พร้อมรองรับการซูม, จอแสดงผลเริ่มต้น 800×800
อวตาร: 256×256 (ภาพขนาดย่อจะลดลง)
เปิดกราฟ (ส่วนแบ่งทางสังคม): 1200×630
ไอคอน Fav: 32×32, 192×192, 512×512 PNG

ปรับขนาดรูปภาพให้เป็นขนาดเหล่านี้ด้วยเครื่องมือปรับขนาดรูปภาพของเราก่อนที่จะอัปโหลด

รูปแบบ: เมื่อใดควรใช้อะไร

WebP: ค่าเริ่มต้นสำหรับ 95% ของรูปภาพบนเว็บ เล็กกว่า JPG 25–35% ในคุณภาพเดียวกัน รองรับเบราว์เซอร์สากล
AVIF: เล็กลงอีก (เล็กกว่า JPG 50%) ใช้สำหรับภาพฮีโร่ เบราว์เซอร์รุ่นใหม่รองรับ
JPG: ภาพถ่ายที่ไม่มีความโปร่งใส เข้ากันได้ดีเยี่ยม
PNG: โลโก้ ภาพหน้าจอ หรืออะไรก็ได้ที่มีความโปร่งใส ไม่สูญเสีย
SVG: กราฟิกแบบเวกเตอร์ ไอคอน ภาพประกอบที่เรียบง่าย ไฟล์มีขนาดเล็ก ปรับขนาดได้ไม่จำกัด

แปลงระหว่างรูปแบบเหล่านี้ด้วย การแปลงรูปภาพ PDF7

การบีบอัด: ก้าวร้าวแค่ไหนก็ก้าวร้าวเกินไป

สำหรับรูปภาพ: เริ่มต้นที่คุณภาพ 85% ลดลงเหลือ 75% สำหรับเพจที่มีแบนด์วิธสำคัญ ต่ำกว่า 70% สิ่งประดิษฐ์จะมองเห็นได้ ใช้เครื่องมือบีบอัดรูปภาพของเราเพื่อค้นหาสมดุลที่เหมาะสม

ภาพที่ตอบสนองด้วย srcset

อย่าส่งภาพ 2K ไปยังโทรศัพท์ ใช้แอตทริบิวต์ srcset ของ HTML:

เบราว์เซอร์จะเลือกรูปภาพที่เล็กที่สุดที่พอดี คุณจะต้องมี 3 ขนาดต่อภาพ

โหลดช้า

เพิ่ม loading="lazy" ให้กับรูปภาพทั้งหมดครึ่งหน้าล่าง เบราว์เซอร์สมัยใหม่จะไม่โหลดจนกว่าผู้ใช้จะเลื่อนเข้ามาใกล้ ซึ่งช่วยประหยัดแบนด์วิดท์ในการโหลดหน้าเว็บทุกครั้ง

กฎ 100KB

มุ่งเป้าไปที่ภาพแต่ละภาพที่มีขนาดไม่เกิน 100KB รูปภาพฮีโร่สามารถขยายได้ถึง 200KB หากรูปภาพเดียวมีขนาดเกิน 500KB แสดงว่าคุณเสียหาย — ปรับขนาดและบีบอัดใหม่