SEO รูปภาพ: ชื่อไฟล์, alt text, การบีบอัดขนาด และรูปแบบ WebP
1. สองบทบาทของรูปภาพใน SEO: Google Images กับประสิทธิภาพหน้าเว็บ
เว็บไซต์ B2B หลายแห่งเข้าใจ SEO รูปภาพผิด คิดว่าแค่ยัดคีย์เวิร์ดลงในชื่อไฟล์ จริง ๆ แล้วรูปภาพมีสองบทบาทใน SEO: หนึ่งคือแหล่งทราฟฟิกจาก Google Images สองคือภาระหลักของการโหลดหน้าเว็บ
ข้อสรุปที่สวนทางสามัญสำนึกอยู่ตรงนี้: การยัดคีย์เวิร์ดลงในชื่อไฟล์มีผลต่ออันดับใน Google Images น้อยมาก Google ตัดสินหัวข้อของรูปจากบริบทหน้าเว็บ alt text และข้อความรอบรูปเป็นหลัก การตั้งชื่อไฟล์เป็น stainless-steel-flange-pn16.jpg เป็นนิสัยที่ดี แต่ตั้งเป็น stainless-steel-flange-pn16-ansi-b16-5-industrial-flange.jpg ไม่ได้ทำให้มีคนคลิกรูปเพิ่มอีกแม้แต่ครั้งเดียว
สิ่งที่กระทบ SEO จริง ๆ คือขนาดไฟล์ รูปสินค้าขนาด 2MB ที่ยังไม่บีบอัดทำให้ทั้งหน้าช้าลง LCP ตกลงจาก 1.8 วินาทีเหลือ 3.5 วินาที ทั้งอันดับและอัตราการแปลงเสียหายทั้งคู่ นี่คือ Core Web Vitals จุดที่ถูกหักคะแนนบ่อยที่สุด
| มิติ SEO รูปภาพ | ผลต่ออันดับโดยตรง | ผลต่อ CTR และการแปลงโดยอ้อม |
|---|---|---|
| ชื่อไฟล์ | น้อยมาก | ไม่มี |
| alt text | ปานกลาง (Google Images) | ได้ทั้งการเข้าถึงและ Google Images |
| ขนาดและรูปแบบ | มาก (กระทบ LCP) | โหลดเร็ว อัตราตีกลับต่ำ |
| ขนาดและ srcset | ปานกลาง (ประสบการณ์บนมือถือ) | การแปลงทราฟฟิกบนมือถือ |
| ข้อมูลโครงสร้าง ImageObject | น้อย | การแสดงผลแบบ rich result |
และ การจัดการสินทรัพย์สื่อ ความสัมพันธ์: บทความนั้นพูดถึงขั้นตอนการตั้งชื่อ การบีบอัด และการใช้รูปและวิดีโอซ้ำ บทความนี้เน้นวิธีเขียนรูปภาพเพื่อ SEO โดยเฉพาะ
2. ชื่อไฟล์และ alt text: เขียนอะไร ไม่เขียนอะไร
ชื่อไฟล์กับ alt text มักถูกมองว่าเป็นเรื่องเดียวกัน ชื่อไฟล์ไว้ให้เซิร์ฟเวอร์และ crawler อ่าน ส่วน alt text ไว้ให้โปรแกรมอ่านหน้าจอและดัชนี Google Images อ่าน สองอย่างเขียนต่างกัน
| องค์ประกอบ | วิธีเขียนที่ถูก | วิธีเขียนที่ผิด |
|---|---|---|
| ชื่อไฟล์ | stainless-flange-pn16.jpg | IMG_2038.jpg、DSC_0001.jpg |
| alt text | รูปสินค้าหน้าจ่าย PN16 ของหน้าแปลนสแตนเลส | flange flange flange stainless |
| alt ของรูปตกแต่ง | alt=”” (ว่าง) | alt=”เส้นคั่น”, alt=”image” |
| ความยาว | alt 8 ถึง 15 คำ | alt เขียนเป็นย่อหน้ายาว |
| ภาษา | ตรงกับภาษาของหน้าเว็บ | เขียน alt ภาษาไทยสำหรับเว็บไซต์ภาษาอังกฤษ |
หลักการสำคัญของ alt text: ลองจินตนาการว่ามีโปรแกรมอ่านหน้าจอกำลังบรรยายภาพนี้ให้ผู้ใช้ที่มองไม่เห็นฟัง คุณจะอธิบายว่าอย่างไร นี่คือ การเข้าถึงเว็บไซต์ (WCAG) ข้อกำหนด และยังเป็นวิธีที่ถูกต้องสำหรับ SEO รูปภาพด้วย เขียนแค่ “ภาพสินค้าหน้าจับคู่ท่อสแตนเลส PN16” ก็พอ ไม่ต้องเขียนว่า “นี่คือภาพที่แสดงหน้าจับคู่ท่อสแตนเลส ระดับแรงดัน PN16 ตามมาตรฐาน ANSI B16.5 ใช้กับท่ออุตสาหกรรมปิโตรเคมี” เพราะนั่นคือการยัดคีย์เวิร์ด
รูปตกแต่ง (เส้นคั่น ลายพื้นหลัง ไอคอน) ต้องเว้น alt ว่างไว้ (alt=””) ห้ามเขียนว่า “เส้นคั่น” เพราะโปรแกรมอ่านหน้าจอเจอ alt ว่างจะข้ามไป แต่เจอคำว่า “เส้นคั่น” จะอ่านออกเสียง กลายเป็นเสียงรบกวนสำหรับผู้ใช้ที่มองไม่เห็น
สาม การบีบอัดขนาดและ WebP: ค่าเกณฑ์และเครื่องมือ
การบีบอัดคือสิ่งที่คุ้มค่าที่สุดใน SEO รูปภาพ รูปสินค้าขนาด 2MB ที่ยังไม่บีบอัด เมื่อบีบอัดเหลือ 200KB ความต่างทางสายตาที่คนทั่วไปแทบแยกไม่ออก และเวลาโหลดลดจาก 4 วินาทีเหลือ 0.4 วินาที
| รูปแบบ | ขนาดเทียบกับ JPEG | เหมาะกับ | ความเข้ากันได้ |
|---|---|---|---|
| WebP คุณภาพ 80 | เล็กกว่า 25% ถึง 35% | ค่าเริ่มต้นปี 2026 | เบราว์เซอร์สมัยใหม่รองรับทั้งหมด |
| AVIF | เล็กกว่า 50% | สถานการณ์เครือข่ายช้ามาก | ความเข้ากันได้อ่อนกว่าเล็กน้อย ต้องมี JPEG สำรอง |
| JPEG คุณภาพ 80 | เกณฑ์มาตรฐาน | รูปแบบสำรอง | ทุกเบราว์เซอร์ |
| PNG | ใหญ่กว่า 2 ถึง 5 เท่า | ใช้เฉพาะภาพพื้นหลังโปร่งใส | ทุกเบราว์เซอร์ |
ค่าเกณฑ์ที่ใช้ได้จริงสามข้อ ความกว้างรูปหลักสินค้าไม่เกิน 1200px (ใหญ่กว่านี้คือเสียเปล่า) รูปประกอบเนื้อหาไม่เกิน 1600px รูปย่อไม่เกิน 400px ใช้คุณภาพ 80 เท่ากันหมด เพราะคุณภาพ 90 กับ 80 ต่างกันทางสายตาแทบไม่เห็น แต่ขนาดต่างกันเท่าตัว
ด้านเครื่องมือ เว็บ WordPress ใช้ ShortPixel หรือ Imagify แปลงเป็น WebP อัตโนมัติ ส่วนเว็บที่สร้างเองใช้ Sharp ผ่าน command line ประมวลผลเป็นชุด ที่ชั้น CDN ก็แปลงรูปแบบแบบเรียลไทม์ได้ ดูCDN เร่งความเร็วทั่วโลก กลยุทธ์การปรับแต่งรูปภาพ
สี่ รูปแรกและ LCP: ทำไมรูปแรกจึงเป็นรูปที่สำคัญที่สุดสำหรับ SEO
ตัวชี้วัด LCP (Largest Contentful Paint) ใน Core Web Vitals ใน 80% ของกรณีคือรูปแรกบนสุดของหน้าจอ การบีบอัดรูปนี้รูปเดียวมีผลต่อ LCP มากกว่าการบีบอัดรูปย่อ 10 รูปท้ายหน้า
| การปรับแต่งรูปแรก | ผลที่คาดว่าจะได้ | ต้นทุนการทำ |
|---|---|---|
| แปลงเป็น WebP | ขนาด -30% | ต่ำ (ปลั๊กอินทำให้อัตโนมัติ) |
| บีบอัดเหลือคุณภาพ 80 | ขนาด -60% | ต่ำ |
| ระบุ width/height ชัดเจน | CLS ลดลง | ต่ำ (แก้เทมเพลต) |
| fetchpriority=”high” | LCP -0.5 วินาที | ต่ำ (เพิ่มแอตทริบิวต์) |
| srcset หลายขนาด | ประหยัดทราฟฟิกมือถือ 50% | ปานกลาง (สร้างหลายขนาด) |
กรณีที่หนึ่ง: รูปแรกในหน้าสินค้าเดิมเป็น JPEG กว้าง 2400px ขนาด 1.8MB LCP 3.8 วินาที เปลี่ยนเป็นกว้าง 1200px WebP คุณภาพ 80 ขนาด 220KB พร้อมเพิ่ม fetchpriority=”high” LCP ลดเหลือ 1.6 วินาที อันดับคีย์เวิร์ดหลักขยับจากที่ 14 ขึ้นมาที่ 7
กรณีที่สอง: รูปแรกในบทความบล็อกเป็น PNG ปกกว้าง 1920px ขนาด 1.2MB หลังแปลงเป็น WebP เหลือ 180KB เวลาโหลดลดจาก 2.4 วินาทีเหลือ 0.6 วินาที อัตราการออกจากหน้าในมือถือลดจาก 65% เหลือ 41%
การทำรูปภาพให้เป็นท้องถิ่นสำหรับเว็บหลายภาษาต้องคำนึงถึงข้อความที่ฝังอยู่ในแผนภูมิด้วย ดูการจัดการแผนภูมิของเว็บหลายภาษา——รูปภาพในภาพแปลด้วย alt ไม่ได้ ต้องทำภาพแยกออกมาต่างหาก
ห้า ข้อผิดพลาดที่พบบ่อยและเช็กลิสต์ก่อนอัปโหลด
ข้อผิดพลาดที่พบบ่อยที่สุด 5 ข้อใน SEO รูปภาพ ทุกข้อตรวจเจอได้ด้วยการสแกนทั้งเว็บครั้งเดียว
| ข้อผิดพลาด | วิธีตรวจสอบ | การแก้ไข |
|---|---|---|
| alt ว่างเปล่าทั้งหมด | สแกน HTML นับสัดส่วน alt=”” | รูปสินค้าและรูปแรกต้องใส่ alt |
| รูปต้นฉบับไม่ได้บีบอัด | ดูจำนวนรูปที่ขนาดเกิน 300KB ต่อรูป | แปลงเป็น WebP ทั้งชุดที่คุณภาพ 80 |
| ขาด width/height | รายงาน Lighthouse | เพิ่มแอตทริบิวต์ในเทมเพลต ลด CLS |
| ชื่อไฟล์ IMG_xxxx | สแกนโฟลเดอร์ uploads | เปลี่ยนชื่อทั้งชุดให้สื่อความหมาย |
| ไม่ได้ใช้ฟอร์แมตสมัยใหม่ | 看 Content-Type | เปิดแปลง WebP อัตโนมัติที่ชั้น CDN |
ข้อมูลโครงสร้างรูปภาพ (ImageObject) ให้ผลตอบแทนเล็กน้อยกับหน้าสินค้า B2B เปิดพร้อมกับ structured data Schema ได้เลย แต่ความสำคัญต่ำกว่าการบีบอัดและ alt ลดขนาดก่อน แล้วค่อยคุยเรื่องสื่อสมบูรณ์
หก ภาพ Sitemap ฟิลด์ลิขสิทธิ์ และการโหลดแบบเลื่อน
หลายคนคิดว่าใส่ alt ครบ บีบอัดรูปเสร็จ ก็ถือว่าทำ SEO รูปภาพจบแล้ว แต่จริง ๆ ยังตกหล่นอยู่สามเรื่อง เรื่องแรกคือภาพ Sitemap นอกจาก HTML sitemap แล้ว Google ยังรองรับการระบุ URL รูปภาพ caption title และฟิลด์ license แยกไว้ใน sitemap ด้วย ถ้ารูปสินค้าและอินโฟกราฟิกอาศัยแค่แท็ก img ในหน้าเว็บให้ Google ค่อย ๆ เก็บ รูปใหม่อาจใช้เวลาสองถึงสามสัปดาห์กว่าจะเข้าไปอยู่ในผลการค้นหารูป แต่ถ้าส่งภาพ Sitemap เข้าไป ระยะเวลาการทำดัชนีมักลดเหลือสามถึงห้าวัน ถึงแม้ทราฟฟิกจากค้นหารูปของเว็บอุตสาหกรรม B2B จะคิดเป็นเพียง 5% ถึง 15% ของทราฟฟิกออร์แกนิก แต่ทราฟฟิกส่วนนี้มีเจตนาซื้อสูง จึงปล่อยทิ้งไม่ได้
เรื่องที่สองคือฟิลด์ลิขสิทธิ์และสัญญาอนุญาต ใน ImageObject ของ Schema สามารถเพิ่มฟิลด์ license, acquireLicensePage และ creditText เพื่อระบุเจ้าของลิขสิทธิ์และสัญญาอนุญาตใช้เชิงพาณิชย์ของรูปนั้น ปกติไม่มีใครสนใจเรื่องนี้ แต่เมื่อรูปของคุณถูกนำไปเทรนโมเดลภาพ AI ฟิลด์ลิขสิทธิ์ที่ชัดเจนคือหลักฐานสำหรับเรียกร้องสิทธิ์ในภายหลัง ตรงกันข้าม ถ้าคุณใช้รูปจากคลังภาพแบบเสียเงินแต่ไม่ได้ระบุสัญญาอนุญาตบนหน้าเว็บ ความเสี่ยงที่จะถูกเจ้าของผลงานต้นฉบับร้องเรียนและสั่งลบก็มีอยู่ตลอด
เรื่องที่สามคือความขัดแย้งระหว่างการโหลดแบบเลื่อนกับรูป LCP รูปแรกที่เป็น LCP ต้องโหลดแบบ eager และใส่ fetchpriority=”high” ส่วนรูปประกอบในเนื้อหาอื่นจึงค่อยใช้ loading=”lazy” ข้อผิดพลาดที่พบบ่อยคือใส่ loading=”lazy” ทั้งเว็บแบบเดียวกันหมด ผลคือรูปแรกก็ถูกเลื่อนไปด้วย ทำให้ LCP ช้าลงตรง ๆ 1 วินาที วิธีตรวจสอบคือดูคำเตือน Largest Contentful Paint image was lazily loaded ใน Lighthouse ถ้าขึ้นแสดงว่ารูปแรกถูกใส่ lazy ผิดพลาด
| รายการที่ต้องเติมให้ครบ | แนวทาง | ประโยชน์ |
|---|---|---|
| ภาพ Sitemap | ระบุ URL รูปภาพใน XML sitemap | ทำดัชนีรูปเร็วขึ้นราวสองสัปดาห์ |
| ฟิลด์ลิขสิทธิ์ | ใส่ license ใน ImageObject | ตรวจสอบสัญญาอนุญาตใช้เชิงพาณิชย์ได้ |
| รูปแรกโหลดแบบ eager | รูป LCP ไม่ใส่ lazy | LCP ไม่ลดกลับเพิ่ม |
| ข้อมูลแบบมีโครงสร้าง | ใส่ ImageObject ให้รูปสินค้า | การแสดงผลแบบ rich result |
รูปภาพบนเว็บหลายภาษามีปัญหาอีกข้อที่แยกออกมา: ข้อความในรูปแปลด้วย alt ไม่ได้ ถ้ารูปข้อมูลมีตัวเลขสเปกเป็นภาษาจีน เวอร์ชันภาษาอังกฤษต้องทำรูปใหม่ที่ติดป้ายเป็นภาษาอังกฤษ จะหวังให้ alt แปลตัวอักษรในรูปแทนไม่ได้ การแปลแผนภูมิเป็นภาษาท้องถิ่นมีต้นทุนสูง แต่เว็บหลายภาษาที่ทำไม่ครบ เวอร์ชันภาษาอังกฤษจะดูออกทันทีในสายตาผู้ซื้อเจ้าของภาษาว่าเป็นรูปที่แปลด้วยเครื่อง ความน่าเชื่อถือลดลงทันที ขั้นตอนส่วนนี้ดูที่การจัดการแผนภูมิของเว็บหลายภาษา。
FAQ คำถามที่พบบ่อย
ชื่อไฟล์รูปต้องมีคีย์เวิร์ดไหม?
เขียน alt ยาวเท่าไรถึงเหมาะสม?
WebP เล็กกว่า JPEG แค่ไหน?
บีบขนาดรูปให้เหลือกี่ KB ถึงจะถือว่าผ่าน?
รูปภาพส่งผลต่อทราฟฟิกจาก Google Images แค่ไหน?
WordPress ใช้ปลั๊กอินตัวไหนออปติไมซ์รูปอัตโนมัติ?
ทิ้งท้าย
ลำดับความสำคัญของ SEO รูปภาพชัดเจนมาก: บีบรูปแรกแก้ LCP ก่อน เขียน alt แก้การเข้าถึงและดัชนีรูปต่อ ท้ายสุดคือตั้งชื่อไฟล์ตามความหมาย ทำสามขั้นนี้จบ คุณก็แซง 80% ของเว็บ B2B ที่ยังอัปโหลดรูปต้นฉบับ 2MB อยู่แล้ว
ลงมือ 3 สัปดาห์: สัปดาห์นี้ใช้ Lighthouse ตรวจ 20 หน้าหลักทั่วเว็บ แล้วจดรายการหน้าที่ LCP เกิน 2.5 วินาที; สัปดาห์หน้าแปลงภาพแรกของหน้าเหล่านี้เป็น WebP ทั้งชุด บีบให้เหลือไม่เกิน 250KB แล้วใส่ width/height กับ fetchpriority; สัปดาห์ที่สามไล่สแกนรูปสินค้าที่ alt ว่างทั้งเว็บ แล้วเขียนคำอธิบายภาพตามกฎ “8 ถึง 15 คำ”
จำสั้นๆ ไว้เลย: SEO รูปภาพไม่ได้อยู่ที่ยัดคีย์เวิร์ดในชื่อไฟล์ แต่อยู่ที่บีบภาพแรกให้เหลือไม่เกิน 250KB — พอเร็วขึ้น อันดับและการแปลงก็ตามมาเอง