วิธีการปรับปรุงและเพิ่มประสิทธิภาพรูปภาพสำหรับ WordPress

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

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

วิธีเพิ่มประสิทธิภาพรูปภาพสำหรับ WordPress เพื่อให้คุณเพิ่มความเร็วไซต์และปรับปรุง SEO

ทำไมคุณควรเพิ่มประสิทธิภาพรูปภาพสำหรับ WordPress? หากคุณพยายาม คุณสามารถคาดหวังสิ่งต่อไปนี้:

• ไซต์ที่เร็วกว่า
• SEO ที่ดีกว่า
• การสำรองข้อมูลขนาดเล็กลง
• ใช้แบนด์วิดท์น้อยลง
• ผู้ใช้ที่มีความสุขมากขึ้น

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

ทดสอบรูปภาพบนเว็บไซต์ของคุณอย่างรวดเร็ว

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

เราชอบที่จะใช้ GTmetrix ซึ่งจะแสดงภาพที่ทำให้เว็บไซต์ของคุณโหลดช้าลง

ปรับแต่งรูปภาพให้เหมาะสมสำหรับ WordPress ก่อนอัพโหลด

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

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

ปรับขนาดภาพ

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

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

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

เปลี่ยนคุณภาพ

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

นอกจากนี้ หากคุณเลือกบันทึกรูปภาพเป็น JPEG Photoshop จะขอให้คุณเลือกระดับคุณภาพ ในกรณีนี้ การลดคุณภาพจาก 12 เหลือเพียง 8 จะทำให้ขนาดของภาพลดลงอย่างมาก ในขณะที่ความแตกต่างของคุณภาพจะไม่มากขนาดนั้น

หากคุณยังไม่ได้ใช้ซอฟต์แวร์ใดๆ เพื่อเปลี่ยนคุณภาพของรูปภาพ คุณสามารถลองใช้เครื่องมือ Tiny PNG ออนไลน์ได้ฟรี เพียงอัปโหลดรูปภาพและดูว่าสามารถสร้างความแตกต่างได้อย่างไร

เลือกรูปแบบที่เหมาะสม

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

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

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

ดูแลชื่อไฟล์

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

เราขอแนะนำให้คุณตั้งชื่อภาพโดยไม่เว้นวรรค อย่าลืมใส่คีย์เวิร์ดหากคุณต้องการให้เพจและรูปภาพติดอันดับ ตัวอย่างเช่น หากคุณกำลังอัปโหลดรูปภาพของ Ferrari California ชื่อไฟล์ควรเป็น “ferrari-california.jpg” หากคุณใช้ปลั๊กอิน SEO สำหรับ WordPress คุณรู้อยู่แล้วว่ามันตรวจสอบแท็ก alt ของคุณสำหรับคำหลัก ใช่ การมีชื่อภาพที่เหมาะสมเป็นสิ่งสำคัญจริงๆ

ปรับรูปภาพให้เหมาะสมสำหรับ WordPress หลังจากอัปโหลด

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

ชื่อเรื่อง คำอธิบาย ข้อความแสดงแทนและคำอธิบายภาพ

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

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

แก้ไขภาพด้วย WordPress

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

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

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

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

ใช้ปลั๊กอิน WordPress

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

ขี้เกียจโหลดภาพเมื่อจำเป็น

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

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

มีภาพตอบสนอง

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

ปรับรูปภาพให้เหมาะสมสำหรับโซเชียลมีเดีย

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

หากคุณกำลังใช้ปลั๊กอิน SEO เช่น Yoast อย่าลืมตรวจสอบการตั้งค่า ตัวอย่างเช่น Yoast จะให้คุณตั้งค่าบางอย่างที่เกี่ยวข้องกับโซเชียลมีเดีย ดังนั้น ไปที่ SEO -> Social และป้อนข้อมูลบน Facebook, Twitter, Google+ และ Pinterest

หากคุณต้องการมากกว่านี้ และต้องการปรับแต่งรูปภาพสำหรับเว็บไซต์โซเชียลมีเดียเพิ่มเติม ให้ลองดู WPSSO - เมตาแท็กที่แม่นยำ + มาร์กอัปสคีมาสำหรับการเพิ่มประสิทธิภาพการแชร์โซเชียล & ปลั๊กอิน SEO

เปลี่ยนวิธีที่ WordPress บีบอัดภาพ JPEG

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

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

โชคดีที่คุณจะต้องใช้โค้ดเพียงบรรทัดเดียวในการเปลี่ยนแปลงนี้

หยุดการบีบอัดภาพ JPEG:

หากคุณไม่ต้องการให้รูปภาพ JPEG ถูกบีบอัด เพียงแค่คัดลอกและวางโค้ดต่อไปนี้ลงในไฟล์ functions.php ของคุณ:

 add_filter('jpeg_quality', ฟังก์ชัน($arg){return 100;});

อย่าลืมบันทึกการเปลี่ยนแปลง และคุณพร้อมที่จะอัปโหลดภาพใหม่

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

บีบอัดภาพ JPEG ให้มากขึ้น:

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

 add_filter('jpeg_quality', ฟังก์ชัน($arg){return 80;});

อย่าลืม; ระดับการบีบอัดเริ่มต้นคือ 90

ปลั๊กอินเพิ่มประสิทธิภาพรูปภาพยอดนิยมสำหรับ WordPress

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

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

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

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

ปลั๊กอิน WP Smush

ราคา: ฟรี

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

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

ปลั๊กอินที่ยอดเยี่ยมนี้สามารถทำงานกับไฟล์ JPEG, GIF และ PNG มันทำงานได้กับไดเรกทอรีทั้งหมดของคุณ ดูแลไฟล์แนบโดยอัตโนมัติ และแม้กระทั่งทำงานบนหลายไซต์ คุณสามารถดำเนินการกับภาพแต่ละภาพด้วยตนเองหรือแก้ไขภาพทีละห้าสิบภาพ หากคุณต้องการผลลัพธ์ที่ดียิ่งขึ้นและตัวเลือกเพิ่มเติม ลองดู WP Smush PRO

ปลั๊กอิน EWWW Image Optimizer

ราคา: ฟรี

เบื้องหลังชื่อตลกนี้มีปลั๊กอินเพิ่มประสิทธิภาพรูปภาพยอดนิยมสำหรับ WordPress ตัวหนึ่ง เช่นเดียวกับที่กล่าวไว้ก่อนหน้านี้ EWWW Image Optimizer สามารถบีบอัดภาพของคุณโดยไม่กระทบต่อคุณภาพของภาพ เมื่อคุณคิดว่าปลั๊กอินสามารถเร่งความเร็วไซต์ของคุณได้ในไม่กี่วินาที คุณก็พร้อมจะดาวน์โหลดแล้ว เมื่อคุณทำเช่นนั้น คุณจะได้ปรับแต่งรูปภาพจำนวนมาก และแกลเลอรีเช่น GRAND FlaGallery, NextCellent และ NextGEN จะได้รับหน้า Bulk Optimize ของตัวเองด้วยซ้ำ

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

ปลั๊กอินบีบอัดรูปภาพ JPEG & PNG

ราคา: ฟรี

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

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

บีบอัดรูปภาพ JPEG และ PNG รองรับ PNG แบบเคลื่อนไหว ทำงานได้อย่างสมบูรณ์แบบบนหลายไซต์ รองรับ WooComerce และจะไม่มีปัญหากับ WP Offload S3

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

ไม่มีการจำกัดขนาดไฟล์ คุณต้องตั้งค่าวิดเจ็ตแดชบอร์ด และใช้งานได้กับแอป WordPress สำหรับอุปกรณ์เคลื่อนที่ เนื่องจากทั้งหมดนั้น รูปภาพ Compress JPEG & PNG มีการติดตั้งที่ใช้งานอยู่มากกว่า 100,000 ครั้ง และสมควรได้รับตำแหน่งในรายการปลั๊กอินการเพิ่มประสิทธิภาพรูปภาพที่ดีที่สุดสำหรับ WordPress

ปลั๊กอิน Imsanity

ราคา: ฟรี

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

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

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

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

ปลั๊กอิน ShortPixel Image Optimizer

ราคา: ฟรี

ด้วยการติดตั้งที่ใช้งานมากกว่า 30,000 ครั้ง ShortPixel Image ยังคงเป็นหนึ่งในปลั๊กอินการเพิ่มประสิทธิภาพรูปภาพที่ได้รับความนิยมมากที่สุดสำหรับ WordPress ปลั๊กอินนี้อัดแน่นไปด้วยคุณสมบัติต่างๆ และเป็นสิ่งที่ต้องมีสำหรับไซต์ที่มีรูปภาพจำนวนมากเพื่อเพิ่มประสิทธิภาพ

ShortPixel Image Optimizer ไม่เพียงแต่ปรับเอกสาร JPG, PNG, GIF และ PDF ให้เหมาะสมสำหรับคุณเท่านั้น แต่ยังช่วยให้คุณสามารถ แปลงภาพ JPEG, PNG หรือ GIF เป็น WebP ปลั๊กอินนี้ทำงานได้ดีกับปลั๊กอินแกลเลอรีอื่นๆ และไม่สนใจว่าไซต์ของคุณใช้ HTTP หรือ HTTPS หรือไม่ มันจะช่วยให้คุณลบข้อมูล EXIF ​​​​ออกจากภาพ (สิ่งที่ช่างภาพชอบที่จะมี)

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

Optimus – เครื่องมือเพิ่มประสิทธิภาพรูปภาพ WordPress

ราคา: ฟรี

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

Optimus ทำงานบนหลายไซต์ ไม่ใช่เรื่องแปลกสำหรับไซต์อีคอมเมิร์ซของ WordPress และได้รับการปรับให้เหมาะสมที่สุดสำหรับ WordPress Mobile Apps และ Windows Live Writer จะทำให้ไซต์ของคุณเร็วขึ้นโดยที่คุณไม่ต้องแตะโค้ดเลย ปลั๊กอินมีให้มากขึ้น แต่คุณจะต้องเลือกใช้เวอร์ชันพรีเมียม หากต้องการดูเพิ่มเติม โปรดไปที่หน้าอย่างเป็นทางการบนที่เก็บปลั๊กอินของ WordPress

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

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

หากคุณรู้จัก PHP เป็นอย่างดี มีบทความดีๆ เกี่ยวกับการเพิ่ม Lazy Loading สำหรับรูปภาพและการเลื่อนที่ไม่มีที่สิ้นสุดที่เขียนโดยเพื่อนร่วมงานของเราใน Elegant Themes

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

โหลดขี้เกียจสำหรับวิดีโอ

ราคา: ฟรี

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

WP YouTube Lyte

ราคา: ฟรี

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

a3 ขี้เกียจโหลด

ราคา: ฟรี

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

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

BJ ขี้เกียจโหลด

ราคา: ฟรี

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

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

แสดงภาพก่อนและหลังในลักษณะที่น่าสนใจ

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

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

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

ยี่สิบยี่สิบ

ราคา: ฟรี

Twenty Twenty เป็นชื่อของปลั๊กอินที่ยอดเยี่ยมนี้ ซึ่งคุณสามารถดาวน์โหลดได้ฟรีในที่เก็บปลั๊กอินของ WordPress

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

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

1. สร้างโพสต์ใหม่หรือเปิดโพสต์ที่มีอยู่
2. แทรกสองภาพในโพสต์ หากคุณกำลังทำงานใน Visual Editor คุณควรเห็นภาพหนึ่งอยู่เหนืออีกภาพหนึ่ง หากคุณกำลังทำงานใน Text Editor คุณควรเห็นรหัสที่คล้ายกับสิ่งนี้:

 <a href="image1.jpg"><img src=
"http://www.loactionoftheimage.com"width="700" 
ความสูง="200" /></a>

<a href="image2.jpg"><img src=
"http://www.loactionoftheimage.com"width="700" 
ความสูง="200" /></a>

3. ใส่แท็ก [ยี่สิบยี่สิบ] ก่อนภาพแรก
4. หลังจากอันที่สองให้ป้อน [/twentytwenty] tag

คุณควรลงเอยด้วยสิ่งนี้ใน Text Editor ของคุณ:

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

วิธีสร้างภาพแบบโต้ตอบ – วาด เพิ่มคำอธิบาย และลิงก์

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

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

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

ดึงดูดความสนใจ

ราคา: ฟรี

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

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

คุณสมบัติ

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

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

ตัวอย่าง – แผนที่แบบโต้ตอบของฮาวาย

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

สิ่งแรกที่คุณต้องทำคือค้นหาภาพของเกาะฮาวาย หลังจากที่คุณไปที่ Draw Attention -> Edit Image คุณควรอัปโหลดรูปภาพไปยังพื้นที่บนแถบด้านข้างขวา เมื่อโหลดภาพแล้ว ความสนุกก็เริ่มขึ้น

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

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

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

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

รุ่น PRO

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

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

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

วิธีสร้างขนาดรูปภาพเพิ่มเติมใหม่

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

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

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

ราคา: ฟรี

1. ไปที่ Plugins->Add New
2. ค้นหา "สร้างภาพขนาดย่อใหม่"
3. ติดตั้งและเปิดใช้งานปลั๊กอิน
4. ไปที่ Tools->Regen.Thumbnails

หากคุณต้องการปรับขนาดภาพทั้งหมดของคุณ เพียงคลิกที่ปุ่ม “สร้างภาพขนาดย่อทั้งหมดใหม่” และรอให้ปลั๊กอินทำงานหนัก

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

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

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

ลบแอตทริบิวต์รูปภาพความกว้างและความสูงด้วย jQuery

เมื่อเพิ่มรูปภาพในโพสต์ WordPress ระบบจะเพิ่มแอตทริบิวต์ความสูงและความกว้างให้กับรูปภาพโดยอัตโนมัติ That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

1. Open header.php file from your theme folder
2. Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</script>

3. บันทึกการเปลี่ยนแปลง

และคุณทำเสร็จแล้ว! The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

1. เปิดไฟล์ functions.php ของคุณ
2. Copy and paste this piece of code:

 function custom_image_sizes() {
add_image_size( 'one-size', 333, 333, true );
add_image_size( 'another-size', 666, 666, true );
}

add_action( 'init', 'custom_image_sizes' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

3. บันทึกการเปลี่ยนแปลง
4. Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

1. เปิด functions.php
2. คัดลอกและวางรหัสต่อไปนี้:

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

3. Change default variables in the array
4. บันทึกการเปลี่ยนแปลง

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

[screen url=”http://www.firstsiteguide.com” alt=”fsg” w=”600″ h=”450″]

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

Example:

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

[screen url=”http://www.google.com” alt=”Google” w=”200″ h=”400″]

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

บทสรุป

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.