คู่มือสำหรับผู้เริ่มต้นเกี่ยวกับขนาดรูปภาพ WordPress (+ แนวทางปฏิบัติที่ดีที่สุด)

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

 คู่มือนี้จะอธิบายขนาดรูปภาพเริ่มต้นของ WordPress (ภาพขนาดย่อ, กลาง, ใหญ่) เหตุผลที่ต้องมี และวิธีปรับแต่งให้เข้ากับธีมของคุณ นอกจากนี้ เราจะได้เห็นว่าปลั๊กอิน WP Media Folder จะช่วยจัดการรูปภาพของคุณได้อย่างไร หากคุณไม่เชี่ยวชาญด้านเทคนิค บทความนี้ก็เข้าใจได้ง่าย แต่คุณจะได้เรียนรู้ว่า WordPress จัดการกับขนาดรูปภาพอย่างไรและจะปรับขนาดอย่างไร

ภาพรวมของขนาดรูปภาพเริ่มต้นของ WordPress

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

• รูปย่อ : เวอร์ชันสี่เหลี่ยมจัตุรัสขนาด 150 × 150 พิกเซล มักใช้ในรายการตัวอย่างบล็อก วิดเจ็ต และแกลเลอรี
• ขนาดกลาง : เวอร์ชันที่ปรับขนาดให้ด้านที่ยาวที่สุดมีขนาด 300 พิกเซล หากรูปภาพของคุณสูงกว่าความกว้าง รูปภาพอาจมีความสูง 300 พิกเซลและมีความกว้างน้อยกว่า หรือในทางกลับกัน
• ใหญ่ : เวอร์ชันที่ด้านยาวที่สุดมีขนาด 1,024 พิกเซล เหมาะสำหรับรูปภาพเด่นแบบเต็มความกว้างหรือส่วนหัวของโพสต์บล็อก
• เต็ม : ไฟล์ที่คุณอัพโหลดโดยไม่แก้ไขใดๆ

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

เหตุใด WordPress จึงสร้างขนาดเหล่านี้โดยอัตโนมัติ

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

หากรูปภาพที่คุณอัปโหลดมีขนาดเล็กกว่าขนาดที่ WordPress สร้างขึ้น (เช่น รูปภาพกว้าง 800 พิกเซล) WordPress จะสร้างขนาดได้เท่ากับขนาดที่รูปภาพรองรับเท่านั้น ดังนั้น ขนาดใหญ่จะไม่เกินขนาดเดิม

แนวทางปฏิบัติที่ดีที่สุดในการใช้ขนาดรูปภาพเริ่มต้น

ต่อไปนี้เป็นกรณีการใช้งานทั่วไปสำหรับขนาดเริ่มต้นแต่ละขนาด:

รูปขนาดย่อ

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

สำหรับตัวอย่างนี้ เราใช้แกลเลอรีที่สร้างด้วย WP Media folder

ปานกลาง

เหมาะสำหรับภาพอินไลน์ในโพสต์บล็อกหรือแบนเนอร์ขนาดเล็ก สิ่งเหล่านี้ให้ความสมดุลระหว่างความคมชัดและขนาดไฟล์ได้ดี

ขนาดใหญ่

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

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

วิธีปรับขนาดภาพให้เหมาะกับธีมของคุณ

โดยค่าเริ่มต้น WordPress จะใช้ขนาดใน การตั้งค่า > สื่อ แต่คุณอาจต้องการปรับขนาดเหล่านั้นหรือเพิ่มขนาดใหม่ตามความต้องการของธีมของคุณ

การเปลี่ยนแปลงขนาดเริ่มต้นผ่านหน้าจอผู้ดูแลระบบ

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

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

การเพิ่มขนาดรูปภาพที่กำหนดเองในโค้ดธีมของคุณ

หมายเหตุสำคัญ: คุณไม่ควรใช้โค้ดที่กำหนดเองโดยไม่สร้างการสำรองข้อมูลก่อน

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

add_image_size('ฟีเจอร์ที่กำหนดเอง', 800, 600, true); 

การดำเนินการนี้จะลงทะเบียนขนาดใหม่ที่ชื่อว่า 'custom-feature' โดยมีความกว้าง 800 พิกเซล ความสูง 600 พิกเซล และเปิดใช้งานการครอบตัด

จากนั้นคุณสามารถเรียกมันในไฟล์ธีมของคุณได้:

the_post_thumbnail( 'ฟีเจอร์ที่กำหนดเอง' ); 

หรือใน Gutenberg คุณอาจเห็นขนาดใหม่ในเมนูแบบดรอปดาวน์ของบล็อกรูปภาพ หากธีมของคุณรองรับ

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

แนวทางปฏิบัติที่ดีที่สุดเมื่อเลือกขนาดที่กำหนดเองของคุณ

• จับคู่ขนาดให้ตรงกับเค้าโครงของธีมของคุณ เช่น ขนาดแบนเนอร์ส่วนหัว ขนาดโพสต์บล็อกเด่น หรือความกว้างของรูปภาพในบทความ
• หลีกเลี่ยงการปรับขนาดรูปภาพให้มีขนาดใหญ่กว่าคอนเทนเนอร์มากเกินไป เพราะจะทำให้เปลืองพื้นที่ดิสก์และโหลดช้า
• ใช้การครอบตัดเมื่อคุณต้องการภาพที่มีอัตราส่วนภาพคงที่ เช่น 16:9 หรือ 4:3 ตั้งค่าการครอบตัดเป็น true หรือ false ขึ้นอยู่กับว่าต้องการใช้การครอบตัดหรือการปรับขนาดตามสัดส่วน
• ทดสอบรูปภาพที่แทรกหลังจากเพิ่มขนาดที่กำหนดเองเพื่อให้แน่ใจว่าจะแสดงอย่างถูกต้องบนเดสก์ท็อปและอุปกรณ์พกพา

การสร้างภาพขนาดย่อใหม่

หากคุณเปลี่ยนขนาดเริ่มต้นหรือเพิ่มขนาดใหม่ รูปภาพเก่าจะไม่ถูกสร้างขนาดใหม่โดยอัตโนมัติ ให้ใช้ปลั๊กอินเช่น "Regenerate Thumbnails" หรือปลั๊กอินที่คล้ายกันเพื่อสร้างขนาดรูปภาพทั้งหมดใหม่สำหรับการอัปโหลดครั้งก่อนๆ วิธีนี้จะช่วยให้ไลบรารีสื่อของคุณมีขนาดที่เหมาะสมที่ WordPress สามารถใช้งานได้ในบริบทต่างๆ

สรุปแนวทางปฏิบัติที่ดีที่สุด

• อัปโหลดรูปภาพที่มีขนาดใกล้เคียงกับความกว้างการแสดงผลสูงสุดของธีมของคุณ (เช่น กว้าง 1,200 พิกเซล) ให้ WordPress สร้างขนาดที่เล็กลง
• คงขนาดเริ่มต้นไว้ที่ 150 พิกเซล (ภาพขนาดย่อ), 300 พิกเซล (ขนาดกลาง) และ 1024 พิกเซล (ขนาดใหญ่) เว้นแต่ธีมของคุณต้องการค่าอื่น เปลี่ยนได้ที่ การตั้งค่า > สื่อ
• เพิ่มขนาดที่กำหนดเองผ่าน add_image_size() ในธีมของคุณหรือโค้ดปลั๊กอินสำหรับพื้นที่แสดงผลที่ไม่ซ้ำกัน (เช่น แบนเนอร์ฮีโร่ บล็อกเด่น)
• หลังจากปรับขนาดหรือเพิ่มขนาดใหม่แล้ว ให้สร้างภาพขนาดย่อใหม่เพื่อให้ WordPress สร้างขนาดเหล่านี้สำหรับการอัปโหลดเก่า
• ใช้การครอบตัดเมื่อจำเป็นต้องมีอัตราส่วนภาพสม่ำเสมอ หรือการปรับขนาดตามสัดส่วนเมื่อคุณต้องการรักษาสัดส่วนดั้งเดิมไว้

คำแนะนำเพิ่มเติม: โปรดจำไว้ว่า WP Media Folder หากคุณต้องการการจัดระเบียบแบบโฟลเดอร์ การค้นหา/กรองสื่อที่ดีขึ้น การสร้างแกลเลอรีที่ง่ายขึ้น การแทนที่สื่อ และการปรับปรุงเวิร์กโฟลว์อื่นๆ ทั้งหมดนี้ทำงานร่วมกับการตั้งค่าขนาดรูปภาพของคุณได้อย่างราบรื่น

สรุป: เชี่ยวชาญขนาดรูปภาพ WordPress สำหรับเว็บไซต์ที่รวดเร็วและสวยงาม

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

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