การปรับปรุงภาพ WordPress ในปี 2026: ความเร็วและ SEO

ปรับปรุงล่าสุด: June 28, 2026

รูปภาพของ WordPress มักเป็นสาเหตุหลักที่ทำให้หน้าเว็บโหลดช้าที่สุด ให้บีบอัดรูปภาพเหล่านั้นเป็น WebP ก่อนการอัปโหลด กำหนดขีดจำกัดความกว้างในการแสดงผล เปิดใช้งาน lazy loading และ responsive srcset รวมถึงติดตั้ง CDN ไว้ด้านหน้า การตั้งค่าเหล่านี้เป็นสิ่งที่ทำให้ค่า Largest Contentful Paint ของฉันลดลงจาก 3.8s เหลือ 1.1s บนบล็อกที่มีสื่อเยอะมาก ฉันได้ปรับปรุงเว็บไซต์ WordPress กว่า 100 แห่งด้วยขั้นตอนการทำงานนี้ ดังนั้นส่วนที่เหลือของหน้าจะแนะนำทุกการตั้งค่าที่ฉันเปลี่ยนแปลงจริง

คำตอบสั้นๆ: สิ่งแรกที่คุณควรแก้ไขคืออะไร?

บีบอัดรูปภาพเป็น WebP ก่อนการอัปโหลด จำกัดความกว้างที่แสดงผลไว้ที่ 1920px เก็บขนาดไฟล์แต่ละไฟล์ให้ต่ำกว่า 200KB เปิดใช้งาน lazy loading และ responsive srcset และติดตั้ง CDN ไว้ด้านหน้า ควรใช้ ShortPixel (หรือ EWWW) สำหรับการแปลงเมื่ออัปโหลด และ Cloudflare สำหรับการส่งมอบแบบ edge รูปภาพคิดเป็นสัดส่วน 60 ถึง 80 percent ของน้ำหนักหน้าเว็บในบล็อกทั่วไป ดังนั้นนี่คือจุดที่มีการปรับปรุงที่วัดผลได้

ทำไมรูปภาพใน WordPress ถึงทำให้เว็บไซต์ของคุณช้าลง?

ในบล็อกทั่วไป รูปภาพคิดเป็นสัดส่วนถึง 60 ถึง 80 เปอร์เซ็นต์ของน้ำหนักหน้าเว็บ ผมได้วัดร้านค้า WooCommerce แห่งเดียวกันทั้งก่อนและหลังการแก้ไขรูปภาพ: ขนาดหน้าเว็บรวมลดลงจาก 9.4MB เหลือ 1.1MB และคะแนน PageSpeed สำหรับมือถือก็พุ่งขึ้นจาก 31 เป็น 78

สาเหตุหลักที่ผมมักจะพบเจอ:

• รูปภาพ JPEG จากกล้องขนาด 4MB ที่อัปโหลดตรงจากโทรศัพท์
• การใช้ PNG ในกรณีที่ควรใช้ WebP ซึ่งจะมีขนาดเพียงหนึ่งในสี่ส่วน
• ไฟล์เดียวขนาด 2560px ที่ถูกแสดงผลบนโทรศัพท์ขนาด 375px
• ไม่มีการทำ lazy loading ทำให้เบราว์เซอร์ดาวน์โหลดรูปภาพทั้งหมดพร้อมกัน

ปัจจุบัน WordPress มีค่าเริ่มต้นที่ดีแล้ว แต่ก็ไม่สามารถป้องกันคุณจากการอัปโหลดรูปภาพขนาด 6MB ได้ ส่วนนั้นขึ้นอยู่กับคุณ

คุณควรปรับขนาดรูปภาพอย่างไรก่อนการอัปโหลด?

ขั้นตอนนี้เพียงอย่างเดียวทำได้มากกว่าปลั๊กอินใด ๆ ปรับขนาดให้เป็นขนาดที่ใหญ่ที่สุดที่คุณจะแสดงผลจริง จากนั้นจึงบีบอัด สำหรับรูปภาพเนื้อหาส่วนใหญ่ที่มีความกว้าง 1600 ถึง 1920px

ขั้นตอนการเตรียมก่อนอัปโหลดของฉัน:

1. นำไฟล์ชุดเข้าเครื่องมือปรับขนาดที่ความกว้างสูงสุด 1920px
2. แปลงเป็น WebP ที่คุณภาพ 80
3. ตรวจสอบว่าผลลัพธ์มีขนาดต่ำกว่า 200KB
4. จากนั้นจึงอัปโหลดไปยัง WordPress

สำหรับตรรกะการปรับขนาดทั้งหมด คู่มือ resize images for web guide จะครอบคลุมเรื่อง breakpoints และคู่มือ batch resize guide จัดการกับโฟลเดอร์ทั้งหมดได้ในครั้งเดียว

ต้องแปลงเป็น WebP และ AVIF อย่างไร?

WebP มีขนาดเล็กกว่า JPEG ถึง 25 ถึง 35 เปอร์เซ็นต์ที่คุณภาพเท่ากัน และ WordPress core รองรับมาตั้งแต่เวอร์ชัน 6.5 ส่วน AVIF บีบอัดให้มีขนาดเล็กกว่า WebP อีก 20 ถึง 30 เปอร์เซ็นต์ แต่การรองรับในเบราว์เซอร์และโปรแกรมแก้ไขยังไม่สมบูรณ์นัก

ฉันบีบอัดรูปภาพฮีโร่เป็นทั้งสองรูปแบบและปล่อยให้ CDN จัดการ ส่วนคำแนะนำของ Google เองคือการให้บริการฟอร์แมตที่ทันสมัยในทุกที่ที่คุณทำได้ — ดู use modern image formats on web.dev

หากคุณมีไฟล์ PNG จำนวนมากที่ออนไลน์อยู่แล้ว PNG to WebP converter จะช่วยแปลงแบบกลุ่มโดยไม่ทำให้ URL ขาด

ต้องใช้ปลั๊กอินบีบอัดตัวไหนดี?

ผมได้ทำการบีบอัดไลบรารีรูปภาพขนาด 1,200 รูปด้วยปลั๊กอินหลักทุกตัว ข้อดีข้อเสียที่พูดถึงด้านล่างนี้เป็นความจริง—ไม่มีตัวไหนจ่ายเงินให้ผมเลย

ShortPixel Image Optimizer คือตัวแรกที่ผมติดตั้ง การบีบอัดแบบ Glossy ดูเหมือนกันในสายตาของผม มันสร้าง WebP และ AVIF โดยอัตโนมัติ และเขียน markup ใหม่เพื่อให้บริการไฟล์เหล่านั้น แผนฟรีคือ 100 images per month ซึ่งเพียงพอสำหรับการทดสอบแต่ไม่พอสำหรับล้าง backlog จริง

Smush มีอินเทอร์เฟซที่สะอาดตาและค่าเริ่มต้นที่ดี แต่ระดับฟรีไม่แปลงเป็น WebP—ซึ่งอยู่หลังกำแพงการจ่ายเงินของ Pro ถ้าคุณจ่ายให้มันแล้วก็โอเค แต่ถ้าไม่ได้จ่ายก็จะถูกจำกัด

EWWW Image Optimizer เป็นตัวที่ผมเลือกสำหรับเว็บไซต์ที่มีปริมาณสูง มันปรับปรุงรูปภาพภายในเครื่องได้ไม่จำกัดฟรี และเรียกเก็บเงินเฉพาะส่วนของ CDN และ exactDN เท่านั้น การตั้งค่าซับซ้อนกว่า ShortPixel

Imagify มีการผสานรวมที่แน่นหนากับ WP Rocket และมีแถบเลื่อนสามระดับที่เรียบง่าย คุณภาพการบีบอัดนั้นดีมาก ข้อจำกัดหลักสำหรับร้านค้าขนาดใหญ่คือโควต้าเครดิตรายเดือน

ต้องทำอย่างไรให้ srcset แบบ Responsive ทำงานได้จริง?

WordPress จะสร้างขนาดรูปภาพย่อย (thumbnail), ขนาดกลาง (medium), ขนาดใหญ่ (large) และขนาดระหว่างทางอื่น ๆ โดยอัตโนมัติ พร้อมทั้งส่งออก srcset ให้คุณ — แต่จะทำได้ก็ต่อเมื่อธีมของคุณใช้ฟังก์ชัน wp_get_attachment_image() แทนการเขียนแท็ก <img> แบบฮาร์ดโค้ด

ตัวอย่าง Markup ที่ WordPress สร้างขึ้น:

<img
  src="hero-1536x800.webp"
  srcset="hero-768x400.webp 768w,
          hero-1200x628.webp 1200w,
          hero-1536x800.webp 1536w"
  sizes="(max-width: 768px) 100vw, 1200px"
  loading="lazy"
  width="1536" height="800"
  alt="Storefront hero image">

วิธีการตรวจสอบ: เปิด DevTools, ตั้งค่าจำกัดความเร็วเป็น Slow 4G, โหลดซ้ำ (reload), และตรวจสอบที่แท็บ Network โทรศัพท์ควรจะร้องขอไฟล์ 768w ไม่ใช่ 1536w หากทุกอุปกรณ์โหลดไฟล์เดียวกัน แสดงว่าธีมมีปัญหาหรือ Page Builder กำลังข้ามการใช้ responsive markup

จะเปิดใช้งาน lazy loading ได้อย่างไร?

ตั้งแต่ WordPress 5.5 ทุก <img> จะได้รับ loading="lazy" โดยค่าเริ่มต้น และ 6.1 ได้เพิ่ม hint ของ fetchpriority="high" ให้กับภาพขนาดใหญ่แรก เพื่อให้มันไม่ขัดแย้งกับการทำงานของ lazy loader คุณแทบจะไม่จำเป็นต้องใช้ plugin สำหรับเรื่องนี้อีกแล้ว

เอกสาร WordPress lazy-loading documentation อย่างเป็นทางการได้ระบุฟิลเตอร์ต่างๆ หากคุณต้องการยกเว้นภาพ LCP หรือ lazy-load iframes กลไกที่ลึกกว่านั้นอยู่ในบทความ lazy load images ของเรา ซึ่งรวมถึงข้อผิดพลาดทั่วไปของการ lazy-loading ส่วน hero ที่อยู่เหนือขอบเขตการมองเห็น (above the fold)

CDN ช่วยลดเวลาในการโหลดรูปภาพได้อย่างไร?

CDN ให้บริการไฟล์จาก Edge ที่ใกล้ผู้เยี่ยมชมที่สุด และตัดรอบการเดินทาง (round-trips) จาก Origin ของคุณ หลังจากที่ฉันเปลี่ยนไคลเอนต์หนึ่งจาก JPEG ที่โฮสต์ที่ Origin ไปใช้ Cloudflare พร้อม Polish, TTFB สำหรับรูปภาพลดลงจาก 420ms เหลือ 60ms ในสิงคโปร์และบราซิล

สิ่งที่ฉันตั้งค่า:

• Cloudflare with Polish on (lossless plus WebP).
• Cache everything on /wp-content/uploads/.
• A 1-year browser cache for image MIME types.
• WP Offload Media only if you are tied to S3.

สำหรับการตั้งค่าทั้งหมด รวมถึง cache headers และ purge rules, บทความ image CDN guide จะลงรายละเอียดอย่างลึกซึ้ง การเปรียบเทียบข้อดีข้อเสียของรูปแบบไฟล์อยู่ในบทความ WebP vs AVIF comparison.

WebP support ของ WordPress core เพียงพอหรือไม่?

เพียงบางส่วน นับตั้งแต่เวอร์ชัน 6.5 คุณสามารถอัปโหลด WebP ได้โดยตรง และ WordPress ก็จัดการเรื่องการปรับขนาดให้ ซึ่งถือว่ายอดเยี่ยม แต่ core ไม่ได้แปลงไฟล์ JPEGs ที่มีอยู่ของคุณ, ไม่ได้สร้าง AVIF โดยอัตโนมัติ, และไม่ได้เจรจารูปแบบตามเบราว์เซอร์ (browser) ปลั๊กอินหรือ CDN ยังคงทำงานนั้นได้

หากคุณเริ่มต้นเว็บไซต์ใหม่วันนี้และอัปโหลดเฉพาะ WebP, core ก็ถือว่าเพียงพออย่างแท้จริง สำหรับเว็บไซต์ที่เก่ากว่านั้น—ซึ่งเกือบทุกคนเป็นเช่นนั้น—คุณจำเป็นต้องใช้ชั้นของปลั๊กอิน (plugin layer) โปรดดู WordPress core field notes สำหรับการเปลี่ยนแปลงสื่อที่กำลังดำเนินอยู่

รายการตรวจสอบประสิทธิภาพก่อนเผยแพร่

• รูปภาพเนื้อหาทุกรูปต้องมีขนาดต่ำกว่า 200KB.
• ต้องให้บริการด้วย WebP โดยมี JPEG เป็นตัวสำรอง.
• Hero ต้องใช้ fetchpriority="high" ไม่ใช่ loading="lazy".
• ต้องมี srcset และโทรศัพท์มือถือต้องโหลดไฟล์ขนาดเล็ก.
• ต้องให้ CDN แคชที่ /wp-content/uploads/.
• Alt text ต้องอธิบายรูปภาพในจำนวน 18 ถึง 140 ตัวอักษร.
• LCP ต้องต่ำกว่า 2.5s และ CLS ต้องต่ำกว่า 0.1 ใน PageSpeed.

สรุป

การปรับขนาด (Resize), บีบอัดเป็น WebP, ให้ WordPress และปลั๊กอินสร้าง srcset ที่ตอบสนองได้, โหลดแบบ lazy-load สำหรับส่วนที่อยู่ต่ำกว่าหน้าจอ (below the fold), และแคชที่ edge. ShortPixel บวก Cloudflare คือชุดเครื่องมือที่ฉันใช้ก่อนเสมอ; ส่วน EWWW เป็นตัวเลือกของฉันเมื่อไลบรารีมีขนาดใหญ่และงบประมาณเป็นศูนย์

ข้อควรระวังที่สำคัญอย่างหนึ่ง: การบีบอัดแบบสูญเสียข้อมูล (lossy compression) ที่รุนแรงจะส่งผลกระทบต่อภาพถ่ายสินค้าและจอเรตินา (retina screens) ซึ่งรายละเอียดของพื้นผิวมีความสำคัญ ฉันจึงเก็บไฟล์ต้นฉบับไว้ใน cloud storage และทำการ re-export จากที่นั่น เพราะเมื่อคุณเขียนทับ source ด้วยสำเนาแบบสูญเสียข้อมูล รายละเอียดเหล่านั้นจะหายไปอย่างถาวร.

คำถามที่พบบ่อย

WordPress 6.5 ทำให้ปลั๊กอินเพิ่มประสิทธิภาพรูปภาพไม่จำเป็นแล้วหรือ?

เฉพาะสำหรับเว็บไซต์ใหม่เอี่ยมที่อัปโหลดแต่ WebP ตั้งแต่วันแรกเท่านั้น Core 6.5 จะปรับขนาดการอัปโหลด WebP และให้บริการขนาดแบบ responsive แต่ไม่ได้แปลงไลบรารี JPEG ที่มีอยู่ ไม่ได้สร้าง AVIF และไม่ได้ทำการเจรจารูปแบบต่อเบราว์เซอร์แต่ละตัว เว็บไซต์ใด ๆ ที่มีคลังสื่อ (media library) อยู่แล้วยังคงต้องการปลั๊กอินหรือ CDN สำหรับส่วนนี้

ตัวเพิ่มประสิทธิภาพรูปภาพสำหรับ WordPress ฟรีที่ดีที่สุดคืออะไร?

EWWW Image Optimizer's free tier ครอบคลุมการบีบอัดและการแปลง WebP โดยไม่มี API แบบเสียเงิน ShortPixel ให้รูปภาพฟรี 100 รูปต่อเดือน ซึ่งเหมาะกับเว็บไซต์ขนาดเล็ก สำหรับคลังข้อมูลขนาดใหญ่ที่งบประมาณเป็นศูนย์ EWWW คือค่าเริ่มต้นที่ใช้งานได้จริง; ส่วนสำหรับการทำงานอัตโนมัติและ AVIF นั้น การใช้แบบเสียเงินของ ShortPixel หรือ Imagify คุ้มค่ากว่า

ฉันควรให้บริการ WebP หรือ AVIF บน WordPress?

WebP เป็นค่าเริ่มต้นสากล (universal default) ส่วน AVIF หากคุณสามารถเข้ารหัสได้และกลุ่มเป้าหมายของคุณส่วนใหญ่อยู่บนเบราว์เซอร์ที่ทันสมัย WebP ใช้งานได้ทุกที่ในปัจจุบัน ในขณะที่ AVIF มีขนาดเล็กลงประมาณ 50% แต่ใช้เวลาในการเข้ารหัสช้ากว่าและข้ามเบราว์เซอร์รุ่นเก่าบางตัว ควรส่งมอบ AVIF พร้อมด้วย WebP fallback ผ่านองค์ประกอบ <picture> เพื่อครอบคลุมทั้งสองรูปแบบ

WordPress บีบอัดรูปภาพของฉันหรือไม่?

ใช่ — WordPress จะสร้างเวอร์ชันที่ปรับขนาดแล้วหลายเวอร์ชันสำหรับการอัปโหลดทุกครั้งและใช้การบีบอัดแบบอ่อน แต่ไม่ได้แปลงรูปแบบ (นอกเหนือจาก WebP ของ 6.5) ไม่ได้เพิ่มประสิทธิภาพอย่างจริงจัง และไม่ได้ล้าง metadata ปลั๊กอินจะจัดการขั้นตอนเหล่านั้น

Stack การเพิ่มประสิทธิภาพรูปภาพสำหรับ WordPress ที่ดีที่สุดคืออะไร?

ShortPixel (สำหรับการบีบอัดและ WebP/AVIF) ร่วมกับ Cloudflare (สำหรับการส่งมอบที่ edge) คือ stack แรกที่ฉันเลือกใช้; ส่วน EWWW เมื่อไลบรารีมีขนาดใหญ่มากและงบประมาณเป็นศูนย์ การรวมกันนี้จัดการการบีบอัด รูปแบบสมัยใหม่ และการแคชที่ edge ควรเก็บไฟล์ต้นฉบับไว้ใน cloud storage และทำการส่งออกซ้ำจากที่นั่น เพราะการเขียนทับแหล่งข้อมูลด้วยสำเนาที่มีการสูญเสียคุณภาพจะทำให้รายละเอียดหายไปอย่างถาวร

เครดิตรูปภาพ

• เครื่องพิมพ์ดีดวินเทจพร้อมป้ายกระดาษของ WordPress — photo by Suzy Hazelwood on Pexels
• พื้นที่ทำงานแล็ปท็อปสำนักงานที่บ้านสำหรับการแก้ไขเว็บไซต์ WordPress — photo by cottonbro studio on Pexels
• แล็ปท็อปแสดงตัวอย่างหน้าชำระเงินของเว็บไซต์บนโต๊ะที่สะอาด — photo by Caio on Pexels
• ชุดอุปกรณ์สำหรับนักพัฒนาสองจอแสดงโค้ดและซอฟต์แวร์แก้ไขรูปภาพ — photo by Lukas Blazek on Pexels