รูปภาพบน WordPress ไม่คมชัด ภาพเบลอ แก้ไขยังไง?

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

ทำไมรูปภาพไม่ชัด

เนื่องจาก WordPress เป็นระบบที่ปรับเปลี่ยนหน้าตา ตามอุปกรณ์ที่เปิดได้ (Responsive) เมื่อเราอัพรูปภาพขึ้นเว็บ 1 รูป ระบบ WordPress จะ Generate สร้างรูปภาพขึ้นมาเอง 3 ขนาดโดยอัตโนมัติ ได้แก่

• ขนาด Thumbnail
• ขนาด Medium
• ขนาด Large

ซึ่งแต่ละขนาดจะถูกกำหนดค่า กว้าง x ยาว  (dimensions in pixels) ไว้ไม่เท่ากันขึ้นอยู่กับ เวอร์ชั่นของ WordPress และธีมที่เราเลือกใช้ด้วย

อ่านเพิ่มเติม: รูปภาพ Thumbnail คืออะไร

ดูค่าเริ่มเริ่มต้น dimensions in pixels บนเว็บได้ที่ส่วนของ Setting > Media

เมื่อตัว WordPress มีการกำหนดค่า dimensions in pixels เริ่มต้นเอาไว้ ทำให้การแสดงผลบางจุด ค่าเริ่มต้นมันมีขนาดน้อยกว่า Layout ที่เราออกแบบไว้บนเว็บ ทำให้รูปภาพเรามันไม่คมชัดนั้นเอง

วิธีแก้ไข

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

การตั้งค่า dimensions in pixels

จากการทดสอบจากหลายๆ เว็บ ผมแนะนำให้คุณเพิ่มค่า dimensions ที่ส่วนของ Thumbnail และ Medium เพิ่มขึ้นเล็กน้อย ให้เป็นตามรูปนี้แทนครับ

แก้ปัญหารูปไม่ชัดด้วย Regenerate Thumbnails Plugin

สำหรับเว็บของใครที่มีการใส่รูปไปบนเว็บก่อนที่จะตั้งค่า media dimensions ตามรูปภาพด้านบน จะทำให้รูปภาพเก่าจะยังไม่ได้สามารถเปลี่ยน dimensions ตาม เราต้องใช้ปลั๊กอิน Regenerate Thumbnails ในการไปบังคับ ให้รูปภาพเก่าๆ เปลี่ยนขนาดรูป เพื่อให้มันคมชัดขึ้นนั้นเอง

วิธีการทำมีดังนี้

ติดตั้งปลั๊กอิน Regenerate Thumbnails ให้เรียบร้อย

จากนั้นให้ไปที่ Tools > Regenerate Thumbnails > แล้ว Regenerate Thumbnails for all Attachment

คลิกแค่จุดนี้ที่เดียว ก็เรียบร้อยแล้วสำหรับการแก้ขนาด dimensions ของรูปภาพในเว็บของเรา

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

แก้ปัญหาภาพในเนื้อหาไม่ชัด รูปเล็ก ไม่กว้างเต็มหน้าจอ

สำหรับบางคนที่เคยเจอปัญหา อัพโหลดรูปเพื่อจะมาเขียนบทความ แล้วรูปที่ปรากฎบนเว็บมีขนาดเล็ก ทั้งที่รูปต้นฉบับก็มีขนาดใหญ่

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

วิธีแก้ปัญหา

ทุกครั้งที่เราอัพโหลดรูปขึ้นไปบทความ ก่อนที่เราจะกด insert to post เราต้องเลือกขนาดรูปเป็น Full size เสมอครับ ดูรูปด้านล่างประกอบนะ

หรือหากที่หน้าเว็บของคุณออกแบบเว็บด้วย Page Builder ตอนที่คุณจะเพิ่ม element image ให้มองหา option ปรับแต่ง size ของรูป ให้เลือกเป็น original หรือ full size เสมอ

รูปทุกใบที่เราใส่ขึ้นเว็บ ต้องตั้งค่าเป็น full size หรือ original size เสมอนะ

ภาพหน้าปกบทความไม่ชัด

สำหรับปัญหาต่อมา หากใครเจอปัญหาภาพหน้าปกไม่ชัด แบบนี้

วิธีการแก้ปัญหา

ก็คือให้ไปตั้งค่า dimensions in pixels  ตามนี้

แล้วให้ใช้ปลั๊กอิน Regenerate Thumbnails สร้างภาพชุดขนาดใหม่ขึ้นมาด้วยการกด Regenerate Thumbnails for feature image only

ภาพหน้าปกสินค้าไม่ชัด

สำหรับปัญหาต่อมา หากใครเจอปัญหาภาพหน้าปกสินค้าไม่ชัด แบบนี้

ปัญหาจุดนี้ เกิดจากค่าเริ่มต้นของขนาด Thumbnail width ของProduct image มีขนาดเล็กเกินไป ให้เราไปแก้ค่านี้ใหม่ ให้มีขนาด 400 ขึ้นไป

จุดนี้เราต้องไปปรับที่ Customizing > WooCommerce > Product image แล้วตั้งค่าตามรูปได้เลยครับ

สรุป

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