มือใหม่ทำเว็บต้องรู้! วิธีเช็กขนาดรูปให้ "เป๊ะ" หน้าเว็บสวยกริบ ไม่เบี้ยว ไม่พัง

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

วันนี้ Hitztheme จะมาเผยความลับที่คนทำเว็บมืออาชีพใช้กัน นั่นคือการ "คุมขนาดรูปภาพ" ให้เท่ากันนั่นเองครับ

ทำไม "ขนาดรูปไม่เท่ากัน" ถึงทำให้หน้าเว็บเบี้ยว?

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

บนเว็บไซต์ก็เช่นกันครับ:

• Grid (ตาราง) เสียรูป: ในเลย์เอาต์ที่เป็นช่องๆ เช่น หน้าสินค้า หรือหน้าข่าวสาร ถ้าคุณใส่รูปที่มีความสูงไม่เท่ากัน กล่องข้อความด้านล่างจะถูกดันขึ้นดันลง ทำให้บรรทัดไม่ตรงกัน
• ปุ่มกดกระโดด: เมื่อรูปสูงไม่เท่ากัน ปุ่ม "อ่านต่อ" หรือ "สั่งซื้อ" ก็จะอยู่คนละระดับ ทำให้คนใช้งานคลิกยากและดูไม่เป็นมืออาชีพ
• Layout Shift: การที่รูปโหลดออกมาแล้วขนาดไม่พอดีกับช่องเดิม อาจทำให้หน้าเว็บ "วาร์ป" ไปมาขณะโหลด ซึ่งส่งผลเสียต่อคะแนน SEO ของ Google ด้วยครับ

วิธีเช็กขนาดรูปเดิมในเว็บ (เพื่อทำรูปใหม่มาเปลี่ยนให้เท่าเป๊ะ)

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

วิธีที่ 1: คลิกขวาเปิดแท็บใหม่ (ง่ายที่สุด)

1. คลิกขวาที่รูปภาพบนหน้าเว็บที่คุณต้องการเปลี่ยน
2. เลือก "Open image in new tab" (เปิดรูปภาพในแท็บใหม่)
3. เอาเมาส์ไปชี้ค้างไว้ที่แถบ (Tab) ด้านบนสุดของเบราว์เซอร์
4. คุณจะเห็นตัวเลข เช่น (800 × 600) นั่นคือขนาดกว้าง x สูง ที่คุณต้องทำรูปใหม่มาให้นั่นเองครับ

วิธีที่ 2: ใช้เครื่องมือ Inspect (สำหรับสายเป๊ะ)

1. คลิกขวาที่รูปเดิมบนหน้าเว็บ แล้วเลือก "Inspect" (ตรวจสอบ)
2. จะมีแถบโค้ดโผล่ขึ้นมา ไม่ต้องตกใจครับ! ให้มองหาแถบที่ไฮไลต์สีฟ้าๆ
3. เอาเมาส์ไปชี้ค้างไว้ที่ชื่อไฟล์รูปภาพ (หลังคำว่า src=)
4. ระบบจะแสดง Intrinsic size (ขนาดจริงของรูป) ให้เห็นทันทีครับ

3 กฎเหล็ก อัปรูปขึ้นเว็บยังไงให้สวยตลอดกาล

ใช้ขนาดเดียวกันทั้งแถว: เช่น ถ้าเป็นรูปประกอบข่าวในแถวเดียวกัน ต้องใช้ขนาดเดียวกันทุกรูป (เช่น 1200x800 px ทั้งหมด)

คุมอัตราส่วน (Aspect Ratio): หากรูปต้นฉบับกว้างยาวไม่เท่ากัน ให้ใช้โปรแกรมแต่งรูป (เช่น Canva หรือ Photoshop) มา Crop ให้ได้อัตราส่วนเดียวกันก่อนเสมอ เช่น 16:9 (แนวนอน) หรือ 1:1 (จัตุรัส)

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

สรุปเทคนิคจำง่ายๆ

"ขนาดเท่ากัน = เลย์เอาต์ตรงกัน = เว็บสวยดูแพง"

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

มีคำถามเรื่องการจัดการรูปภาพ ทักแชทสอบถามทีมงาน Hitztheme ได้ตลอดเวลานะครับ