วิธีปรับแต่งรูปภาพให้เหมาะสมสำหรับ WordPress [สุดยอดคู่มือ]

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

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

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

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

โพสต์นี้จะสอนวิธีเพิ่มประสิทธิภาพรูปภาพ WordPress และเพิ่มเวลาให้กับกิจกรรมอื่นๆ

การปรับภาพให้เหมาะสมคืออะไร?

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

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

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

ประโยชน์ของการปรับภาพให้เหมาะสม

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

ประโยชน์ของการเพิ่มประสิทธิภาพภาพคือ:

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

14 สิ่งสำคัญในการเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บ

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

คุณภาพเทียบกับขนาด:

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

ความละเอียดมาตรฐานสำหรับรูปภาพบนเว็บคือ 72 DPI (จุดต่อนิ้ว) ดังนั้น ขอแนะนำให้บันทึกภาพเป็น JPG แทนที่จะเป็น PNG เนื่องจากไฟล์ประเภทนี้มีขนาดเล็กกว่า

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

รูปแบบไฟล์ภาพ:

ในการพิจารณาว่าจะเลือกรูปแบบภาพใด จำเป็นต้องเข้าใจภาพต่างๆ และวัตถุประสงค์ของภาพ คุณควรบันทึกไฟล์ของคุณเป็น JPG แต่เมื่อปรับ รูปภาพให้เหมาะสมสำหรับเว็บ ให้เลือก PNG-8 หรือ PNG-24

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

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

ขนาดไฟล์และขนาด:

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

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

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

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

ปรับปรุงรูปภาพ SEO:

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

แนวทางปฏิบัติ SEO รูปภาพที่น่าสนใจที่สุดคือ:

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

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

การบีบอัดที่เหมาะสม:

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

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

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

คุณควรคำนึงถึงข้อเท็จจริงต่อไปนี้เมื่อบีบอัดรูปภาพ:

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

คุณสามารถทราบรายละเอียดเพิ่มเติมเกี่ยวกับการบีบอัดโฆษณาแบบไม่สูญเสียข้อมูลได้จากบล็อกของ ShortPixel

แสดงรูปภาพในรูปแบบ Next-Gen:

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

ตัวอย่างเช่น หากคุณมีรูปภาพ JPEG คุณสามารถเปลี่ยนนามสกุลเป็น .png จากนั้นเบราว์เซอร์จะโหลดรูปภาพนั้น

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

คุณสามารถค้นหารูปภาพที่แสดงในรูปแบบ Next-gen ได้อย่างง่ายดายโดยใช้ GtMatrix หรือเครื่องมือข้อมูลเชิงลึกเกี่ยวกับความเร็วของหน้าเว็บของ Google

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

รวมรูปภาพโดยใช้ CSS Sprites:

การนำภาพมาผสมกันโดยใช้ซอฟต์แวร์แก้ไขภาพแบบดั้งเดิม อย่างไรก็ตาม ตอนนี้พบว่าวิธี CSS sprites สามารถใช้ในการรวมรูปภาพได้

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

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

ปิดใช้งานการ Hotlink ของรูปภาพ:

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

คุณสามารถกำหนดค่าการป้องกันฮอตลิงค์รูปภาพผ่านบัญชี cPanel ของคุณ กระบวนการนี้ตรงไปตรงมามาก

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

หมายเหตุ- หากคุณเป็นผู้ใช้ Cloudflare คุณสามารถป้องกันไม่ให้รูปภาพของคุณถูกฮอตลิงก์โดยเปิดใช้งานตัวเลือก " การป้องกัน Hotlink "

รูปภาพแคช:

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

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

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

แคช Gravatars:

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

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

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

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

มีสองวิธีแก้ไขปัญหานี้:

• ทำให้ Gravatar ของคุณมีขนาดเล็กที่สุด รูปภาพขนาดเล็กจะโหลดเร็วขึ้นและใช้แบนด์วิดท์น้อยกว่าภาพขนาดใหญ่
• คุณควรโฮสต์บริการ Gravatar เวอร์ชันของคุณเองบนโดเมนที่คุณควบคุม สิ่งนี้จะต้องใช้เว็บเซิร์ฟเวอร์ Apache, PHP และฐานข้อมูล MySQL เพื่อจัดเก็บ Gravatars ในเครื่อง แทนที่จะแคชบนเซิร์ฟเวอร์ Gravatar

แสดงรูปภาพจาก A CDN:

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

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

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

คุณสามารถใช้เครือข่าย CDN ใดก็ได้ต่อไปนี้

• CloudFlare
• BunnyCDN

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

หลีกเลี่ยงการเปลี่ยนเส้นทาง URL รูปภาพ:

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

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

หลีกเลี่ยงส่วนหัวหมดอายุ:

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

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

หลีกเลี่ยงการฝังรูปภาพ:

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

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

เครื่องมือเพิ่มประสิทธิภาพภาพที่ดีที่สุด:

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

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

• TinyJPG: TinyJPG เป็นเครื่องมือออนไลน์ที่มีประโยชน์ในการบีบอัดภาพ JPEG อัตราการบีบอัดของเครื่องมือนี้สูงมาก และคุณภาพของภาพก็ยังดีเยี่ยม
• Toolur: Toolur เป็นเครื่องมือออนไลน์ที่มีประโยชน์ในการเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บ ปรับภาพให้เหมาะสมโดยลดขนาดไฟล์โดยไม่ส่งผลต่อคุณภาพของภาพ
• ImageOptim: ImageOptim เป็นหนึ่งในเครื่องมือเพิ่มประสิทธิภาพรูปภาพชั้นนำ เครื่องมือนี้ช่วยคุณปรับปรุงความเร็วในการโหลดไซต์ของคุณโดยการปรับรูปภาพบนหน้าเว็บให้เหมาะสม มันยังปรับรูปภาพที่บีบอัดแล้วให้เหมาะสมได้อีกด้วย
• GIMP: GIMP เป็นโปรแกรมแก้ไขรูปภาพที่ยอดเยี่ยมที่ให้คุณลดขนาดไฟล์ของรูปภาพได้ในขณะที่รักษาคุณภาพของรูปภาพไว้ เป็นทางเลือกที่คุ้มค่าสำหรับ Adobe Photoshop

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

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

• เครื่องมือเพิ่มประสิทธิภาพรูปภาพ EWWW
• จินตนาการโดย WP Rocket Team
• เครื่องมือเพิ่มประสิทธิภาพภาพ ShortPixel
• WP Smush
• reSmush.it

คุณสามารถใช้ EWWW Image Optimizer , Imagify by WP Rocket Team และ ปลั๊กอิน ShortPixel Image Optimizer จากรายการด้านบน

คุณควรใช้ปลั๊กอินพรีเมียมสำหรับการเพิ่มประสิทธิภาพภาพเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด หากคุณต้องการประหยัดเงิน ลอง ใช้ EWWW Image Optimizer

คำถามที่พบบ่อย

ฉันจะสร้างภาพ WebP ใน WordPress ได้อย่างไร

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

คุณสามารถใช้ปลั๊กอินใดๆ ต่อไปนี้สำหรับสิ่งนี้

• WebP Converter สำหรับสื่อ
• WebP Express

ปลั๊กอินที่ยอดเยี่ยมที่ฉันใช้สำหรับ WebP คือ Flying Images โดย WP Speed ​​Matters ใช้งานได้กับทุกธีมและจัดการทุกอย่าง นอกจากนี้ ยังช่วยให้คุณสร้างอิมเมจ WebP ทุกขนาดที่คุณต้องการ และให้บริการ CDN รูปภาพฟรี ซึ่งเป็นประโยชน์อย่างมาก

ฉันจะเลื่อนภาพนอกจอได้อย่างไร

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

<img src=”image-source.png” alt=” width=”100px” height=”100px” title=”ข้อความคำแนะนำเครื่องมือบางส่วน” data-defer=”offscreen-image.jpg” />

หมายเหตุ- Defer รองรับเฉพาะใน HTML5 ไม่ใช่ XHTML

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

<div data-defer="offscreen-image.jpg"></div>

จะแก้ไข Defer Offscreen Images ได้อย่างไร?

• ขี้เกียจโหลดภาพ
• ขี้เกียจโหลดภาพพื้นหลัง

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

หมายเหตุ- คุณสามารถเปิดใช้งาน การโหลดภาพแบบ Lazy Loading ได้ โดยใช้ปลั๊กอิน WP Rocket ดังนั้นคุณสามารถใช้สิ่งใดสิ่งหนึ่งได้

สรุปแล้ว

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

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

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

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