ปรับแต่งรูปภาพของคุณด้วยขนาดภาพที่กำหนดไว้ล่วงหน้า [เคล็ดลับ WordPress]

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

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

ในบทความนี้ฉันจะแนะนำคุณ ขนาดภาพคืออะไร และ วิธีการกำหนดพวกเขา.

WordPress จัดการรูปภาพอย่างไร

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

เมื่อใดก็ตามที่คุณอัพโหลดรูปภาพผ่าน WordPress มันจะสร้างเวอร์ชันของภาพเหล่านี้และจัดเก็บแยกต่างหาก ตัวอย่างเช่นหากคุณอัปโหลดรูปภาพขนาด 1200 × 800 WordPress อาจสร้างรุ่น 100 × 100, 600 × 400 และ 900 × 600 เมื่อคุณแทรกรูปภาพและเลือก "สื่อ" จะใช้สื่อขนาดจริงแทนรุ่นที่ย่อลงมาจากต้นฉบับ.

นี่เป็นประโยชน์อย่างมหาศาลเพราะมัน สงวนแบนด์วิดท์บนเซิร์ฟเวอร์และเวลาการประมวลผลบนคอมพิวเตอร์ไคลเอนต์. ฉันคิดว่ามันน่าประหลาดใจที่การดาวน์โหลดภาพขนาด 600x400 นั้นเร็วกว่าการดาวน์โหลดภาพขนาด 1200 × 800.

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

ภาพที่ถูกต้องในสถานที่ที่เหมาะสม

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

ในทุกบทความที่มีการนำทางมากที่สุดนั้นไม่สำคัญว่าภาพในโพสต์จะมีขนาดความกว้าง 220px หรือ 245px เวอร์ชันที่คุณใช้งานได้จะใช้ได้เท่า ๆ กัน อย่างไรก็ตามรูปภาพที่แนะนำมักแสดงในขนาดทั่วไป สำหรับรายการบทความคุณสามารถใช้ภาพย่อ 178 × 178 สำหรับส่วนหัวของบทความคุณอาจใช้ภาพขนาดกว้าง 1200 × 600.

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

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

การสร้างขนาดภาพ

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

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

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

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

ใช้ขนาดภาพ

ขนาดรูปภาพเหล่านี้สามารถใช้ในฟังก์ชั่นจำนวนมากที่จัดการกับการดึงข้อมูลสื่อ ลองดูภาพเด่นก่อน. the_post_thumbnail () มักใช้เพื่อแสดงรูปภาพเด่นของโพสต์ รหัสต่อไปนี้สามารถวางในการวนลูป WordPress:

 the_post_thumbnail ('featured_thumbnail'); 

พารามิเตอร์แรกของฟังก์ชั่นนี้ช่วยให้คุณสามารถระบุขนาดภาพที่จะใช้ เนื่องจากฉันได้ระบุ "featured_thumbnail" ไฟล์นี้จะใช้เวอร์ชัน 178 × 178.

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

การสร้างภาพขนาดย่อซ้ำ

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

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

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

รูปภาพตอบสนอง

ปัญหาหนึ่งในการบำรุงรักษาไซต์ที่ดีที่สุดคือการตอบสนอง เมื่อฉันดูบทความบน iPad ภาพในโพสต์ขนาดใหญ่จะถูกลดขนาดเนื่องจากความกว้างสูงสุดจะเป็น 786px.

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

การเพิ่มประสิทธิภาพของภาพเพิ่มเติม

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

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