เมื่อกล่าวถึงวิธีการ ปรับปรุงรูปภาพ WordPress หลายคนคงนึกไปถึงการใส่ alt text ให้กับรูปภาพ ซึ่งในทางปฏิบัติ เรามีวิธีในการปรับปรุงรูปภาพ WordPress อยู่ 20 กว่าวิธี (ทั้งนี้รวมถึงวิธีการทำอันดับรูปภาพใน SEO และในเรื่องของความเร็วในการโหลด) ซึ่งจะทำให้เราได้คะแนนที่สูงขึ้นใน GTmetrix, Pingdom, WebPageTest และช่วยเพิ่มอันดับให้ดีขึ้นได้ในหน้า SERP (Search Engine Result Page) นอกจากนี้ ยังทำให้เว็บไซต์ของคุณโหลดเร็วขึ้นเป็นอย่างมากอีกด้วย การทำให้เว็บไซต์สามารถโหลดได้ภายใน 2 วินาทีนั้น การปรับปรุงรูปภาพ WordPress นั้นถือว่าเป็นงานหลักเลยทีเดียว
ลดขนาดภาพก่อนทำการอัพโหลด – ใช้โปรแกรมเช่น Photoshop ในการลดขนาดภาพ ก่อนที่จะทำการอัพโหลด จะช่วยลดเวลาในการปรับปรุงภาพเป็นอย่างมาก คุณสามารถปรับขนาดภาพ บีบอัดไฟล์ภาพ ลบ EXIF data บันทึกภาพในฟอร์แมตที่ถูกต้อง (เช่น PNG/JPEG) และตั้งชื่อไฟล์ภาพให้เหมาะสม (ซึ่งเราจะทำการแทรก alt text โดยการใช้ปลั๊กอิน)
หากคุณต้องการไฟล์ภาพที่มีคุณภาพสูง (เช่นเว็บไซต์ช่างภาพ) คุณอาจเลือกที่จะไม่ทำการลดขนาด หรือบีบอัดภาพ เพราะจะทำให้คุณภาพของภาพลดลง (แม้ว่าจะเป็นเพียงเล็กน้อยก็ตาม)
เครื่องมือหลักที่ผมใช้ – ปกติแล้วผมจะเลือกใช้บริการเว็บไซต์อย่าง imageresize ในการเปลี่ยนขนาดภาพ และใช้บริการ tinypng ในการบีบอัดไฟล์ภาพให้เล็กลง ส่วนปลั๊กอิน cache ที่เลือกใช้คือ WP Rocket และใช้ Imagify สำหรับปรับปรุงคุณภาพของภาพอีกเล็กน้อย ใช้ CDN ทั้ง Cloudflare (ซึ่งฟรี) และใช้ StackPath ซึ่งมีราคาย่อมเยา ใช้แพคเกจถูกสุด สุดท้าย ใช้ GTMetrix ในการทดสอบความเร็ว
คู่มือ ปรับปรุงรูปภาพ WordPress
สารบัญ
1. ค้นหาภาพที่ยังไม่ได้ทำการลดขนาด
หลังจากที่คุณทำการทดสอบผ่าน GTmetrix และคุณมองเห็นข้อบกพร่องต่าง ๆ ในส่วนของ Page Speed และ YSlow เราจะพบว่า เรามีส่วนที่เราสามารถแก้ไขเกี่ยวกับรูปภาพได้ทั้งหมด 8 ส่วน 5 ส่วนแรก จะเกี่ยวกับรูปภาพนั้น ๆ GTmetrix จะแสดงให้เราเห็นถึงภาพที่ทำการทดสอบในหน้าเพจนั้น ๆ ส่วนที่เหลืออีก 3 ส่วน จะเป็นส่วนที่เราต้องปรับแก้ในหน้าเว็บไซต์ทั้งหมด เรามีวิธีทั้งหมดอยู่ 8 วิธี แต่เราจะเริ่มแก้ไขจากส่วนที่สำคัญที่สุดก่อน
- Serve scaled images (PageSpeed) – ปรับปรุงและแสดงผลภาพที่มีขนาดถูกต้องกับขนาดที่แสดงบนหน้าจอ
- Specify image dimensions (PageSpeed) – กำหนดขนาดความกว้างและความสูงใน HTML หรือ CSS
- Optimize images (PageSpeed) – ลดขนาดไฟล์ภาพให้เล็กลง
- Combing images using CSS sprites (PageSpeed) – รวมภาพย่อย ๆ หลายภาพให้กลายเป็นภาพเดียว
- Avoid URL redirects (PageSpeed) – หลีกเลี่ยงการแสดงภาพที่มาจากแหล่งอื่น หรือต้อง redirect
- Use a content delivery network (PageSpeed) – แสดงภาพหรือไฟล์อื่น ๆ จาก CDN
- Leverage browser caching (PageSpeed) – ใช้ cache plugin ช่วยทำหน้าที่เป็นหน่วยความจำให้รูปภาพ
- Make favicon small and cacheable (YSlow) – ใช้ favicon ขนาด 16x16px favicon และทำการ cache
เริ่มจากทำการแก้ไขภาพที่มีผลต่อเว็บไซต์โดยรวมก่อน เช่น logo, ภาพที่อยู่ใน sidebar/footer, และอื่น ๆ รวมไปถึงการนำเสนอภาพที่มีขนาดถูกต้องกับที่แสดงบนหน้าเว็บ (serve scaled images) ซึ่งเราอาจจำเป็นต้องทำการ resize/reupload ภาพขนาดใหม่
2. Serve Scaled Images
หากเราพบข้อแก้ไขในส่วนของ serve scaled images ใน GTmetrix หมายความว่า คุณมีภาพที่มีขนาดใหญ่จนเกินไป และจำเป็นต้องทำการเปลี่ยนขนาด resize ให้มีขนาด dimensions ที่ถูกต้อง (ซึ่ง GTmetrix ได้เตรียมไว้ให้แล้ว) หากคุณทำตามคำแนะนำเกี่ยวกับขนาดที่ให้ไว้ (ดูด้านล่าง) คุณก็จะไม่พบ errors อีก ที่ต้องทำก็เพียงแค่ปรับขนาดให้ถูกต้อง หรือเลือกใช้ปลั๊กอินช่วยในการปรับขนาด
การแก้ไขขนาดภาพจำนวนมากโดยการใช้ปลั๊กอิน – ปัญหาหลักของวิธีนี้คือ รูปภาพบนหน้าเว็บนั้น มักจะมีขนาดต่าง ๆ กัน และไม่ตายตัว ในขณะที่ปลั๊กอินนั้น มีตัวเลือกในการปรับขนาดภาพไม่มากนัก ซึ่งอาจได้ผลลัพธ์ที่ไม่ถูกใจนัก ในทางปฏิบัติ ทางที่ดีเราควรทำการตัด และปรับขนาดภาพให้เหมาะสมก่อนที่จะอัพโหลดทุกครั้ง หากคุณมีความจำเป็นต้องใช้ปลั๊กอินช่วยในการปรับขนาดภาพ คุณควรทำการสำรองข้อมูลภาพต้นฉบับไว้เสียก่อน
การแก้ไขขนาดภาพแบบกำหนดเอง – หลังจากที่เราได้รับขนาดที่ถูกต้องจาก GTmetrix ให้เราทำการปรับขนาดภาพให้เหมาะสม หนึ่งในวิธีที่แนะนำคือการแก้ไขผ่านเว็บไซต์ imageresize ซึ่งใช้งานได้ง่าย สะดวก และรวดเร็วกว่าการใช้โปรแกรมอย่าง Photoshop ในการปรับภาพ จากนั้นให้เราทำการย่อไฟล์ภาพให้เล็กลง โดยใช้บริการผ่านเว็บไซต์ tinypng (ควรทำการย่อไฟล์ 2 รอบ) แล้วจึงอัพโหลดภาพขึ้นไปใหม่ ซึ่งถ้าเราแก้ไขได้อย่างถูกต้อง errors ตรงจุดนี้ใน GTmetrix ก็จะหายไป แต่อย่าลืมว่า GTMetrix นั้นแสดงภาพ unoptimized images เฉพาะหน้าเพจเดียวเท่านั้น เราจำเป็นต้องตรวจสอบในทุก ๆ หน้าว่าขนาดภาพนั้น ถูกต้อง และใช้งานได้เป็นปกติ
3. ระบุขนาดของภาพ (Specify Image Dimensions)
หมายความว่าให้เราทำการกำหนดขนาดความกว้าง ความยาวของรูปภาพลงไปใน HTML หรือ CSS ซึ่งโดยปกติแล้ว Visual Editor จะเป็นตัวกำหนดให้เราโดยอัตโนมัติ (แต่ widgets, page builders และ HTML แบบกำหนดเอง จะไม่ได้ระบุมาให้) เราอาจต้องทำการทดสอบใน GTmetrix ซึ่งจะบอกเราเกี่ยวกับ image’s dimensions ที่เราไม่ได้ระบุ
ให้เราทำการเพิ่มขนาด กว้าง/ยาว ให้กับ HTML ของภาพ
4. การบีบอัดไฟล์ภาพ โดยที่คุณภาพของภาพยังคงเดิม
โปรแกรมตกแต่งภาพส่วนใหญ่ (เช่น Photoshop และ Gimp) มีความสามารถในการบีบอัดภาพให้มีขนาดเล็ก ก่อนบันทึกภาพ ซึ่งเป็นจุดเริ่มต้นที่ดี แต่การใช้ปลั๊กอินต่าง ๆ ในการบีบอัดไฟล์ภาพนั้น ให้ผลลัพธ์ที่ ปลั๊กอินที่แนะนำให้ใช้คือ Imagify, Kraken, ShortPixel, หรือ Smush ปลั๊กอินตัวอื่น จะทำให้คุณภาพของภาพแย่ลง หรือทำให้เกิด errors ต่าง ๆ ได้
วิธีการบีบอัดไฟล์ภาพด้วย Imagify
- ลงทะเบียน Imagify
- ติดตั้ง Imagify Plugin
- คุณจะถูกนำมาสู่หน้าต่างด้านล่าง
- กรอก API key จาก Imagify account
- ตั้งค่าระดับการบีบอัดภาพ (normal, aggressive, ultra)
- คลิ๊ก Imagif’em all (ดูภาพด้านล่าง) จะเป็นการบีบอัดภาพทั้งหมดในครั้งเดียว
- หากคุณลดขนาดภาพเกินขีดจำกัดที่โปรแกรมกำหนด คุณจะต้องจ่ายเงินประมาณ $4.99 หรือรอเดือนถัดไป เพื่อรีเซ็ตขีดจำกัดใหม่อีกครั้ง
หลักจากนั้น เราสามารถบีบอัดไฟล์ภาพทั้งหมดบนเว็บได้ในเวลาไม่นาน
5. การรวมภาพ icon ต่าง ๆ เป็น CSS Sprites
เราสามารถลดจำนวนการเรียก images และ requests ได้ด้วยการรวมภาพเข้าด้วยกัน โดยการใช้ CSS sprite generator
สามารถใช้ได้กับภาพ icon ต่าง ๆ เท่านั้น เพราะเมื่อเรารวมภาพ เราจะเสีย image alt tags ไป ไม่ควรรวมภาพที่มีเนื้อหาสาระสำคัญต่าง ๆ การรวมภาพโดยใช้เทคนิค CSS Sprites นั้น ต้องใช้ความรู้ในการเขียนโปรแกรมเล็กน้อย จะไม่ลงรายละเอียดในหัวข้อนี้
6. หลีกเลี่ยงการเรียกไฟล์ภาพจากแหล่งอื่น หรือมี URL Redirects
หากคุณมีการเปลี่ยนไปใช้ HTTPS หรือ www หรือเริ่มมีการใช้ CDN คุณควรมีการ bulk update ไฟล์ภาพ รวมถึงลิงค์ทั้งหมดด้วยการใช้ปลั๊กอิน Better Search Replace จะช่วยให้สามารถเลือกใช้ไฟล์ภาพในตำแหน่งที่ถูกต้อง มิเช่นนั้นแล้ว เราก็จะพบ errors ในส่วนของ minimize redirects หรือ use cookie-free domains
7. เลือกส่งภาพจาก CDN
วิธีนี้เป็นการเปลี่ยน URLs ของภาพจากโดเมนของเรา ไปยัง CDN URL ยกตัวอย่างเช่น
- URL เก่า (ไม่ใช้ CDN): https://backup.courseblue.com/wp-content/uploads/2018/12/courseblue.png
- URL ใหม่ (ใช้ CDN): https://b6t6a4n8.stackpathcdn.com/wp-content/uploads/2018/12/courseblue.png
เปรียบเทียบ Cloudflare กับ StackPath – เราสามารถใช้ CDN 2 ค่ายนี้ร่วมกัน การที่เรามี data centers ที่มากกว่า แปลว่า เราสามารถลดเวลาในการส่งข้อมูลได้ Cloudflare มี data centers มากกว่า 150 แห่งทั่วโลก StackPath มี data centers กว่า 30 แห่งทั่วโลก Cloudflare จะไม่ให้ CDN URL กับเรา ดังนั้น เราจึงจำเป็นต้องใช้ StackPath URL ในการที่จะส่งข้อมูลรูปภาพ
Stackpath data center
ขั้นตอนที่ 1: เลือก CDN กรณีใช้ StackPath (สามารถทดลองใช้งานฟรีได้ 30 วัน)
ขั้นตอนที่ 2: ในหน้า dashboard คลิ๊กที่แถบ CDN จากนั้นทำการสร้าง StackPath CDN Site
ขั้นตอนที่ 3: Copy CDN URL ไปใส่ใน cache plugin (ภาพตัวอย่างจาก WP Rocket)
ขั้นตอนที่ 4: ให้เราทำการ clear cache ของระบบ ระบบจะทำการเปลี่ยน URL ของรูปภาพไปเป็น CDN URL โดยอัตโนมัติ
ขั้นตอนที่ 5: ตรวจสอบผลการทำงานจาก GTmetrix ในส่วนของ “content delivery network” ใน YSlow ควรจะได้เป็นสีเขียว ซึ่งไม่ควรจะมี errors ใด ๆ ในส่วนของ “minimize redirects” หรือ “use cookie-free domains” เช่นกัน
8. Cache Images
เปิดฟังก์ชั่นการทำงาน browser caching ในปลั๊กอิน cache ซึ่งเมื่อเปิดแล้วจะทำหน้าที่ในการ caches images ภาพด้านล่างเป็นภาพตัวอย่างจาก WP Fastest ซึ่งเป็นปลั๊กอิน cache ฟรี
9. ทำ Favicon ให้มีขนาดเล็ก และสามารถ cache ได้
favicon ควรมีขนาด 16x16px และอยู่ในรูปแบบของ favicon.ico format และสามารถ cache ได้โดยปลั๊กอิน cache
10. เอาข้อมูล EXIF data ออกจากรูปภาพ
EXIF data คือข้อมูลที่ประกอบไปด้วยค่ารูรับแสง ความเร็วชัตเตอร์ ISO ความยาวโฟกัส รุ่นของกล้อง วันที่ และอื่น ๆ ซึ่งเราไม่มีความจำเป็นต้องใช้ข้อมูลต่าง ๆ เหล่านี้บนเว็บไซต์ ปลั๊กอินเกี่ยวกับ image optimization ส่วนใหญ่นั้น จะทำการลบ EXIF data โดยอัตโนมัติ เมื่อเราทำการอัพโหลดภาพนั้น อย่างเราก็ตาม เราสามารถเลือกที่จะเก็บค่า EXIF data ได้ หากต้องการ ภาพด้านล่างเป็นตัวอย่างปลั๊กอิน Imagify ที่ทำการลบ EXIF data ออกโดยอัตโนมัติ
11. Lazy Load Images
คุณสมบัตินี้ มีไว้หน่วงเวลาที่จะแสดงภาพ โดยจะเริ่มทำการแสดงภาพ เมื่อผู้ใช้ scroll เม้าส์มายังตำแหน่งภาพนั้น ๆ ถึงแม้ว่าจะมีส่วนช่วยในเรื่องระยะเวลเริ่มโหลด initial load times แต่การทำเราต้องรอโหลดภาพในขณะ scroll เม้าส์นั้น บางครั้งก็เป็นเรื่องน่ารำคาญ เราอาจเลือกใช้คุณสมบัตินี้กับไฟล์วิดิโอ ซึ่งใช้เวลาในการโหลดนานกว่ารูปภาพมาก
คุณสามารถเลือกใช้ปลั๊กอิน Lazy Load, Lazy Load For Videos, หรือใช้ WP Rocket
12. การเลือกบันทึกภาพให้ถูกฟอร์ม
PNG กับ JPEG – PNG นั้นไม่สามารถบีบอัดได้ และควรใช้สำหรับภาพ ที่ไม่มีสีหลากหลายมากนัก ในขณะที่ JPEG สามารถบีบอัดให้เล็กลงได้ (ไฟล์เล็กลง) แต่แลกมากับคุณภาพที่ลดลง เหมาะกับรูปภาพ หรือภาพถ่ายที่มีสีสันมากมาย เราควรเลือกชนิดของการบันทึกภาพให้ถูกต้องเพื่อประสิทธิภาพสูงสุดในการแสดงผล
ที่มาของภาพโดย Labnol
13. ชื่อไฟล์ภาพ
Search engines ใช้ทั้ง alt text และชื่อไฟล์ภาพ ดังนั้น คุณควรจะตั้งชื่อไฟล์ภาพให้เหมาะสม ก่อนทำการอัพโหลดไปยัง WordPress อย่าพยายามอัด keywords ต่าง ๆ ลงไปในชื่อไฟล์ เพียงแค่เราตั้งชื่อไฟล์ภาพให้สื่อกับภาพก็เพียงพอแล้ว
14. Alt Text
ควรเหมือนกับชื่อไฟล์ภาพ คุณอาจเลือกใช้ปลั๊กอินเช่น Automatic Image Alt Attributes plugin เพื่อกำหนด Alt text ให้เหมือนกับชื่อไฟล์ภาพ ตราบใดก็ตามที่ชื่อไฟล์ภาพที่เราตั้ง มีความสัมพันธ์กับรูปภาพ ก็ถือว่าเหมาะสม ไม่ควรอัด keywords ต่าง ๆ ไปใน Alt Text มากจนเกินไป เพราะจะเสี่ยงต่อการถูกทำโทษ keyword stuffing penalty
ค้นหาภาพที่ไม่มี Alt Text – กรณีนี้เราสามารถใช้ Screaming Frog ซึ่งเป็นเครื่องมือฟรี ที่ช่วยให้เราหาภาพ ที่ยังไม่มี alt text โดยเราสามารถทำได้ดังนี้
- Download Screaming Frog SEO Spider
- ใส่ URL เว็บไซต์แล้วคลิ๊ก “Start” ทำการ crawl เว็บไซต์
- คลิ๊กที่แถบ images
- ไปที่ Overview → Missing Alt Text (ดังภาพด้านล่าง)
- หาตำแหน่งภาพเหล่านั้นบนเว็บไซต์ของคุณ แล้วทำการเพิ่ม alt text
15. ปรับแต่งภาพให้สวยงาม และมีรูปแบบ
อย่าลืมที่จะปรับแต่งรูปภาพให้สวยงาม อาจเลือกใช้กรอบรูปสวยงาม ใส่ Titles หรือแทรก Image links ต่าง ๆ
16. หลีกเลี่ยงการแทรกรูปภาพจากเว็บไซต์ภายนอก
ต้องทำการอัพโหลดรูปภาพลงเว็บไซต์ของคุณทุกครั้ง ห้ามใช้ copy/paste มิเช่นนั้นแล้ว คุณจะได้รับข้อความแจ้ง errors ใน GTMetrix ว่ามีส่วน extra requests จากรูปภาพที่ไม่ได้โฮสต์บนคอมพิวเตอร์เซิร์ฟเวอร์ของคุณ
17. เครื่องมือต่าง ๆ ในการปรับปรุงคุณภาพรูปภาพ
หลีกเลี่ยงการใช้งานปลั๊กอินที่มีคุณสมบัติซ้ำซ้อน – Imagify, ShortPixel, Kraken, EWWW, และ Smush มีคุณสมบัติเหมือนกันคือ ลดขนาดภาพ ปรับขนาดภาพ ลบข้อมูล EXIF data โดย WP Rocket มีตัวเลือกให้เราสามารถเลือกใช้ lazy load, caching, และ CDN (สามารถทำ database cleanup อีกทั้งยังสามารถทำการโฮสต์ Google Analytics ภายในเซิร์ฟเวอร์ได้อีกด้วย) ซึ่งปลั๊กอิน cache ตัวอื่น ๆ ไม่สามารถทำได้ เป็นการช่วยให้เราไม่จำเป็นต้องติดตั้งปลั๊กอินเพิ่มเติมอีกเป็นจำนวนมาก
- Awesome Screenshot – ส่วนเสริมของ Chrome สำหรับทำ screenshots
- Automatic Image Alt Attributes – เครื่องมือในการแทรก alt text ด้วยการใช้ชื่อไฟล์ภาพ
- Better Search Replace – ใช้สำหรับอัพเดทภาพทีละมาก ๆ
- CSS Sprite Generator – เครื่องมีฟรีในการรวมภาพต่าง ๆ เป็น 1 CSS sprite
- EWWW Image Optimizer – บีบอัดไฟล์ภาพ ลบ EXIF data แก้ไขขนาดภาพ
- GTmetrix – เครื่องมือแสดงให้คุณเห็นว่า ภาพใด ควรได้รับการปรับปรุง
- Imagify – บีบอัดไฟล์ภาพ ลบ EXIF data แก้ไขขนาดภาพ
- Kraken – บีบอัดไฟล์ภาพ ลบ EXIF data แก้ไขขนาดภาพ
- Lazy Load – ปลั๊กอินที่หน่วงเวลาในการโหลดภาพ หรือวิดีโอ จนกว่าจะ scroll เม้าส์ไปยังตำแหน่งนั้น
- Screaming Frog SEO Spider – เครื่องมือสำหรับค้นหาภาพที่ไม่มี alt text, meta descriptions, และอื่น ๆ
- ShortPixel – บีบอัดไฟล์ภาพ ลบ EXIF data แก้ไขขนาดภาพ
- Smush – บีบอัดไฟล์ภาพ ลบ EXIF data แก้ไขขนาดภาพ
- StackPath – CDN ที่มีฐานข้อมูลมากกว่า 31 แห่ง ทั่วโลก ให้บริการในราคาเพียง $10/เดือน
- Swift Performance Lite – อันดับ 1 ปลั๊กอิน cache แบบฟรี ที่ได้รับความนิยมสูงสุด
- WP Review – ปลั๊กอินสำหรับแต่ง rich snippets plugin (ช่วยทำให้ภาพของเราสามารถแสดงผลได้ดีในหน้า search results)
- WP Rocket –ปลั๊กอิน cache อันดับหนึ่ง ที่ได้รับความนิยมสูงสุด
เป็นอย่างไรกันบ้าง สำหรับเทคนิคต่าง ๆ ที่ช่วยในการปรับปรุงรูปภาพ WordPress ในบทความนี้?
คะแนน GTmetrix ดูดีขึ้นมาบ้างหรือยังครับ? หากมีคำถามสงสัยเพิ่มเติม หรือต้องการเรียนรู้เรื่องการทำความเร็วเว็บไซต์ เรามีคอร์สเพิ่มความเร็ว WordPress สามารถเข้าไปหาข้อมูลเพิ่มเติมได้ครับ
