วิธีการให้บริการรูปภาพที่ปรับขนาดใน WordPress อย่างง่าย (ขั้นตอนต่อขั้นตอน)

คุณเคยเข้าเยี่ยมชมเว็บไซต์แล้วออกไปภายในไม่กี่วินาทีเพราะภาพไม่โหลดเร็วพอหรือไม่? นั่นแหละคือสิ่งที่ผู้เข้าชมของคุณอาจกำลังประสบอยู่ หากคุณไม่ได้ให้บริการภาพที่ปรับขนาดบนเว็บไซต์ WordPress ของคุณ. 

ปัญหานี้เกิดขึ้นเมื่อรูปภาพของคุณใหญ่เกินกว่าขนาดการแสดงผล ซึ่งทำให้เว็บไซต์ของคุณโหลดช้าและส่งผลเสียต่อประสบการณ์ผู้ใช้.

แต่ไม่ต้องกังวล เราพร้อมช่วยคุณ! ทำตามบทเรียนสั้นด้านล่างเพื่อเรียนรู้วิธีให้บริการภาพที่ปรับขนาดได้อย่างง่ายดาย!

ทำไมคุณต้องให้บริการภาพที่ปรับขนาด?

ภาพที่ปรับขนาดแล้วคือภาพที่ถูกปรับขนาดเพื่อให้ตรงกับมิติที่แน่นอนซึ่งจะแสดงบนหน้าเว็บ ซึ่งแตกต่างจากการอัปโหลดต้นฉบับที่มักมีขนาดและความละเอียดใหญ่กว่ามาก.

ตัวอย่างเช่น ภาพเด่นต้นฉบับของคุณอาจมีขนาด 4000 x 3000 พิกเซล แต่เว็บไซต์ของคุณจะแสดงเพียง 800 x 600 พิกเซล หากใช้ภาพต้นฉบับแทนเวอร์ชันที่ปรับขนาดลง เว็บไซต์ของคุณจะโหลดช้าลง.

เมื่อภาพไม่ได้รับการปรับขนาดอย่างเหมาะสม เบราว์เซอร์ต้องปรับขนาดภาพเหล่านั้นด้วยตนเองแบบเรียลไทม์ ซึ่งจะทำให้การโหลดหน้าเว็บช้าลง ทำให้ผู้ใช้ต้องรอและอาจเพิ่มอัตราการออกจากหน้าได้.

สำคัญที่ต้องใช้ภาพที่ปรับขนาดแล้ว เพราะหากไม่ทำเช่นนั้นอาจทำให้เกิดปัญหาหลายอย่าง:

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

คู่มือแบบขั้นตอนต่อขั้นตอน

1. ใช้เครื่องมือแก้ไขภาพ

วิธีนี้เสนอการปรับขนาดภาพที่เร็วขึ้นโดยใช้เครื่องมือแก้ไข คุณสามารถใช้เครื่องมือเช่น Adobe Photoshop เพื่อสร้างภาพที่มีสเกลที่เหมาะสม Photoshop อนุญาตให้ปรับแต่งได้อย่างกว้างขวางเพื่อให้คุณสามารถกำหนดขนาดพิกเซลตามความต้องการของขนาดได้.

หากคุณกำลังมองหาทางเลือกฟรี เครื่องมือออนไลน์เช่น PhotoPea เป็นตัวเลือกที่ดี แต่สำหรับบทเรียนนี้ เราจะเน้นที่ Photoshop เนื่องจากมีคุณสมบัติครบถ้วน.

เพื่อปรับขนาดภาพก่อนอัปโหลด ให้ทำตามบทเรียนด้านล่าง:

• เปิดภาพของคุณใน Photoshop
• คลิกที่ ภาพ แท็บและเลือก ขนาดภาพ

• ในกล่องโต้ตอบที่ปรากฏ ให้เปลี่ยนขนาดภาพตามข้อกำหนดการแสดงผลของหน้าเว็บ. 

ตัวอย่างเช่น หากภาพต้นฉบับของคุณมีขนาด 1281 x 493 พิกเซลและคุณต้องการปรับขนาดเป็น 3600 x 2400 พิกเซล ให้ป้อนขนาดใหม่. 

• เปลี่ยน ความละเอียดเป็น 72 PPI สำหรับการใช้งานเว็บ หรือ 300 PPI หากคุณต้องการคุณภาพการพิมพ์สูง
• จากนั้นเลือกวิธีการรีแซมพลิง ตัวเลือกที่เหมาะสมที่สุดสองอย่างสำหรับการเพิ่มประสิทธิภาพเว็บคือ:

• คลิก OK เพื่อใช้การเปลี่ยนแปลง. ภาพของคุณได้ถูกปรับขนาดแล้ว.
• เพื่อบันทึกภาพ, เปิด File แท็บและเลือก Export.

• คลิก Export As และเลือกฟอร์แมตไฟล์ใดก็ได้และปรับการตั้งค่าเพื่อให้ได้ขนาดไฟล์ที่เล็กที่สุดโดยไม่สูญเสียคุณภาพของภาพมากเกินไป.

2. ใช้ขนาดภาพในตัวของ WordPress

หากคุณต้องการไม่ติดตั้งซอฟต์แวร์ของบุคคลที่สาม คุณสามารถใช้เครื่องมือแก้ไขรูปภาพในตัวของ WordPress ได้ ด้วยเครื่องมือนี้คุณสามารถทำงานแก้ไขรูปภาพพื้นฐาน เช่น การครอบภาพ การพลิกภาพ และการปรับขนาด.

คุณสามารถเข้าถึงฟีเจอร์นี้ได้โดยคลิกที่รูปภาพใดก็ได้ในโพสต์หรือไลบรารีสื่อของคุณ นอกจากนี้คุณยังสามารถกำหนดขนาดรูปภาพแบบกำหนดเองโดยแก้ไขไฟล์ functions.php ในธีมของคุณ.

เพื่อให้เรื่องง่ายขึ้น, let's เริ่มด้วยคู่มือพื้นฐานด้านล่าง:

• อัปโหลดรูปภาพของคุณไปยังโพสต์ WordPress ของคุณ. 

• เลือกภาพแล้วคลิก แทนที่ และเลือก เปิดไลบรารีสื่อ จากเมนู.

• ในแถบด้านข้าง คลิก แก้ไขภาพ.

• คุณจะถูกนำไปยังตัวแก้ไขภาพ คลิกที่ ปรับสเกล เพื่อปรับขนาดภาพ

• ใส่ มิติใหม่ สำหรับรูปของคุณ ตัวอย่างเช่น เปลี่ยนจาก 1198 × 744 px เป็น 805 x 500 px. อัตราส่วนภาพถูกจำกัด ดังนั้นค่าที่เหลือจะปรับอัตโนมัติตามความกว้างหรือความสูงที่คุณใส่

• คลิก ปรับขนาด ปุ่มเพื่อใช้การเปลี่ยนแปลง.
• รูปของคุณตอนนี้ถูกปรับขนาดและพร้อมใช้งานในโพสต์ของคุณ.

3. ใช้ปลั๊กอิน

• ติดตั้งและเปิดใช้งาน WP Meta SEO บนเว็บไซต์ WordPress ของคุณ.

• จากแดชบอร์ด WordPress ของคุณ ไปที่ WP Meta SEO > ตัวแก้ไขรูปภาพ.

• เปิดการตั้งค่า Image SEO & HTML Resize.

• เปิดใช้งานตัวเลือกการปรับขนาดรูปภาพแบบไดนามิกเพื่อให้ WP Meta SEO ปรับขนาดรูปภาพโดยอัตโนมัติตามขนาดการแสดงผลของมัน.

• กำหนดค่าความกว้างและความสูงสูงสุดเพื่อควบคุมการปรับขนาดรูปภาพบนส่วนหน้า.

เมื่อเปิดใช้งานแล้ว WP Meta SEO จะปรับขนาดภาพโดยอัตโนมัติเมื่อแสดงบนเว็บไซต์ของคุณ เพื่อให้ได้ขนาดภาพที่เหมาะสมโดยไม่ต้องทำด้วยตนเอง วิธีนี้ช่วยเพิ่มความเร็วของหน้าเว็บ ปรับปรุงประสิทธิภาพ SEO และมอบประสบการณ์ผู้ใช้ที่ดียิ่งขึ้น—โดยเฉพาะสำหรับเว็บไซต์ที่มีภาพจำนวนมาก. 

สำหรับรายละเอียดเพิ่มเติม คุณสามารถสำรวจเอกสารอย่างเป็นทางการและภาพรวมของฟีเจอร์ได้:

• WP Meta SEO ฟีเจอร์ Image SEO & HTML Resize
• ไดนามิก เอกสารการปรับขนาดภาพ

4. ใช้ภาพตอบสนองโดยใช้แอตทริบิวต์ srcset

คำว่า คุณลักษณะ srcset ใช้ในแท็ก ของ HTML เพื่อให้แหล่งภาพที่แตกต่างสำหรับความละเอียดหน้าจอที่หลากหลาย โดยการเพิ่มคุณลักษณะนี้ เบราว์เซอร์สามารถเลือกภาพที่เหมาะสมที่สุดตามอุปกรณ์ของผู้ใช้

ตัวอย่างเช่น หากผู้ใช้เข้าถึงเว็บไซต์ของคุณบนอุปกรณ์มือถือที่มีหน้าจอความละเอียดต่ำ เบราว์เซอร์จะโหลดภาพความละเอียดต่ำกว่าเพื่อให้ประสบการณ์ที่ราบรื่นขึ้น.

หากคุณต้องการทราบวิธีการให้บริการภาพที่ปรับขนาดด้วยตนเอง โปรดทำตามคำแนะนำด้านล่าง:

• เปิดไฟล์ HTML ของเว็บไซต์' ผ่านโปรแกรมแก้ไขโค้ดของคุณ.
• ค้นหา แท็กสำหรับรูปภาพที่คุณต้องการปรับให้เหมาะสม

• แก้ไขแท็กและเพิ่มแอตทริบิวต์ srcset ตามที่แสดงในรูปภาพ. 

ในตัวอย่างนี้ 100w และ 400w แสดงความกว้างจริงของแต่ละภาพ เบราว์เซอร์จะใช้ข้อมูลนี้เพื่อกำหนดว่าภาพใดจะโหลดสำหรับอุปกรณ์ของผู้ใช้'.

• บันทึกการเปลี่ยนแปลงและรีโหลดเว็บไซต์ของคุณเพื่อดูผลลัพธ์.

วิธีระบุภาพที่ไม่ได้ปรับขนาด

หลังจากเรียนรู้วิธีการเพิ่มประสิทธิภาพรูปภาพ, it's ยังสำคัญที่จะระบุว่ารูปภาพใดยังต้องการการปรับขนาดและรูปภาพใดได้รับการเพิ่มประสิทธิภาพแล้ว.

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

1. ใช้ Google PageSpeed Insights

นี่คือเครื่องมือสำคัญที่ให้คำแนะนำเพื่อช่วยทำให้เว็บไซต์ของคุณเร็วขึ้น คำแนะนำเหล่านี้ถูกสร้างขึ้นจากการวิเคราะห์เชิงลึกโดยใช้ Google Lighthouse คำแนะนำทั่วไปหนึ่งคือการปรับขนาดภาพที่ถูกระบุว่าไม่ได้ปรับขนาดอย่างเหมาะสม.

เพื่อทำการตรวจสอบอย่างรวดเร็ว คุณสามารถทำตามคำแนะนำด้านล่างนี้:

• เปิด Google PageSpeed Insight ที่ https://pagespeed.web.dev.

• วางเต็ม URL ของหน้าเว็บของคุณ ลงในช่องป้อนข้อมูล.
• คลิก วิเคราะห์ เพื่อเริ่มกระบวนการ.
• รอให้เสร็จสิ้น จากนั้น PSI จะให้รายงานประสิทธิภาพแก่คุณ.
• เลื่อนลงเพื่อค้นหารายการที่มีป้ายกำกับ ขนาดภาพอย่างเหมาะสม.
• หากมีอยู่ คุณจะเห็นรายการของภาพที่ไม่ได้ปรับขนาดที่พบในเว็บไซต์ของคุณ.

หากภาพหนึ่งของคุณถูกทำเครื่องหมายว่าไม่ได้ปรับขนาด Google PageSpeed Insights อาจเสนอคำแนะนำหลายอย่าง รวมถึง:

• ให้บริการภาพในรูปแบบรุ่นต่อไป, เช่น WebP, AVIF, JPEG XR, หรือ JPEG2000.
• ปรับขนาดรูปภาพอย่างเหมาะสมเพื่อให้ตรงตามข้อกำหนดขนาดต่าง ๆ เช่นการปรับขนาดเป็น 1000 x 1000 พิกเซลสำหรับหน้ารายละเอียดสินค้า หรือ 400 x 400 พิกเซลสำหรับหน้ารายการสินค้า.
• ใช้ lazy loadingเพื่อให้เฉพาะรูปภาพที่มองเห็นบนหน้าจอของผู้ใช้' โหลดทันที.

2. ทำการตรวจสอบเว็บไซต์เป็นประจำ

การทำการตรวจสอบเว็บไซต์เป็นประจำให้ข้อมูลเชิงลึกลึกซึ้งเกี่ยวกับสุขภาพและประสิทธิภาพของเว็บไซต์ของคุณ'.

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

กระบวนการนี้ยังสามารถเปิดเผยโอกาสในการปรับแต่งรูปภาพได้ อย่าลืมทดสอบเว็บไซต์ของคุณบนอุปกรณ์ต่าง ๆ เช่น มือถือ, แท็บเล็ต, และเดสก์ท็อป เพื่อให้ประสบการณ์สม่ำเสมอ.

นอกจากนี้ ให้ใส่ใจว่ารูปภาพถูกปรับขนาดอย่างเหมาะสมหรือไม่ หากไม่ได้ โปรดอย่าลืมทำตามบทแนะนำข้างต้น.

สรุป

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

อย่างไรก็ตาม การปรับขนาดจำนวนภาพจำนวนมากอาจใช้เวลามาก พิจารณาใช้ปลั๊กอินเช่น WP Media Folder ซึ่งช่วยให้คุณปรับขนาด จัดระเบียบ และแทนที่ภาพโดยอัตโนมัติ พร้อมรับประกันว่าภาพยังคงได้รับการปรับให้เหมาะสมสำหรับประสิทธิภาพ