อธิบายขนาดรูปภาพของ WordPress

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

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

บทบาทของขนาดรูปภาพใน WordPress คืออะไร?

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

โฮสต์เว็บไซต์ของคุณด้วย Pressidium

รับประกันคืนเงิน 60 วัน

ดูแผนของเรา

WordPress พยายามสร้างสมดุลโดยแสดงขนาดภาพที่เหมาะสมที่สุดขึ้นอยู่กับตำแหน่งของภาพ ทำได้โดยการสร้างขนาดภาพที่แตกต่างกัน 3 ขนาดในแต่ละครั้งที่คุณอัปโหลดภาพไปยัง WordPress Media Library เหล่านี้คือ 'ขนาดย่อ', 'ขนาดกลาง' และ 'ขนาดใหญ่' ที่มีขนาด 150 × 150 พิกเซล, 300 × 300 พิกเซล (สูงสุด) และ 1024 × 1024 พิกเซล (สูงสุด) ตามลำดับ สุดท้ายก็จะเก็บภาพ 'ขนาดเต็ม' ซึ่งเป็นขนาดดั้งเดิมของภาพที่อัปโหลด

ขนาดเหล่านี้พร้อมกับขนาดเพิ่มเติมที่เราจะพิจารณาในภายหลังนั้นถูกใช้โดย WordPress ในตำแหน่งต่างๆ ในเลย์เอาต์ส่วนหน้า วิธีนี้ทำให้ภาพที่ใช้ทั้ง a) ดูดีและ b) โหลดได้เร็ว

การตรวจสอบขนาดรูปภาพ WordPress โดยละเอียด

มาดูตัวอย่างกัน เพื่อที่คุณจะได้เห็นว่าเกิดอะไรขึ้น 'เบื้องหลัง' เมื่อคุณอัปโหลดรูปภาพไปยัง WordPress สำหรับวัตถุประสงค์ของตัวอย่างนี้ เราจะอัปโหลดภาพที่มีชื่อว่า 'post1-feature-image' มีขนาด 294KB และวัดได้ 2089 × 1175 พิกเซล และเรากำลังจะทำเช่นนี้กับธีมเริ่มต้นของ WordPress Twenty Twenty ที่ใช้งานอยู่ (ธีมอื่นอาจเปลี่ยนแปลงวิธีการจัดการภาพโดย WordPress)

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

เน้นสีแดง คุณจะเห็นขนาดภาพเริ่มต้นของเรา ภาพขนาดย่อได้รับการครอบตัดเนื่องจากมีการตั้งค่าเป็นค่าเริ่มต้นผ่านการตั้งค่าสื่อ

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

รับเทคนิค!

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

WordPress กำลังดึงคำแนะนำจากไฟล์ชื่อ media.php ซึ่งอยู่ในโฟลเดอร์ wp-includes/ ไปที่บรรทัดนี้ 4861 แล้วคุณจะเห็นสิ่งต่อไปนี้:

 /** * Add additional default image sub-sizes. * * These sizes are meant to enhance the way WordPress displays images on the front-end on larger, * high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes * when the users upload large images. * * The sizes can be changed or removed by themes and plugins but that is not recommended. * The size "names" reflect the image dimensions, so changing the sizes would be quite misleading. * * @since 5.3.0 * @access private */ function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

post1-feature-image-768x432.jpg ถูกสร้างขึ้นจากขนาด 'medium_large' ซึ่งถูกเพิ่มใน WordPress เวอร์ชัน 4.4 เพื่อการรองรับรูปภาพที่ตอบสนองได้ดียิ่งขึ้น และสามารถเห็นได้บนอุปกรณ์พกพาต่างๆ มีการกำหนดไว้ในโฟลเดอร์ "wp-admin/includes" ในไฟล์ schema.php บรรทัด 522

 // 4.4.0 'medium_large_size_w' => 768, 'medium_large_size_h' => 0,

และขอใน ไฟล์ image.php ในบรรทัดที่ 86:

 } elseif ( 'medium_large' === $size ) { $max_width = intval( get_option( 'medium_large_size_w' ) ); $max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg และ post1-feature-image-1980x1114.jpg สร้างขึ้นจากธีม 'Twenty Twenty' ภายในไฟล์ functions.php ในบรรทัดที่ 53:

 /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

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

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

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

ลบขนาดรูปภาพ WordPress ที่ไม่จำเป็น

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

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

ลบขนาดรูปภาพเริ่มต้นของ WordPress

สามารถทำได้โดยง่ายโดยแก้ไข functions.php ของธีมและเพิ่มโค้ดต่อไปนี้:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); // Remove default image sizes here. function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

ในการทดสอบ ให้อัปโหลดรูปภาพใหม่ (ในตัวอย่างของเรา นี่เรียกว่ารูปภาพ post2-featured) ไปยังไลบรารีสื่อและรีเฟรชมุมมอง FTP ของโฟลเดอร์อัปโหลด

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

การลบขนาดภาพเก่าออกจากไลบรารีสื่อ

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

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

วิธีที่ยอดเยี่ยมในการจัดการกับไฟล์รูปภาพเก่าที่ไม่ต้องการเหล่านี้คือการใช้ปลั๊กอิน Force Regenerate Thumbnail ซึ่งจะผ่านเข้าไปและลบออกโดยอัตโนมัติ ติดตั้งและเปิดใช้งานปลั๊กอิน จากนั้นกดปุ่ม 'สร้างภาพขนาดย่อทั้งหมดใหม่' จากภายในเมนูปลั๊กอิน (เครื่องมือ->บังคับสร้างภาพขนาดย่อใหม่)

รีเฟรชมุมมองโฟลเดอร์สื่อ FTP ของคุณและคุณจะเห็นว่ารูปภาพ WordPress เริ่มต้นหายไป ดี!

อีกวิธีง่ายๆ ในการบรรลุผลลัพธ์เดียวกันสำหรับขนาดเริ่มต้นคือการเปลี่ยนค่าขนาดเป็น “0” จากภายใน การตั้งค่า > สื่อ ใน wp-admin จากนั้นคุณจะเห็นสิ่งนี้:

วิธีอื่นคือเปลี่ยน update_option( 'SIZE_w/h', 0 ); ภายใน functions.php อย่าลืมทำเช่นนี้กับไฟล์ functions.php ของธีมลูก เพื่อให้การเปลี่ยนแปลงของคุณไม่สูญหายเมื่อคุณอัปเดตธีมในภายหลัง

 update_option( 'thumbnail_size_h', 0 ); update_option( 'thumbnail_size_w', 0 ); update_option( 'medium_size_h', 0 ); update_option( 'medium_size_w', 0 ); update_option( 'large_size_h', 0 ); update_option( 'large_size_w', 0 );

เมื่อทำการอัปเดตนี้ คุณจะเห็นว่า ซึ่งจะแสดงค่าขนาดในการตั้งค่าสื่อ (จากภายใน WP Admin) ที่ได้รับการอัปเดตเป็น 0 แล้ว

ลบขนาดรูปภาพของธีมเพิ่มเติม

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

ในการดำเนินการนี้ เราจะใช้ init hook และฟังก์ชันหลัก remove_image_size คัดลอกโค้ดด้านล่างแล้ววางลงในไฟล์ functions.php ของคุณ หากคุณไม่ได้ใช้ธีม Twenty Twenty เนื่องจากเราอยู่ที่นี่ ให้แทนที่ชื่อ 'post-thumbnail' และ 'twentytwenty-fullscreen' ด้วยชื่อของธีมที่ใช้งานอยู่

 function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

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

เพิ่มขนาดรูปภาพที่คุณกำหนดเอง

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

เราจะตัดสินใจเลือกขนาดภาพที่เราต้องการได้อย่างไร

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

ลงทะเบียนรูปภาพใหม่ Sizes

วิธีง่ายๆ วิธีหนึ่งในการลงทะเบียนขนาดใหม่คือการใช้ฟังก์ชัน add_image_size() ในตัวที่ WordPress จัดเตรียมไว้ให้ โครงสร้างฟังก์ชันคือ:

 add_image_size( name, width, height, crop )

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

ลองทำสิ่งนี้จริงและตรวจสอบผลลัพธ์โดยใช้ภาพทดสอบที่มีขนาด 2089 × 1175 พิกเซล

ขั้นแรกให้เพิ่มรหัสนี้:

 add_image_size( 'new-post-thumb', 220, 180 );

การดำเนินการนี้จะสร้าง post2-feature-image-220x124.jpg แทน 220×180 ในโฟลเดอร์อัปโหลดของเราเนื่องจากไม่ได้ตั้งค่าการครอบตัด (เท็จ) สิ่งเดียวกันนี้จะเกิดขึ้นหากคุณแทรกสิ่งต่อไปนี้:

 add_image_size( 'new-post-thumb', 220, 180, false );

อย่างไรก็ตาม หากคุณตั้งค่าการครอบตัดให้เป็นจริงเช่นนี้ รูปภาพ post2-feature-image-220x180.jpg จะถูกบันทึก

 add_image_size( 'new-post-thumb', 220, 180, true );

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

 add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

อาร์เรย์ระบุตำแหน่งครอบตัด ค่าที่สามารถใช้ได้คือ:

สำหรับ x_crop_position: 'left', 'center' หรือ 'right'
สำหรับ y_crop_position: 'top', 'center' หรือ 'bottom'

ผลลัพธ์ในแต่ละกรณีจะเป็นคนละส่วนกับภาพต้นฉบับ นี่คือตัวอย่างบางส่วน:

อีกทางเลือกหนึ่งในการดำเนินการด้วยตนเองโดยการเพิ่มโค้ดในธีมของเราคือการใช้ปลั๊กอิน เช่น Simple Image Sizes กระนั้นก็ตาม การทำความเข้าใจว่าเกิดอะไรขึ้นเบื้องหลังจะยิ่งดี แม้ว่าคุณจะใช้ปลั๊กอินในลักษณะนี้ก็ตาม

บทสรุป

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