ปรับแต่งรูปภาพเพื่อ SEO
6 min
การปรับแต่งรูปภาพส่งผลทั้งต่อการติดอันดับ (ผ่าน Google Image Search และ Core Web Vitals) และประสบการณ์ผู้ใช้ สี่การกระทำที่จำเป็นคือ: เลือกฟอร์แมตที่ถูกต้อง (WebP หรือ AVIF) บีบอัดโดยไม่สูญเสียคุณภาพที่มองเห็นได้ ใส่แท็ก alt และใช้ lazy loading การกระทำเหล่านี้เพียงอย่างเดียวสามารถลด LCP ได้ 20 ถึง 40%
รูปภาพคิดเป็นน้ำหนักโดยเฉลี่ย 50 ถึง 70% ของหน้าเว็บ หากปรับแต่งไม่ดี รูปภาพจะฉุด Core Web Vitals และส่งผลเสียต่ออันดับ หากปรับแต่งดี รูปภาพจะเปิดช่องทางทราฟฟิกเพิ่มเติมผ่าน Google Images
เลือกฟอร์แมตรูปภาพที่เหมาะสม
ฟอร์แมต WebP ให้การบีบอัดที่ดีกว่า JPEG 25 ถึง 35% ที่คุณภาพภาพเท่ากัน ส่วน AVIF ไปได้ไกลกว่านั้น แต่ความเข้ากันได้กับเบราว์เซอร์ แม้จะดีในปี 2026 ก็ควรตรวจสอบตามกลุ่มผู้ใช้ของคุณ
ภาพเวกเตอร์ (โลโก้ ไอคอน ภาพประกอบ) ควรเป็น SVG: เบา ปรับขนาดได้ และไม่มีวันเสื่อมคุณภาพ
PNG ยังเหมาะเฉพาะกับภาพที่ต้องการความโปร่งใสหรือคุณภาพสมบูรณ์แบบโดยไม่บีบอัด — ซึ่งเป็นกรณีที่พบได้น้อยในบริบทเว็บทั่วไป
- ภาพถ่ายและภาพซับซ้อน: WebP หรือ AVIF
- โลโก้ ไอคอน ภาพประกอบ: SVG
- ภาพหน้าจอที่มีข้อความ: WebP บีบอัดระดับปานกลาง (คุณภาพ 80-85)
- หลีกเลี่ยง GIF เคลื่อนไหว: แทนที่ด้วยวิดีโอ MP4 สั้น ๆ ซึ่งเบากว่า 5 ถึง 10 เท่า
การบีบอัดและขนาดที่เหมาะสม
รูปภาพกว้าง 3,000 px ที่แสดงในคอลัมน์กว้าง 800 px จะถ่ายโอนข้อมูลมากกว่าที่จำเป็น 3 ถึง 4 เท่า ปรับขนาดก่อนบีบอัดเสมอ
ตั้งเป้าน้ำหนักต่ำกว่า 100 Ko สำหรับรูปภาพรอง และต่ำกว่า 200 Ko สำหรับภาพ hero หรือภาพหลัก เกินกว่านั้น ผลกระทบต่อ LCP จะเริ่มวัดได้
การบีบอัดและปรับขนาดรูปภาพช่วยลดเวลาโหลดเริ่มต้นได้ 20 ถึง 40% บนหน้าที่ยังไม่ได้ปรับแต่ง โดยส่งผลโดยตรงต่อคะแนน Core Web Vitals
การศึกษาอุตสาหกรรมปี 2025-2026 เกี่ยวกับประสิทธิภาพเว็บและ SEO
แท็ก alt ชื่อไฟล์ และข้อมูลที่มีโครงสร้าง
แท็ก alt คือข้อความเดียวที่ Google เชื่อมโยงกับรูปภาพได้ ต้องบรรยายเนื้อหาภาพอย่างแม่นยำ โดยแทรกคีย์เวิร์ดอย่างเป็นธรรมชาติหากเกี่ยวข้อง ไม่ฝืนยัด
ชื่อไฟล์มีความสำคัญรองลงมาแต่มีประโยชน์: ใช้คีย์เวิร์ดคั่นด้วยขีดกลาง (image-seo-optimisation.webp) แทน IMG_4821.jpg
สำหรับรูปภาพสินค้าหรือภาพสำคัญ ให้เพิ่มข้อมูลที่มีโครงสร้าง ImageObject หรือ Product ด้วย Schema.org เพื่อเพิ่มการมองเห็นใน Google Images และ rich results
Lazy loading และประสิทธิภาพ
Lazy loading จะโหลดรูปภาพเฉพาะเมื่อเข้าสู่ viewport ซึ่งช่วยลดน้ำหนักเริ่มต้นของหน้าและปรับปรุงคะแนน FCP (First Contentful Paint)
ข้อควรระวัง: อย่าใช้ lazy loading กับภาพ hero หรือภาพ LCP เด็ดขาด — Google และเบราว์เซอร์ต้องโหลดภาพนี้ทันที ใช้ loading="eager" หรือละแอตทริบิวต์นี้สำหรับภาพลำดับความสำคัญสูง
- เพิ่ม loading="lazy" ให้กับรูปภาพทั้งหมดที่อยู่นอก viewport เริ่มต้น
- กำหนดแอตทริบิวต์ width และ height อย่างชัดเจนเพื่อป้องกันการเลื่อนของเลย์เอาต์ (CLS)
- ใช้ srcset เพื่อนำเสนอความละเอียดที่เหมาะสมตามหน้าจอของผู้ใช้
FAQ
เบราว์เซอร์รองรับ lazy loading โดยกำเนิดหรือไม่?
รองรับ ตั้งแต่ปี 2019 สำหรับ Chrome และเบราว์เซอร์สมัยใหม่ และตั้งแต่ปี 2021 สำหรับ Firefox แอตทริบิวต์ loading="lazy" เพียงพอโดยไม่ต้องใช้ไลบรารี JavaScript ภายนอกสำหรับเว็บไซต์ส่วนใหญ่
Google จัดทำดัชนีรูปภาพ WebP หรือไม่?
จัดทำ Google รองรับและจัดทำดัชนีรูปภาพ WebP และ AVIF ได้โดยไม่มีปัญหา ฟอร์แมตเหล่านี้ยังเป็นสิ่งที่แนวทาง PageSpeed Insights ของ Google แนะนำเพื่อลดน้ำหนักของหน้า
การขาดแท็ก alt ส่งผลเสียต่อ SEO หรือไม่?
ไม่ส่งผลเสียโดยตรง แต่ทำให้ Google ขาดสัญญาณบริบทและตัดรูปภาพออกจากการติดอันดับใน Google Images สำหรับเว็บไซต์อีคอมเมิร์ซหรือบล็อกที่มีรูปภาพมาก การขาดแท็ก alt คือการสูญเสียทราฟฟิกอย่างมีนัยสำคัญ