รูปภาพขนาดใดที่จะใช้บน WordPress (ปัจจัยสำคัญและเคล็ดลับ)

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

ทำความเข้าใจกับขนาดภาพใน WordPress

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

ฟังก์ชั่น SRCSet

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

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

นี่คือขนาดเริ่มต้นที่คุณจะได้รับสำหรับทุกภาพที่คุณอัปโหลดใน WordPress:

• ภาพขนาดย่อ: 150 x 150 พิกเซล
• ปานกลาง: 300 x 300 พิกเซล (อาจแตกต่างกันไปตามการตั้งค่าของคุณ)
• ใหญ่: 1024 x 1024 พิกเซล (อาจแตกต่างกันไปตามการตั้งค่าของคุณ)
• ขนาดเต็ม: ขนาดดั้งเดิม

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

รูปภาพขนาดใดที่จะใช้บน WordPress

ในกรณีส่วนใหญ่ ขนาดไฟล์รูปภาพของคุณไม่ควรเกิน 200kb รูปภาพส่วนใหญ่ควรมีขนาดใกล้เคียง 50kb-100kb หรือน้อยกว่า เพื่อให้ไฟล์ภาพของคุณอยู่ในช่วงดังกล่าว คุณจะต้องพิจารณาปัจจัยอื่นๆ เช่น ขนาด

ต่อไปนี้คือขนาดรูปภาพที่แนะนำโดยทั่วไปสำหรับ WordPress:

• รูปภาพโพสต์ในบล็อก: 1200 x 630 พิกเซล
• รูปภาพเด่น (ภาพขนาดย่อของโพสต์): 1200 x 800 พิกเซล
• รูปภาพส่วนหัว / รูปภาพฮีโร่: 1600 x 900 พิกเซล หรือ 1920 x 1080 พิกเซล
• ภาพพื้นหลัง: 1920 x 1080 พิกเซล
• แถบเลื่อนและแบนเนอร์: 1200 x 600 พิกเซล หรือ 1920 x 800 พิกเซล
• รูปภาพผลิตภัณฑ์ (WooCommerce): 800 x 800 พิกเซล หรือ 1000 x 1000 พิกเซล
• รูปภาพโลโก้: 200 x 100 พิกเซล หรือ 250 x 100 พิกเซล

เว้นแต่คุณจะมีเหตุผลเฉพาะเจาะจงในการดำเนินการดังกล่าว คุณไม่ควรอัปโหลดภาพขนาด 5mb ที่มีความกว้าง 5,000 พิกเซล WordPress จะช่วยโดยการสร้างเวอร์ชันที่เป็นมิตรต่อเว็บไซต์มากขึ้นที่คุณสามารถใช้ได้ แต่ถ้าคุณแสดงขนาดดั้งเดิมนั้น ความเร็วในการโหลดเพจของคุณจะลดลง

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

ปัจจัยสำคัญที่ต้องพิจารณาสำหรับรูปภาพขนาด WordPress

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

ขนาดภาพ

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

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

ขนาดไฟล์

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

ตามหลักการแล้ว ควรรักษาขนาดไฟล์รูปภาพให้ต่ำกว่า 500KB อย่างไรก็ตาม หากรูปภาพแสดงอย่างเด่นชัด คุณอาจเผื่อไว้ 1MB เพื่อคุณภาพที่ดีขึ้น ใช้เครื่องมือบีบอัดรูปภาพเพื่อลดขนาดไฟล์ในขณะที่ยังคงคุณภาพของภาพไว้ สำหรับการบีบอัดแบบแมนนวล เครื่องมืออย่าง TinyPNG หรือ JPEG-Optimizer ก็ทำงานได้ดี หลังจากบีบอัดแล้ว ให้ทดสอบเวลาในการโหลดหน้าเว็บของคุณโดยใช้เครื่องมือเช่น Google PageSpeed ​​Insights หรือ GTmetrix หากเวลาในการโหลดช้า ให้ลดขนาดรูปภาพลงอีก

รูปแบบไฟล์

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

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

อัตราส่วนภาพ

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

สำหรับรูปภาพในรูปแบบคงที่ (เช่น แถบเลื่อนหรือแบนเนอร์) ให้ปฏิบัติตามอัตราส่วนที่แนะนำจากธีมหรือเอกสารปลั๊กอินของคุณเสมอ (เช่น อัตราส่วน 16:9 สำหรับแบนเนอร์) สำหรับแกลเลอรีหรือตาราง ให้เลือกอัตราส่วนภาพเดียว (เช่น 4:3 หรือ 1:1 สำหรับภาพขนาดย่อสี่เหลี่ยมจัตุรัส) และครอบตัดรูปภาพทั้งหมดตามอัตราส่วนดังกล่าวเพื่อความสม่ำเสมอ หากคุณใช้การตั้งค่าภาพที่ตอบสนอง ให้ทดสอบไซต์ของคุณบนอุปกรณ์และขนาดหน้าจอต่างๆ เพื่อให้แน่ใจว่าอัตราส่วนภาพทำงานได้ดีในวิวพอร์ตต่างๆ

แนวทางปฏิบัติที่ดีที่สุดสำหรับขนาดรูปภาพ WordPress

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

ปรับขนาดรูปภาพให้มีขนาดที่เหมาะสม

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

ปรับขนาดรูปภาพบน WordPress

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

คลิกที่ภาพที่มีอยู่หรืออัปโหลดไฟล์ภาพใหม่ ในกรณีของเรา เราได้เลือกที่จะอัปโหลดไฟล์รูปภาพใหม่

หลังจากคลิกที่ภาพที่เพิ่มเข้าไป คุณจะเห็นรายละเอียดทั้งหมด คลิก 'แก้ไขรายละเอียดเพิ่มเติม' ที่มุมขวาล่างเพื่อเข้าถึงการตั้งค่าที่เพิ่มเข้ามา

ในรายละเอียดรูปภาพ ให้คลิกปุ่มแก้ไขรูปภาพ

ใต้ Scale Image ให้ป้อนขนาดใหม่ (ความกว้างหรือความสูง) จากนั้น WordPress จะปรับขนาดภาพตามสัดส่วน คลิกมาตราส่วนเพื่อใช้การเปลี่ยนแปลง

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

ใช้เครื่องมือบีบอัดรูปภาพ

ตามที่กล่าวไว้ก่อนหน้านี้ การบีบอัดรูปภาพของคุณจะช่วยลดขนาดไฟล์ได้ มีเครื่องมือบีบอัดรูปภาพมากมาย รวมถึงซอฟต์แวร์แก้ไข เช่น Adobe Photoshop หรือ Microsoft Photos

หรือคุณสามารถใช้เครื่องมือออนไลน์เช่น TinyPNG เพื่อบรรลุเป้าหมายนี้ได้

เครื่องมือนี้ชอบการบีบอัดแบบสูญเสียข้อมูลเพื่อลดขนาดไฟล์ WEBP, JPEG และ PNG ของคุณ เพียงอัปโหลดภาพของคุณ แล้ว TinyPNG จะจัดการการบีบอัดให้กับคุณ

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

หลังจากติดตั้งและเปิดใช้งาน Imagify บนไซต์ WordPress ของคุณ ให้ไปที่ การตั้งค่า > Imagify เพื่อกำหนดการตั้งค่าการบีบอัดของคุณ:

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

เปลี่ยนขีดจำกัดการอัปโหลดสูงสุด

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

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

ใช้การโหลดแบบ Lazy

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

ธีมและปลั๊กอิน WordPress ส่วนใหญ่ในปัจจุบันมีการสนับสนุนในตัวสำหรับการโหลดแบบ Lazy Loading WordPress เองยังรวมการโหลดแบบขี้เกียจดั้งเดิมในเวอร์ชัน 5.5 นอกจากนี้ ปลั๊กอินต่างๆ เช่น WP Rocket, Lazy Load โดย WP Rocket และ a3 Lazy Load ให้การควบคุมและการปรับแต่งขั้นสูงที่มากกว่ากระบวนการโหลดแบบ Lazy ทำให้ง่ายต่อการนำไปใช้บนเว็บไซต์ WordPress โดยไม่ต้องมีความเชี่ยวชาญทางเทคนิคมากนัก

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

วิธีสร้างขนาดภาพที่สมบูรณ์แบบด้วย Divi

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

1. ดาวน์โหลดและติดตั้ง Divi

สามารถซื้อ Divi ผ่าน Elegant Themes โดยเสนอตัวเลือกราคา 2 แบบ: ใบอนุญาตรายปีใน ราคา 89 ดอลลาร์ หรือใบอนุญาตตลอดชีพในราคา 249 ดอลลาร์ หลังจากซื้อแล้ว คุณสามารถดาวน์โหลดและติดตั้งธีมบนเว็บไซต์ WordPress ของคุณได้อย่างง่ายดายโดยทำตามขั้นตอนเหล่านี้:

1. ในแดชบอร์ด WordPress ของคุณ ไปที่ ลักษณะที่ปรากฏ > ธีม
2. คลิกเพิ่มใหม่ จากนั้นเลือกอัปโหลดธีม
3. เลือกไฟล์ Divi .zip ที่ดาวน์โหลดมา แล้วคลิกติดตั้งทันที
4. เมื่อการติดตั้งเสร็จสมบูรณ์ คลิก 'เปิดใช้งาน' เพื่อให้ Divi เป็นธีมที่ใช้งานอยู่

หากต้องการคำแนะนำโดยละเอียด โปรดดูวิดีโอด้านล่าง

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

เริ่มต้นกับ Divi

2. สร้างเว็บไซต์ของคุณ เปิด Divi Builder และเลือกรูปภาพของคุณ

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

นอกจากนี้ คุณสามารถใช้ Divi Quick Sites เพื่อสร้างเว็บไซต์ระดับมืออาชีพได้ภายในหนึ่งหรือสองนาที

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

คลิกที่ภาพที่เพิ่มเพื่อวัตถุประสงค์ในการปรับขนาด เปิดโมดูลรูปภาพ Divi โดยคลิกที่ไอคอนวงล้อ

3. ปรับขนาดรูปภาพที่คุณเพิ่มบน WordPress ด้วยการตั้งค่าตอบสนอง Divi

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

ที่นี่ คุณสามารถปรับขนาดต่างๆ ของรูปภาพที่คุณเลือกได้ เช่น:

1. ความกว้าง
2. ความกว้างสูงสุด
3. การจัดตำแหน่งโมดูล
4. ความสูงขั้นต่ำ
5. ความสูง
6. ความสูงสูงสุด

หมายเหตุ: คุณยังสามารถบังคับความกว้างเต็มได้โดยเปิดใช้งานตัวเลือกที่ให้มา อย่างไรก็ตาม นั่นจะทำให้ความกว้างและความกว้างสูงสุดไม่เปลี่ยนแปลง

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

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

ฟังก์ชั่น SRCSet

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

รับดิวิ

เครื่องมืออื่นๆ สำหรับการเพิ่มประสิทธิภาพภาพ

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

1. เครื่องมือเพิ่มประสิทธิภาพรูปภาพ EWWW: ปลั๊กอิน WordPress ที่ทรงพลังซึ่งจะบีบอัดรูปภาพใหม่โดยอัตโนมัติเมื่ออัปโหลด และนำเสนอเครื่องมือเพิ่มประสิทธิภาพจำนวนมากสำหรับสื่อที่มีอยู่ ช่วยให้สามารถปรับขนาดรูปภาพและลบข้อมูลเมตาได้ และรองรับการโหลดแบบ Lazy Loading และการแปลงเป็นรูปแบบ WebP เพื่อการบีบอัดที่ดีขึ้น เวอร์ชันฟรีทำงานบนเซิร์ฟเวอร์ของคุณโดยตรงโดยไม่มีการจำกัดขนาดไฟล์ ในขณะที่เวอร์ชันพรีเมียมใช้ประโยชน์จากบริการคลาวด์เพื่อการเพิ่มประสิทธิภาพที่ได้รับการปรับปรุงและอัตราส่วนการบีบอัดที่สูงขึ้น
2. ShortPixel Image Optimizer: ปลั๊กอินนี้ปรับภาพและไฟล์ PDF ให้เหมาะสมในขณะที่ปรับขนาดภาพโดยอัตโนมัติ มันมีตัวเลือกการบีบอัดที่ยืดหยุ่น ทั้งแบบ lossy, lossless และ glossy ซึ่งมอบทางเลือกที่สมดุลให้กับผู้ใช้ ปลั๊กอินจะสำรองรูปภาพต้นฉบับ ลบข้อมูลเมตา และแปลง PNG เป็น JPEG เพื่อเพิ่มประสิทธิภาพรูปภาพ Retina และภาพขนาดย่อ อย่างไรก็ตาม คุณต้องแชร์อีเมลของคุณเพื่อรับคีย์ API
3. Optimole: ปลั๊กอินเพิ่มประสิทธิภาพรูปภาพแบบครบวงจรฟรีที่ประมวลผลรูปภาพแบบเรียลไทม์ผ่านเซิร์ฟเวอร์บนคลาวด์ มันสร้างความแตกต่างด้วยการเลือกขนาดภาพที่เหมาะสมที่สุดโดยพิจารณาจากวิวพอร์ตของผู้เยี่ยมชม และใช้การโหลดแบบ Lazy Loading เพื่อการแสดงผลที่มีประสิทธิภาพ การอัปเกรดเป็นแผนพรีเมียมจะทำให้สามารถแปลงรูปภาพและฟีเจอร์ขั้นสูงได้ไม่จำกัด รวมถึงการบีบอัดคุณภาพสูงที่ยังคงความคมชัดดั้งเดิมในขณะที่ลดขนาดไฟล์และการสร้างเวอร์ชัน Retina และ WebP โดยอัตโนมัติ
4. WP Smush: ปลั๊กอินนี้เป็นส่วนหนึ่งของชุดปลั๊กอิน WPMU DEV มันจะปรับภาพให้เหมาะสมโดยอัตโนมัติหลังจากอัปโหลดไปยังไซต์ WordPress ของคุณ WP Smush มีตัวเลือกการเพิ่มประสิทธิภาพจำนวนมากที่ช่วยให้คุณสามารถบีบอัดภาพได้สูงสุด 50 ภาพในคราวเดียว ทำให้ง่ายต่อการปรับปรุงสื่อที่มีอยู่ของคุณ ปลั๊กอินยังมีตัวเลือกสำหรับการปรับขนาดรูปภาพและการโหลดแบบ Lazy Loading และคุณสามารถกำหนดค่าให้ลบข้อมูลเมตาออกจากรูปภาพเมื่ออัปโหลดได้ รองรับรูปภาพสูงสุด 5 MB แต่คุณจะต้องอัปเกรดเป็นเวอร์ชันพรีเมียมเพื่อเพิ่มประสิทธิภาพไฟล์ขนาดใหญ่

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

บทสรุป

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

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

รับดิวิ

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