2.2 การแทรกรูปภาพ

การแทรกรูปภาพ

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

ภาพเวกเตอร์ (Vector)

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

ภาพบิตแมป (Bitmap)

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

ประเภทของรูปภาพที่ใช้สำหรับเว็บเพจ

การนำรูปภาพมาประกอบบนหน้าเว็บเพจ เช่น การแทรกภาพในเว็บเพจการใส่ภาพประกอบข้อมูลใส่เส้นกรอบเป็นรูปภาพและการแสดงภาพให้เป็นพื้นหลังของเว็บเพจ โดยชนิดของภาพที่จะนำมาประกอบบนเว็บเพจควรมีขนาดเล็กเพื่อนำไปแสดงผลบนเว็บเพจได้อย่างรวดเร็ว เช่น GIF, JPEG และ PNG ผู้พัฒนาเว็บควรทำความเข้าใจลักษณะการทำงานหรือรูปแบบ (Format) ประเภทของแฟ้มข้อมูลแต่ละชนิดเพราะแต่ละประเภทมีการบีบอัดข้อมูลและลักษณะการทำงานต่างกันควรนำมาใช้กับภาพที่เหมาะสม ดังนั้นรูปแบบของภาพที่เหมาะสำหรับการเขียนเว็บเพจด้วย ภาษา HTML แบ่งออกเป็น 3 ชนิด

GIF (Graphic Interchange Format)

เก็บข้อมูลภาพ ในลักษณะ 8 bit (256 สี) รูปแบบไฟล์ .gif สามารถเก็บภาพไว้ได้หลายภาพในไฟล์เดียว จึงสามารถนำภาพมาทำภาพเคลื่อนไหวได้ไฟล์ gif มีการบีบอัดข้อมูลแบบ LZW (Lamp Ziv-Welch)

JPEG (Joint Photographic Experts Group)

รูปแบบการบีบอัดแฟ้มภาพแบบให้เสียความละเอียดน้อยที่สุดรูปแบบไฟล์ได้แก่ . jpeg, .jpg เขียน เป็นตัวพิมพ์เล็ก หรือพิมพ์ตัวใหญ่ก็ได้เป็นรูปแบบแฟ้มที่ใช้ในการจัดเก็บ และแลกเปลี่ยนรูปภาพบนเวิลด์ไวด์เว็บมากที่สุด โดยเฉพาะภาพถ่ายจากกล้องดิจิติล เนื่องจากสามารถเก็บภาพที่มีความละเอียดสูงได้โดยใช้ขนาดไฟล์ที่เล็กสามารถเก็บภาพสีได้หลากหลายระดับความแม่นยำของสี (Bit Depth) ความสามารถในการย่อขนาดของไฟล์ JPEG เกิดจากการใช้เทคนิคการย่อขนาดภาพแบบ การบีบอัดคงข้อมูลหลัก (Lossy Compression)

PNG (Portable Network Graphics)

เป็นรูปแบบ แฟ้มภาพที่พัฒนาขึ้นมาทดแทนภาพรูปแบบไฟล์gif เพื่อแก้ปัญหาด้านสิทธิบัตร โดยภาพแบบ PNG ได้รับการอนุมัติเป็นมาตรฐานของทั้ง W3C และ ISO/IEC เป็นไฟล์รูปภาพที่มีการสนับสนุนระบบสี หลายรูปแบบทั้ง 8–Bit Indexed Color, 16 Bit Gray scale และ 24 Bit True Color มีการบีบอัด ข้อมูลแบบ Deflate หรือ Lossless คือ ไม่มีการสูญเสียบางส่วนของภาพ นอกจากนี้ PNG ยังมีระบบ ควบคุมค่าแกมม่า (Gamma) และความโปร่งใส (Transparency) ในตัวเอง

คำสั่งแทรกภาพในภาษา HTML

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

การจัดตำแหน่งรูปภาพ

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

Align = "left" เป็นการจัดตำแหน่งรูปภาพด้านซ้ายของข้อความ

Align = "right" เป็นการจัดตำแหน่งรูปภาพด้านขวาของข้อความ

Align = "center" เป็นการจัดตำแหน่งรูปภาพกึ่งกลางหน้าจอ

Align = "top" เป็นการจัดตำแหน่งรูปภาพด้านซ้ายของข้อความ โดยบรรทัดแรกของข้อความจะแสดงในระดับเดียวกันกับขอบด้านบนของรูปภาพ

Align = "middle" เป็นการจัดตำแหน่งรูปภาพด้านซ้ายของข้อความ โดยบรรทัดแรกของข้อความจะแสดงในระดับกึ่งกลางความสูงของรูปภาพ

Align = "bottom" เป็นการจัดตำแหน่งรูปภาพด้านซ้ายของข้อความ โดยบรรทัดแรกของข้อความจะแสดงในระดับเดียวกันกับขอบด้านล่างของรูปภาพ

การปรับขนาดรูปภาพ

การปรับขนาดของภาพเป็นการกำหนดให้รูปภาพบนเว็บเพจ แสดงผลที่มีขนาดตามที่กำหนดไว้โดยใช้แท็กคำสั่ง img src และใช้แอททริบิวต์ width กำหนดความกว้างของภาพ ใช้แอททริบิวต์ height กำหนดความสูงของภาพ

การกำหนดความกว้างและความสูงของรูปภาพ สามารถกำหนดได้ 2 รูปแบบ คือ

การกำหนดค่าที่แน่นอน โดยมีหน่วยเป็นพิกเซล (Pixel) เช่น width = "350" หมายความว่ากำหนดให้แสดงรูปภาพโดยมีความกว้างเท่ากับ 350 พิกเซล เป็นต้น การกำหนดวิธีนี้มีผลทำให้ขนาดของภาพด้านที่กำหนดมีขนาดคงที่ ไม่ว่าจะขยายหรือย่อส่วนการแสดงผลก็ไม่มีผลต่อ ขนาดของรูปภาพ
การกำหนดค่าตัวเลขเป็นสัดส่วนเปอร์เซ็น (%) โดยเปรียบเทียบกับส่วนการแสดงผล เช่น width = "60%" หมายความว่า กำหนดให้แสดงผลรูปภาพมีความกว้างเท่ากับ 60 % ของส่วนการแสดงผล เป็นต้น เมื่อมีการขยายหรือย่อส่วนการแสดงผลจะมีผลต่อขนาดของรูปภาพ สำหรับแอททริบิวต์ height ไม่สามารถกำหนดค่าตัวเลขเป็นสัดส่วนร้อยละได้ การกำหนดขนาดของรูปภาพ หากกำหนดเพียงด้านเดียว อีกด้านหนึ่งก็จะเปลี่ยนตามอัตราส่วนที่เท่ากัน แต่ถ้ากำหนด ขนาดทั้งสองด้านจะทำให้อัตราส่วนของภาพผิดเพี้ยนไปได้เช่น ภาพอาจจะกว้างเกินไป หรือสูง เกินไปนั่นเอง

การใส่ข้อความกำกับรูปภาพ

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

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

การใส่กรอบรูปภาพ

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