สุดยอดคู่มือการจัดการรูปภาพ WordPress

  1. 1. กำลังอ่าน: สุดยอดคู่มือการจัดการรูปภาพ WordPress
  2. 2. 3 เคล็ดลับการจัดการรูปภาพที่รู้จักกันน้อยใน WordPress
  3. 3. WordPress SEO ข้อผิดพลาดและวิธีการแก้ไข

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


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

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

คุณอาจสงสัยว่าเราจะทำสิ่งนั้นอย่างไร มีการดาวน์โหลดทั้งหมด 24,000+ ชุดรูปแบบ WordPress ที่ตอบสนองต่ออเนกประสงค์ของเราใน ThemeForest อาจไม่ใช่ตัวบ่งชี้ที่ยอดเยี่ยม.

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

เคล็ดลับการเพิ่มประสิทธิภาพด้านเทคนิคและประสิทธิภาพสำหรับรูปภาพ WordPress

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

JPG หรือ PNG การใช้รูปแบบภาพที่ถูกต้อง

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

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

ควรใช้รูปแบบ PNG เมื่อใด?

สำหรับรูปภาพแบบแบนเช่นเวกเตอร์ภาพประกอบแบบอักษรโลโก้แบนเนอร์รูปร่างแบนเนอร์ ฯลฯ – ทุกอย่างที่สร้างในรูปแบบเวกเตอร์เช่นรูปแบบ EPS หรือ Adobe Illustrator (.AI) ให้ใช้ PNG คุณจะได้ภาพที่ได้รับการปรับปรุงให้ดีที่สุดโดยมีการสูญเสียคุณภาพเกือบเป็นศูนย์ หากคุณใช้ JPG ในกรณีนี้คุณจะไม่ได้รับขนาด แต่อาจหมดคุณภาพ ในความเป็นจริงที่ความละเอียดสูงกว่า PNG จะเบาลงโดยไม่สูญเสียคุณภาพ JPG จะประสบ.

ยกตัวอย่างของเขา เราจะสร้างภาพเรียบที่ 5000px และบันทึกเป็น JPG และ PNG.

ภาพตัวอย่างที่ใช้ในการทดสอบ

ภาพแบน
JPG233KB
PNG42 KB

สรุปภาพ JPG นั้นสูงกว่า PNG 455% สำหรับความละเอียดเดียวกัน.

ควรใช้รูปแบบ JPG เมื่อใด?

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

คุณจะต้องระมัดระวังเป็นพิเศษในกรณีนี้ หากคุณใช้ JPG แทน PNG จะมีความเสียหายเพียงเล็กน้อยหรือไม่มีเลย อย่างไรก็ตามหากคุณใช้ PNG ที่เป็นเลือดในกรณีของ JPG คุณจะสร้างความเสียหายได้มากมาย ลองดูตัวอย่างนี้.

ติดตั้ง: ฉันดาวน์โหลดรูปภาพนี้จาก Shutterstock ซึ่งมีน้ำหนักประมาณ 10.3MB ที่ความละเอียดของ 6149 × 4562 – เป็นรูปถ่ายหุ้น 28MP นอกจากว่าเรากำลังเตรียมบางอย่างเช่นแผ่นพับพร้อมพิมพ์เราจะไม่ใช้ความละเอียดเต็มรูปแบบของภาพในบล็อกของเรา สมมติว่าเรามีขนาดภาพสูงสุดคงที่ในบล็อกของเรา 1600 พิกเซล.

การทดสอบ: เราจะปรับขนาดภาพต้นฉบับเป็น 1600px และสร้าง สี่รุ่น – สองรูปแบบ PNG และสองรูปแบบสำหรับ JPG สำหรับแต่ละรูปแบบ (JPG / PNG) เราจะใช้ (a) แนะนำการตั้งค่าการบีบอัดและ (b) การตั้งค่าการบีบอัดสูงสุด.

ภาพตัวอย่างสำหรับการทดสอบ JEPG

ผล: นี่คือผลลัพธ์ในแผนภูมิที่ดีสำหรับคุณที่จะติดตาม:

รูปภาพต้นฉบับ (KB)

10870
การแก้ไขเป้าหมาย1600 พิกเซล
รูปแบบการตั้งค่าขนาด (KB)ลด%
JPGก้าวหน้าคุณภาพ = 8523198%
แบบไม่ก้าวหน้าคุณภาพ = 8523998%
PNGการบีบอัด = 0557549%
การบีบอัด = 6185283%
การบีบอัด = 9175084%

จากการเหลือบมองครั้งแรกเราอาจคิดว่าการบีบอัด PNG 84% นั้น ดีพอแล้ว เมื่อเทียบกับ 98% ที่ทำได้ใน JPG นั่นไม่จริงทั้งหมด หากคุณดูขนาดภาพอย่างใกล้ชิดคุณจะเห็นว่า PNG มีน้ำหนักมากกว่า 1.7MB เล็กน้อยในขณะที่ JPG นั้นคือ 0.22MB ซึ่งหมายความว่า PNG หนักกว่า JPG ถึง 8 เท่า รุ่นของภาพเดียวกันที่ความละเอียดเดียวกัน กล่าวอีกนัยหนึ่งสำหรับภาพและความละเอียดเดียวกันรุ่น JPG นั้นเบากว่า PNG 700%!

สำหรับภาพและความละเอียดเดียวกันรุ่น JPG นั้นเบากว่า PNG 700%!

โดยทั่วไปแล้วใช้ PNG สำหรับภาพแบนและ JPG สำหรับทุกอย่าง.

รายการตรวจสอบสำหรับการอัปโหลดรูปถ่ายหุ้นในบล็อก

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

1. ปรับขนาดรูปภาพของคุณ

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

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

2. ลบข้อมูล EXIF

รูปภาพที่คลิกบนกล้องปกติมีจำนวนมากฝังอยู่ เมตาดาต้า – ซึ่งไม่มีอะไรนอกจากบิต (แต่มีประโยชน์) ของข้อมูลเกี่ยวกับรูปภาพ ตัวอย่างของข้อมูลดังกล่าวรวมถึงพิกัด GPS ของสถานที่ซึ่งรูปถูกคลิกการตั้งค่า ISO รุ่นกล้อง ฯลฯ.

ข้อมูล EXIF ​​ของภาพสุ่มคลิกบน iPhone ของฉัน

เว้นแต่ว่าเราเป็นบล็อกรูปภาพโดยทั่วไปเราไม่ต้องการข้อมูลดังกล่าวในภาพโพสต์ของบล็อก เมื่อคุณบันทึกหรือแปลงภาพเป็นชุดใน IrfanView ข้อมูล EXIF ​​จะถูกลบโดยทั่วไป ซึ่งจะช่วยในการรักษาความเป็นส่วนตัวของคุณ – โดยเฉพาะที่ตั้งทางกายภาพของคุณ ความแตกต่างของขนาดสำหรับภาพถ่ายส่วนใหญ่อยู่ที่ประมาณ 200-300 KB ต่อภาพ.

3. บันทึกเป็น Progressive JPG

IrfanView บันทึก JEPG แบบก้าวหน้าตามค่าเริ่มต้น

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

4. ตั้งค่า DPI เป็น 72

DPI หรือจุดต่อนิ้วเป็นการวัดคุณภาพของภาพ ใช้ค่า DPI สูงสำหรับวัสดุการพิมพ์ สำหรับเว็บค่า 72 นั้นสมบูรณ์แบบ.

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

การตั้งค่าการแปลงเป็นกลุ่มใน IrfanView สำหรับบล็อก WordPress ทั่วไป

5. เพิ่มประสิทธิภาพรูปภาพของคุณ

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

ฉันกำลังพูดถึงบริการต่างๆเช่น TinyPNG หรือ TinyJPG ที่ปรับภาพ PNG / JPG ของคุณด้วยอัลกอริธึมขั้นสูง.

ปรับภาพใน TinyPNG

พูดตามตรงฉันไม่รู้ว่าอัลกอริธึมทำงานได้อย่างไร แต่พวกเขาทำได้และฉันสามารถลดได้ 50-70% ไม่ว่าฉันจะประหยัดได้ดีที่สุดเพียงใด.

คุณยังสามารถซื้อ รุ่นโปร ของบริการเป็นปลั๊กอิน Photoshop ราคา $ 50 USD มีทั้งรุ่น Windows และ Mac สำหรับวัตถุประสงค์ของฉันรุ่นออนไลน์ (ควบคู่ไปกับ บันทึกลงใน Dropbox คุณสมบัติ) ใช้งานได้ดีที่สุด.

ปลั๊กอินปรับแต่งภาพใน WordPress

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

EWWW เครื่องมือเพิ่มประสิทธิภาพภาพบนคลาวด์

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

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

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

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

แผน & ราคา: อย่างที่คาดไว้ปลั๊กอินไม่ได้ฟรีเนื่องจากผู้พัฒนาจะต้องชำระค่าใช้จ่ายในการคำนวณแบบคลาวด์ อย่างไรก็ตาม การตั้งราคา มีราคาสมเหตุสมผลมาก $ 9 USD สำหรับการปรับภาพให้ดีที่สุด 3000 รายการสำหรับการสมัครสมาชิกแบบชำระเงินล่วงหน้า.

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

ปลั๊กอิน WordPress TinyPNG

ปลั๊กอินเพิ่มประสิทธิภาพภาพที่ยอดเยี่ยมอีกตัวหนึ่งที่รวมเข้ากับบริการ TinyPNG / JPG โดยตรง มันจะอัปโหลดรูปภาพใหม่และที่มีอยู่ไปยังไลบรารีสื่อ WordPress โดยอัตโนมัติ ปลั๊กอินนี้มีแผนฟรี 100 ภาพการเพิ่มประสิทธิภาพต่อเดือน.

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

ข้อสรุป

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map