พื้นฐาน HTML ตอน รูปภาพ Image (เพิ่มเติม)

html-image

ทิปเพิ่มเติมเกี่ยวกับรูปภาพที่คุณอาจยังไม่รู้ !

ก่อนหน้านี้ได้เขียนบทความแนะนำ เกี่ยวกับรูปภาพบนเว็บที่คนพัฒนาเว็บส่วนใหญ่มักใช้กัน ไม่ว่าจะเป็นไฟล์นามสกุล GIF, PNG, JPG เป้นต้น แต่สำหรับหัวข้อนี้จะเน้นเรื่องการแสดงผลบนเว็บเพจ ว่าเราจะมีเทคนิคในการแสดงผลอย่างไร อย่างไรให้รูปภาพที่มีขนาดใหญ่ แสดงบนหน้าเว็บเล็กลงได้ โดยไม่จำเป็นต้องลดลงแต่อย่างใด บทความนี้จะมาไขความกระจ่างให้ทุกๆ ได้รับทราบ หรือทิป เทคนิค รวมทั้งข้อดี ข้อเสียของแต่ละอย่าง

ขนาดรูปภาพบนเว็บเพจ เท่าไหร่ถึงเหมาะสม

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

  • ขนาดรูปภาพขนาดเล็ก หรือ หลายๆ คนมักเรียกว่า Thumbnail แนะนำว่า ไม่ควรเกิน 20 KB
  • ขนาดรูปภาพขนาดใหญ่ แนะนำว่า ไม่ควรเกิน 1 MB

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

ทิปการใส่ภาพบนเว็บ โดยไม่ต้องย่อ

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

ตัวอย่างการใช้คำสั่งในการย่อขนาดภาพ โดยไม่ย่อภาพจริง

  • <img src =”Mylogo.jpg” width = “100”>

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

ทิปเพิ่มเติม การใช้คำสั่ง width หรือ height

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

ข้อจำกัด การใช้คำสั่ง width เพียงอย่างเดียว

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

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