การแต่งเติมภาพกราฟิกในเว็บจะช่วยให้เว็บน่าดึงดูดใจ และทำให้ข้อความดูเด่นมากยิ่งขึ้น 1. รู้จักภาพกราฟิกชนิดต่าง ๆ ภาพกราฟิกมีรูปแบบต่าง ๆ ซึ่งแต่ละชนิดจะมีความแตกต่างของการใช้งานและขนาดไฟล์ในการจัดเก็บ จำนวนสี สำหรับการสร้างเว็บภาพส่วนใหญ่จะเป็นแบบ GIF (ไฟล์นามสกุล .gif) และ JPEG (ไฟล์นามสกุล .jpg) ทั้งนี้เราต้องเลือกใช้ภาพให้เหมาะสมและไม่ควรใหญ่เกินไปเพราะเวลาท่องอินเทอร์เน็ตจะทำให้โหลดเป็นเวลานาน ภาพชนิด GIF (Graphics Interchange Format) GIF (ออกเสียง “จิฟ” มาจาก Graphics Interchange Format) เป็นรูปแบบแฟ้มภาพและแฟ้มภาพเคลื่อนไหว รูปแบบ GIF ถูกออกแบบโดย Compuserve ซึ่งเป็นระบบเครือข่ายข่าวสารแบบออนไลน์ เพื่อให้บริการแลกเปลี่ยนกราฟิกในรูปแบบบิตแมป ไฟล์ GIF เป็น ไฟล์กราฟิกมาตรฐานที่ทำงานบนอินเทอร์เน็ต มักจะใช้เมื่อต้องการไฟล์ที่มีขนาดเล็ก จำนวนสีและความละเอียดของภาพไม่สูงมากนัก ต้องการพื้นแบบโปร่งใส ต้องการแสดงผลแบบโครงร่างก่อน แล้วค่อยแสดงผลแบบละเอียด ต้องการนำเสนอภาพแบบภาพเคลื่อนไหว ไฟล์ GIF มี 2 สกุล ได้แก่ GIF87 พัฒนาขึ้นในปี ค.ศ. 1987 เป็นไฟล์กราฟิกรุ่นแรกที่สนับสนุนการนำเสนอบนอินเทอร์เน็ต เป็นไฟล์ที่มีขนาดเล็กและแสดงผลสีได้เพียง 256 สี และกำหนดให้แสดงผลแบบโครงร่างได้ (Interlace) GIF89A พัฒนาขึ้นในปี ค.ศ. 1989 เป็นไฟล์กราฟิกที่พัฒนาต่อจาก GIF87 โดยเพิ่มความสามารถการแสดงผลแบบพื้นโปร่งใส ( Transparent) และการสร้างภาพเคลื่อนไหว (GIF Animation) ซึ่ง เป็นไฟล์กราฟิกที่มีความสามารถพิเศษโดยนำเอาไฟล์ภาพหลายๆ ไฟล์มารวมกันและนำเสนอภาพเหล่านั้นโดยอาศัยการหน่วงเวลา มีการใส่รูปแบบการนำเสนอลักษณะต่างๆ ( Effects) ในลักษณะภาพเคลื่อนไหว จุดเด่น : ขนาดไฟล์ต่ำ สามารถทำพื้นของภาพให้เป็นพื้นแบบโปร่งใสได้ ( Transparent) มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Interlace มีโปรแกรมสนับการสร้างจำนวนมาก เรียกดูได้กับ Graphics Browser ทุกตัว ความสามารถด้านการนำเสนอแบบภาพเคลื่อนไหว ( Gif Animation) จุดด้อย : แสดงสีได้เพียง 256 สี นามสกุลไฟล์ : .gif ชนิด MIME : image/gif รูปแบบ :bitmap image format (ที่มา : http://th.wikipedia.org/wiki/GIF) ภาพชนิด JEPG (Joint Photographic Experts Group) เจเพ็ก (JPEG) คือรูปแบบการบีบอัดแฟ้มภาพแบบสูญเสีย โดยยังให้เสียความละเอียดน้อยที่สุด รูปแบบแฟ้มสำหรับวิธีการนี้ได้แก่ .jpeg, .jpg, .jpe, .jfif, .jfi (อาจจะเป็นตัวเล็กหรือตัวใหญ่ก็ได้) รูปแบบแฟ้ม JPEG นี้ เป็นรูปแบบแฟ้มที่ใช้กันในการจัดเก็บและแลกเปลี่ยนรูปภาพบนเวิลด์ไวด์เว็บมากที่สุด โดยเฉพาะภาพถ่าย เนื่องจากสามารถเก็บความละเอียดสูงได้โดยใช้ขนาดไฟล์ที่เล็ก สามารถเก็บภาพสีได้หลากหลายระดับความแม่นยำของสี (Bit Depth) ความสามารถในการย่อขนาดไฟล์ของแฟ้ม JPEG นั้นเกิดจากการใช้เทคนิคการย่อขนาดภาพแบบการบีบอัดคงข้อมูลหลัก (Lossy Compression) หรือการบีบอัดแบบมีความสูญเสียทำให้ไม่นิยมใช้กับภาพที่เป็นลายเส้นหรือไอคอนต่าง ๆ เนื่องจากจะไม่ได้ประสิทธิภาพเท่าการเก็บในรูปแบบอื่น อย่าง PNG หรือ GIF การบีบอัดของ JPEG นั้นจะใช้เทคนิคที่เรียกว่า DCT (Discrete Cosine Transform) ซึ่งเป็นการแปลงค่าความสว่างของภาพให้อยู่ในรูปแบบเชิงความถี่ (Frequency Domain) ทำให้สามารถเลือกแทนค่าของสัมประสิทธิ์หรือในที่นี้คือแอมพลิจูดของค่าความถี่ต่างๆ ได้โดยอาศัยตัวแปรที่มีนัยสำคัญที่ต่างกันได้ การที่สามารถลดนัยสำคัญของค่าตัวเลขลงไปได้ทำให้สามารถลดขนาดของหน่วยความจำหรือขนาดไฟล์ที่ใช้เก็บตามไปได้ ชื่อ JPEG เดิมย่อมาจาก Joint Photographic Experts Group กลุ่มผู้พัฒนามาตรฐาน JPEG, JPEG 2000, และ JPEG XR จุดเด่น : สนับสนุนสีได้ ถึง 24 bit สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Progressive มีโปรแกรมสนับสนุนการสร้างจำนวนมาก เรียกดูได้กับ Graphics Browser ทุกตัว ตั้งค่าการบีบไฟล์ได้ ( compress files) จุดด้อย : ทำให้พื้นของรูปโปร่งใสไม่ได้ ข้อเสียของการบีบไฟล์ ( Compress File) กำหนดค่าการบีบไฟล์ไว้สูง ( 1 – 10) แม้ว่าจะช่วยให้ขนาดของไฟล์มีขนาดต่ำแต่ก็มีข้อเสีย คือ เมื่อมีการส่งภาพจาก Server ไปแสดงผลที่ Client จะทำให้การแสดงผลช้ามาก เพราะต้องเสียเวลาในการคลายไฟล์ ดังนั้นการเลือกค่าการบีบไฟล์ ควรกำหนดให้เหมาะสมกับภาพแต่ละภาพ นามสกุลไฟล์ :.jpeg, .jpg, .jpe, .jfif, .jfi (containers) ชนิด MIME : image/jpeg พัฒนาโดย : Joint Photographic Experts Group ชนิดของโค้ด : JPEG (ที่มา : http://th.wikipedia.org/wiki/Jpeg) ภาพชนิด PNG (Portable Network Graphics) PNG (อ่านว่า ปิง) (อังกฤษ: Portable Network Graphics) เป็นรูปแบบแฟ้มภาพที่พัฒนาขึ้นมาทดแทนรูปแบบแฟ้มแบบ GIF เพื่อแก้ปัญหาด้านสิทธิบัตร PNG ออกเสียงว่า ปิง แต่ไม่สะกดว่า ping เนื่องจากซ้ำกับโปรแกรมทางเครือข่ายที่ชื่อเดียวกัน ปัจจุบันมาตรฐานของ PNG คือรุ่น 1.2 โดยได้รับการอนุมัติเป็นมาตรฐานของทั้ง W3C และ ISO/IEC เรียบร้อยแล้ว ไฟล์ PNG เป็นไฟล์รูปแบบที่มีการใช้อย่างกว้างขวางบนอินเตอร์เน็ต รูปแบบ GIF เป็นของ Unisys และการใช้ซอฟแวร์จัดการภาพเกี่ยวข้องกับใบอนุญาตหรือพิจารณาทางกฎหมายอื่น (ผู้ใช้เว็บสามารถทำ ดู และส่งไฟล์ GIF อย่างเสรี แต่พวกเขาไม่สามารถพัฒนาซอฟต์แวร์สร้างขึ้นโดยปราศจากการยินยอมของ Unisys ในทางตรงข้าม รูปแบบ PNG ได้รับการพัฒนาโดยกรรมการอินเตอร์เน็ตที่แสดงออกมาว่าสิทธิบัตรฟรี สิ่งนี้ให้การปรับปรุงจำหนึ่งเหนือกว่ารูปแบบ GIF ไฟล์ PNG เหมือนกับ GIF คือบีบอัดโดยสูญเสียน้อย (หมายความว่าสารสนเทศภาพทั้งหมดได้รับการฟื้นฟูเมื่อไฟล์ได้รับการคืนการบีบ อัดระหว่างการดู ไฟล์ PNG ไม่ได้มุ่งไปสู่การทดแทนไฟล์ JPEG ซึ่งมีการสูญเสีย แต่ให้ผู้สร้างทำการเลือกระหว่างขนาดไฟล์และคุณภาพเมื่อบีบอัดไฟล์ภาพ ตามปกติ ภาพในไฟล์ PNG สามารถบีบอัดได้มากกว่า 10 – 30% มากกว่ารูปแบบ GIF ไลบรารีสำหรับ PNG คือ libpng ซึ่งเขียนด้วยภาษาซี ปัจจุบัน PNG สนับสนุนโดยเว็บเบราว์เซอร์เกือบทุกตัว แต่มีปัญหาด้านการแสดงผลใน อินเทอร์เน็ตเอกซ์พลอเรอร์ เวอร์ชัน 6 ซึ่งไม่สนับสนุนคุณสมบัติ alpha-channel รูปแบบ PNG รวมส่วนการทำงานต่อไปนี้ – ไม่เพียงแต่สามารถทำ 1 สีโปร่งใส แต่ยังสามารถควบคุมองศาของความโปร่งใส (สิ่งนี้เรียกว่า “opacity”) ไฟล์ PNG ต่างจาก GIF89a คือไม่สนับสนุนภาพเคลื่อนไหว เพราะไม่สามารถเก็บหลายภาพได้ โดย PNG ได้รับการอธิบายว่า “ขยายได้” ผู้พัฒนาซอฟต์แวร์จะสามารถพัฒนา PNG ได้หลากหลายที่สามารถเก็บหลายภาพและต้นร่างได้ จุดเด่น : สนับสนุนสีได้ถึงตามค่า True color (16 bit, 32 bit หรือ 64 bit)
สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียด ( Interlace) จุดด้อย : หากกำหนดค่าการบีบไฟล์ไว้สูง จะใช้เวลาในการคลายไฟล์สูงตามไปด้วย แต่ขนาดของไฟล์จะมีขนาดต่ำ ไม่สนับสนุนกับ Graphic Browser รุ่นเก่า สนับสนุนเฉพาะ IE 4 และ Netscape 4 ความละเอียดของภาพและจำนวนสีขึ้นอยู่กับ Video Card โปรแกรมสนับสนุนในการสร้างมีน้อย นามสกุลไฟล์ : .png ชนิด MIME : image/png พัฒนาโดย : W3C รูปแบบ : แฟ้มภาพ (ที่มา : widebase.net และ http://th.wikipedia.org/wiki/PNG) 2. การแทรกรูปภาพ รูปแบบของแท็ก HTML <img src= “ชื่อไฟล์รูปภาพ” /> ตัวอย่างการใช้งาน <DOCTYPE HTML> อธิบาย
ผลลัพธ์ที่ได้ **ก่อนจะนำภาพอะไรเผยแพร่บนอินเทอร์เน็ต ควรตรวจสอบลิขสิทธิ์ว่ามีหรือไม่ เพราะหากนำมาใช้โดยไม่มีการแจ้งเจ้าของภาพอาจจะมีปัญหาตามมาภายหลัง 3. การแทรกข้อความกำกับภาพ การใส่ข้อความกำกบภาพ(Alternative text)จะเป็นการใส่ข้อความให้กับภาพเพื่อให้ทราบว่าภาพที่ใช้คือภาพอะไร ซึ่งจะปรากฏขณะกำลังโหลดภาพอยู่ รูปแบบของแอตทริบิวต์ <img src= “ชื่อไฟล์รูปภาพ” alt=“ข้อความกำกับภาพ”> ตัวอย่างการใช้งาน <DOCTYPE HTML> การใส่ข้อความกำกับภาพช่วยให้บราวเซอร์บางตัวที่ไม่สามารถแสดงผลภาพได้ แต่เมื่อเอาเมาส์ไปวางจะปรากฏข้อความบรรยายได้อีกด้วย 4. การปรับขนาดของภาพ รูปแบบของ HTML <img src= “ชื่อไฟล์รูปภาพ” width= “ความกว้าง” height=“ความสูง” /> ตัวอย่างการใช้งาน <DOCTYPE HTML> ผลลัพธ์ที่ได้ 5. การใส่กรอบรูปภาพ ชื่อแอตทริบิวต์ border ตัวอย่างการใช้งาน <DOCTYPE HTML> ผลัพธ์ที่ได้ 6. การจัดตำแหน่งรูปภาพ ชื่อแอตทริบิวต์ align ตัวอย่างการใช้งาน <DOCTYPE HTML> ผลลัพธ์ที่ได้ 7. การเพิ่มระยะระหว่างรูปภาพกับข้อความ การเพิ่มระยะห่างของภาพสามารถกำหนดได้ 2แบบ คือ การกำหนดระยะห่างแนวตั้ง (Vertical space) โดยใช้แอตทริบิวต์ vspaceเป็นการกำหนดด้านบนกับด้านล่าง และการกำหนดระยะห่างแนวนอน (Honrizontal space) โดยใช้แอตทริบิวต์ hspaceเป็นการกำหนดด้านซ้ายและขวา ชื่อแอตทริบิวต์ vspace และ hspace ตัวอย่างการใช้งาน <DOCTYPE HTML> ผลลัพธ์ที่ได้ 8. การแสดงภาพเป็นพื้นหลัง การตกแต่งพื้นหลังอีกวิธีหนึ่งก็คือการตกแต่งพื้นหลังด้วยรูปภาพ ซึ่งการแตกแต่งด้วยภาพจะเป็นการนำเอาภาพเล็ก 1ภาพมาต่อกันสร้างสรรค์เป็นพื้นหลังที่สวยงาม โดยการเลือกภาพมาใช้ทำพื้นหลังควรเลือกภาพที่สามารถมองข้อความได้ง่าย สีไม่สับซ้อนจนเกินไป เพื่อทำให้เว็บของเราอ่านง่าย ชื่อแอตทริบิวต์
background ตัวอย่างการใช้งาน <DOCTYPE HTML> ผลลัพธ์ที่ได้ 9. การแสดงภาพเป็นพื้นหลังคงที่ นอกจากเราทำให้รูปภาพเป็นพื้นหลังแล้ว เราสามารถทำการกำหนดให้พื้นหลังไม่เลื่อนหรือไม่เปลี่ยนแปลงเวลาเลื่อนแถบเลื่อน (Scrollbar)ลงไปเรื่อย ๆ ได้ เพื่อเพิ่มลูกเล่นให้กับพื้นหลังของเรา ชื่อแอตทริบิวต์
bgproperties คลิปวิดีโอ |