Image SEO คืออะไร วิธีแต่งรูปให้สวยและโหลดไว ถูกใจ Google (อัปเดต 2026)

Image SEO (หรือ Image Optimization) คือกระบวนการปรับแต่งรูปภาพบนเว็บไซต์ทั้งในด้านขนาดไฟล์ ฟอร์แมต ชื่อไฟล์ และ metadata เช่น Alt Text เพื่อให้เว็บโหลดเร็วขึ้นและ Google Bot เข้าใจบริบทของรูปได้ จากข้อมูลของ HTTP Archive (2025) พบว่ารูปภาพคิดเป็นประมาณ 40% ของน้ำหนักหน้าเว็บทั้งหมด ทำให้ Image Optimization เป็นจุดที่ส่งผลต่อ Core Web Vitals มากที่สุด

สวัสดีครับหลานๆ ยินดีต้อนรับกลับสู่อาณาจักร BIQDADDY ครับ

หลังจากที่พ่อใหญ่พาพวกเราวางโครงสร้าง On-Page SEO มาอย่างเข้มข้น ตั้งแต่การจัดระเบียบด้วย Headings การจัดบ้านด้วย URL Structure การถักทอใยแมงมุมด้วย Internal Links และการสร้างสะพานเชื่อมโลกด้วย External Links วันนี้พ่อใหญ่จะพามาตกแต่งบ้านให้สวยงามและน่าอยู่ครับ นั่นคือเรื่องของ Image SEO (การทำ SEO รูปภาพ) ครับ

ในปี 2026 รูปภาพไม่ได้สำคัญแค่กับ Google Images อีกต่อไปแล้ว AI engines อย่าง ChatGPT, Perplexity และ Gemini ก็ดึงรูปจากเว็บไปแสดงประกอบคำตอบด้วยครับ ถ้ารูปของหลานมี metadata ดี ขนาดเหมาะสม และ alt text ชัดเจน โอกาสถูก AI หยิบไปใช้ก็สูงขึ้นมากเลยลูก

Image SEO คืออะไร ทำไมต้องแคร์

Image SEO คือกระบวนการปรับแต่งรูปภาพบนเว็บไซต์ทั้งด้านขนาดไฟล์ ชื่อไฟล์ alt text และ structured data เพื่อให้โหลดเร็วและ search engines เข้าใจบริบทของรูปได้

Image SEO คือกระบวนการปรับแต่งรูปภาพบนเว็บไซต์ ให้มีขนาดไฟล์ที่เล็กที่สุดโดยไม่เสียคุณภาพ และการใส่ HTML Attributes ที่เหมาะสมเพื่อให้ Google Bot เข้าใจว่ารูปนั้นคือรูปอะไร ตามแนวปฏิบัติของ Google Search Central การทำ Image SEO ที่ดีจะช่วยให้รูปภาพติดอันดับทั้งใน Google Images และ Web Search ครับ

ทำไมต้องทำ Image Optimization?

1. เว็บโหลดไวขึ้น (Page Speed) รูปภาพไฟล์ใหญ่คือสาเหตุอันดับ 1 ที่ทำให้เว็บอืดครับ ถ้าเว็บหลานโหลดไว คะแนน Page Speed และ Ranking Factors ก็จะดีขึ้นทันที
2. ติดอันดับค้นหารูปภาพ (Google Images) Google Images รับมากกว่า 1 พันล้าน queries ต่อวัน ถ้าเราทำดีๆ จะได้ Traffic จากช่องทางนี้ฟรีๆ ครับ
3. User Experience (UX) เว็บที่รูปขึ้นไว ดูสบายตา เป็นหัวใจของ Friendly Web Design ที่ทำให้คนอยากอยู่นานๆ และช่วยลด Bounce Rate ได้อย่างดีเยี่ยม
4. AI Engines ดึงรูปไปใช้ ในปี 2026 ChatGPT, Perplexity และ Gemini แสดงรูปประกอบคำตอบ ถ้ารูปมี alt text + structured data ดี โอกาสถูก AI หยิบไปใช้สูงขึ้นมาก

เปรียบเทียบ Format รูปภาพ JPEG vs PNG vs WebP vs AVIF

ก่อนจะลงมือทำอะไร หลานต้องเข้าใจก่อนว่าแต่ละ format มีข้อดีข้อเสียต่างกันครับ พ่อใหญ่เปรียบให้เข้าใจง่ายๆ JPEG เหมือนรถเก๋งธรรมดา, PNG เหมือนรถ SUV (แข็งแรงแต่กินน้ำมัน), WebP เหมือนรถไฮบริด (ประหยัดและดีพอ), ส่วน AVIF เหมือนรถไฟฟ้า (ประหยัดสุดแต่สถานีชาร์จยังไม่ครบ)

แหล่งข้อมูล Google WebP Compression Study WebP เล็กกว่า JPEG 25-34% ที่ SSIM เดียวกัน | AVIF เล็กกว่า WebP อีก 20-25%

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg"
       alt="รองเท้าวิ่ง Nike Air Zoom สีดำ รุ่น 2026"
       width="800" height="600"
       loading="lazy">
</picture>

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

Alt Text หัวใจสำคัญที่ห้ามลืม

นี่คือจุดที่คนพลาดเยอะที่สุดครับ หลานต้องเข้าใจก่อนว่า Google Bot นั้นตาบอดครับ มันมองไม่เห็นว่ารูปของหลานสวยแค่ไหน มันอ่านได้แต่โค้ด เปรียบเทียบง่ายๆ Alt Text เหมือนป้ายอธิบายภาพในพิพิธภัณฑ์ ถ้าไม่มีป้าย ภาพสวยแค่ไหนก็เล่าเรื่องไม่ได้

Alt Text (Alternative Text) คือคำอธิบายรูปภาพที่ซ่อนอยู่ในโค้ด เพื่อบอกบอทว่า นี่คือรูปอะไร ตาม Google Images Best Practices ควรเขียนให้กระชับ บรรยายเนื้อหาของรูป และใส่ keyword อย่างเป็นธรรมชาติ

<img src="IMG_5543.jpg">
<img src="shoe.jpg" alt="รองเท้า รองเท้าวิ่ง รองเท้าแดง รองเท้าถูก">

<img src="mens-running-shoes-red.webp"
     alt="รองเท้าวิ่งผู้ชายสีแดง Nike Air Zoom รุ่นปี 2026"
     width="800" height="600"
     loading="lazy">

ชื่อไฟล์ (File Name) อย่าใช้ภาษาต่างดาว

ก่อนจะอัปโหลดรูปขึ้นเว็บ กรุณาเปลี่ยนชื่อไฟล์ก่อนเสมอครับ เพราะ WordPress จะเอาชื่อไฟล์ไปเป็นส่วนหนึ่งของ URL รูปภาพ ถ้าชื่อไฟล์เป็นภาษาอังกฤษที่สื่อความหมาย Google จะเข้าใจบริบทของรูปตั้งแต่ยังไม่เปิดดู สอดคล้องกับหลักการ URL Structure ที่เราเคยเรียนกันไปครับ

กฎ 3 ข้อของพ่อใหญ่ (1) ภาษาอังกฤษเท่านั้น (2) ตัวพิมพ์เล็กทั้งหมด (3) คั่นคำด้วย hyphen (-) ไม่ใช่ underscore (_) เหตุผลเดียวกับ URL Structure ครับ Google มอง hyphen เป็นการเว้นวรรค แต่ underscore มองเป็นคำเดียวกัน

ขนาดไฟล์ (File Size) เล็กแต่ชัด

ยุคนี้ใครใช้รูปขนาด 5 MB ขึ้นเว็บ คือบาปหนามากครับลูก เว็บหลานจะอืดจนคนกดปิดหนี จากข้อมูลของ HTTP Archive ปี 2025 หน้าเว็บเฉลี่ยหนัก 2.56 MB บนมือถือ โดยรูปภาพกินไปถึง ~40% นั่นหมายความว่าแค่ optimize รูปอย่างเดียวก็ลดน้ำหนักเว็บได้เกือบครึ่งแล้ว! พ่อใหญ่เคยทดสอบกับเว็บ BIQDADDY เอง หลังเปลี่ยนรูปจาก JPEG เป็น WebP ทั้งเว็บ PageSpeed Score บนมือถือเพิ่มจาก 65 เป็น 89 และ LCP ลดลงจาก 4.2 วินาทีเหลือ 1.8 วินาที แค่เปลี่ยน format อย่างเดียวนะลูก ยังไม่ได้ทำอย่างอื่นเลยครับ

ค่าแนะนำอ้างอิงจาก web.dev Image Performance Guide และ Google PageSpeed Insights

สูตรลับของพ่อใหญ่

1. Resize ปรับขนาดกว้างยาวให้พอดีที่จะใช้ (รูปประกอบบทความ กว้างแค่ 800-1000px ก็พอแล้ว)
2. Compress บีบอัดไฟล์ให้เล็กลง พยายามให้ไม่เกิน 100-200 KB ต่อรูป แนะนำเครื่องมือฟรี Squoosh จาก Google ที่ปรับ quality ได้ละเอียดครับ
3. Convert แปลงเป็น WebP หรือ AVIF ซึ่งเล็กกว่า JPEG 25-50% แต่ชัดเท่าเดิม

Responsive Images ส่งรูปขนาดพอดีกับจอ

พ่อใหญ่เปรียบให้ฟัง ไม่ต้องยกรูป 4K ไปให้มือถือจอเล็กๆ เหมือนสั่งข้าว 10 ถ้วยให้คนกินได้ถ้วยเดียว สิ้นเปลืองครับ

เทคนิค Responsive Images คือการบอก browser ว่า "ถ้าจอเล็กส่งรูปเล็ก ถ้าจอใหญ่ส่งรูปใหญ่" ด้วย attribute srcset และ sizes ช่วยลด bandwidth มหาศาล โดยเฉพาะในยุค Mobile-First Indexing ที่ Google ดูจากมือถือก่อน และเป็นหัวใจของ Friendly Web Design ครับ

<img src="product-800.webp"
     srcset="product-400.webp 400w,
             product-800.webp 800w,
             product-1200.webp 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1024px) 800px,
            1200px"
     alt="เสื้อยืดผ้าฝ้ายสีขาว คอกลม ไซส์ M"
     width="800" height="600"
     loading="lazy">

โค้ดนี้ใช้ srcset บอก browser ว่ามีรูป 3 ขนาด (400px, 800px, 1200px) และ sizes บอกว่าจอเล็กใช้รูปเล็ก จอใหญ่ใช้รูปใหญ่ ช่วยประหยัด bandwidth บนมือถือได้มากครับ

Lazy Loading อย่าโหลดรูปที่ยังไม่ต้องดู

พ่อใหญ่เปรียบให้ฟัง Lazy Loading เหมือนร้านบุฟเฟ่ต์ที่เสิร์ฟอาหารทีละจาน ไม่ต้องยกมาหมดรอบเดียวจนโต๊ะล้น

Lazy Loading คือเทคนิคที่ทำให้รูปภาพ "โหลดเมื่อคนเลื่อนหน้าจอไปถึง" แทนที่จะโหลดทุกรูปตั้งแต่เปิดเว็บ ตาม web.dev การใช้ native lazy loading ช่วยลด initial page weight ได้ 50-80% ในหน้าที่มีรูปเยอะครับ

<!-- รูปด้านล่าง (below the fold) → ใช้ lazy -->
<img src="product.webp" alt="..." loading="lazy">

<!-- รูป Hero ด้านบน (above the fold) → ใช้ eager + priority -->
<img src="hero.webp" alt="..." loading="eager" fetchpriority="high">

โค้ดนี้แสดงวิธีใช้ native lazy loading ที่ง่ายที่สุด แค่เพิ่ม loading="lazy" ให้รูปด้านล่าง และ loading="eager" + fetchpriority="high" ให้รูป Hero ด้านบนครับ

Core Web Vitals กับรูปภาพ LCP คือตัวร้ายตัวจริง

จากข้อมูลของ web.dev รูปภาพเป็น LCP element ในกว่า 70% ของหน้าเว็บทั้งหมด! นั่นหมายความว่า ถ้ารูป Hero ของหลานโหลดช้า คะแนน Core Web Vitals ก็จะแย่ไปทั้งหน้า

พ่อใหญ่เปรียบ Core Web Vitals ให้ฟังง่ายๆ LCP เหมือนเวลารอเปิดประตูร้าน ถ้ารอนาน คนก็เดินไปร้านอื่น Google ต้องการให้ LCP อยู่ภายใน 2.5 วินาที สิ่งที่ช่วยได้มากที่สุดคือ Technical SEO เรื่องความเร็วและรูปภาพครับ

3 วิธีลด LCP ด้วยรูปภาพ

1. Preload Hero Image ใส่ ใน เพื่อบอก browser ว่า "โหลดรูปนี้ก่อนเลย"
2. ใช้ Format ที่เล็ก WebP/AVIF ลดขนาดรูป Hero ได้ 25-50% ทำให้ LCP เร็วขึ้นทันที
3. ตั้ง width/height ป้องกัน CLS (Cumulative Layout Shift) ที่ทำให้ layout กระโดด

ระวัง Keyword Stuffing ในรูปภาพ

บางคนหัวหมอ ยัดคีย์เวิร์ดเข้าไปใน Alt Text แบบรัวๆ เช่น "รองเท้า รองเท้าวิ่ง รองเท้าแดง รองเท้าถูก" แบบนี้เรียกว่า Keyword Stuffing (การยัดคำ) ครับ

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

Image Schema บอก AI ว่ารูปนี้เกี่ยวกับอะไร

ในยุค 2026 ที่ AI engines ดึงข้อมูลจากเว็บไปตอบคำถาม การใส่ Image Schema (ImageObject) ซึ่งเป็นส่วนหนึ่งของ Structured Data ช่วยให้ทั้ง Google และ AI เข้าใจรูปภาพของหลานได้ลึกขึ้น เหมาะมากสำหรับรูปสินค้า, สูตรอาหาร, และ How-to ตาม Schema.org ครับ

<script type="application/ld+json">

</script>

การใส่ Image Schema ช่วยเพิ่มโอกาสให้รูปปรากฏใน Rich Snippets และ Google Images อย่างโดดเด่นครับ

บทสรุปของพ่อใหญ่

Image SEO คือศิลปะการหาจุดกึ่งกลางระหว่าง ความสวยงาม และ ความเร็ว ครับ ถ้าหลานทำได้ดี เว็บหลานจะลื่นปรื๊ด คนอ่านแฮปปี้ และ Google ก็จะส่งทราฟฟิกมาให้ทั้งจากหน้าเว็บปกติและหน้าค้นหารูปภาพครับ

สรุปจาก HTTP Archive 2025 เว็บที่ optimize รูปภาพอย่างเป็นระบบสามารถลดน้ำหนักหน้าเว็บได้ถึง 40% ซึ่งส่งผลโดยตรงต่อ Ranking Factors ทุกตัวที่เกี่ยวกับความเร็ว

Image SEO เป็นส่วนหนึ่งของ On-Page SEO ที่ครบวงจร ควบคู่กับการตั้งค่า Meta Tags ให้ถูกต้อง ทั้ง Meta Title และ Meta Description ที่ดึงดูดการคลิก

ก้าวต่อไปของพ่อใหญ่ ตอนนี้เทคนิคการปรับแต่งองค์ประกอบต่างๆ (URL, Links, Images) ของเราแน่นปึ้กแล้ว บทความหน้าพ่อใหญ่จะพาไปเจาะลึกเรื่อง Content Hubs กันบ้างครับ ว่าเราจะวาง Keyword Density อย่างไรให้พอดี ไม่มากไป ไม่น้อยไป เขียนยังไงให้ Google รัก ตามมาเลยลูก

ถ้าหลานๆ ต้องการความช่วยเหลือเรื่องการ optimize รูปภาพ ความเร็วเว็บ หรือ On-Page SEO ทุกด้าน ทักหา BIQDADDY รับทำ SEO ได้เลยครับ!

FAQ หลานๆ ถาม พ่อใหญ่ตอบ (เรื่อง Image SEO)