รูปภาพบน 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 เพิ่มขึ้นเล็กน้อย ให้เป็นตามรูปนี้แทนครับ

รูปไม่ชัด WordPress

แก้ปัญหารูปไม่ชัดด้วย 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 ตามนี้

รูปไม่ชัด WordPress

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

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

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

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

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

สรุป

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

ประชาสัมพันธ์

สำหรับท่านใดที่อ่านบทความนี้แล้ว สนใจการสร้างเว็บร้านค้าออนไลน์ด้วย WordPress + Woocommerce แบบมืออาชีพ ในวันที่ 21 - 22 สิงหาคม 2564 นี้ ผมได้เปิดคอร์สสอน Woocommerce Expert แบบกลุ่มเล็กๆ 1 รอบ สอนสดรอบละ 6 คน เพื่อให้ผู้เรียนได้ประโยชน์สูงสุด เรียนรู้และทำตามไปพร้อมๆ กันได้

รายละเอียดคอร์สเรียน

สร้างเว็บร้านค้าออนไลน์ Woocommerce expert

ค่าเรียน 9,500 บาท 21 - 22 สิงหาคม 2564
เวลาเรียน 10.00- 16.00 น.
เรียนกลุ่มเล็กรอบละ 6 คนเท่านั้น (ว่าง)
เราสอนด้วยธีม Flatsome Theme
(No.1 Best selling Woocommerce Theme 2020)
สถานที่เรียน Seatz Station
ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
จองที่นั่งเรียนผ่าน Lind ID : padveewebschool ได้เลยครับ

ทุกคอร์สเรียนรอบสอนสด ได้คอร์สเรียนออนไลน์แถมฟรีครับ

ทุกคอร์สเรียนรอบสอนสด
ได้คอร์สเรียนออนไลน์แถมฟรีครับ

สอบถามเพิ่มเติม ดูตารางเรียนรอบถัดไป

คอร์สเรียนนี้เหมาะกับใคร ?

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

คอร์สเรียนนี้ไม่เหมาะกับใครบ้าง ?

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

เรียนแบบตัวต่อตัว