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

การแต่งเติมภาพกราฟิกในเว็บจะช่วยให้เว็บน่าดึงดูดใจ และทำให้ข้อความดูเด่นมากยิ่งขึ้น

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”)
– การซ้อนทับของภาพ (ดู interlaced GIF) ได้รับการสนับสนุนและเร็วกว่าในการพัฒนาในรูปแบบ GIF
– Gamma correction ยอมให้ “ปรับ” ภาพในขอบเขตของความสว่างของสีที่ต้องการโดยผู้ผลิตจอภาพเจาะจง
– ภาพสามารถได้รับการบันทึกด้วยการใช้ true color และในจานสี และรูปแบบสเกลเท่าที่ให้โดย GIF

ไฟล์ 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>
<html>
<head>
<title>การแทรกรูปภาพ</title>
</head>
<body>
<b>ตัวอย่างการแทรกรูปภาพ</b><br /><br />
<img src=”pic/f2.jpg” />ภาพแบบ JPEG <br /><br />
<img src=”pic/178.gif” />ภาพแบบ GIF<br />
</body>
</html>

อธิบาย

  • pic  คือ โฟลเดอร์เก็บรูปภาพ
  • f2 และ 178 คือ ชื่อของรูปภาพนั้น
  • .jpg และ .gif  คือ นามสกุลของรูปภาพ

ผลลัพธ์ที่ได้

1

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

 

3. การแทรกข้อความกำกับภาพ

การใส่ข้อความกำกบภาพ(Alternative text)จะเป็นการใส่ข้อความให้กับภาพเพื่อให้ทราบว่าภาพที่ใช้คือภาพอะไร ซึ่งจะปรากฏขณะกำลังโหลดภาพอยู่

รูปแบบของแอตทริบิวต์             <img src= “ชื่อไฟล์รูปภาพ” alt=“ข้อความกำกับภาพ”>

ตัวอย่างการใช้งาน

<DOCTYPE HTML>
<html>
<head>
<title>การแทรกรูปภาพ</title>
</head>
<body>
<b>การใส่ข้อความกำกับภาพ</b><br /><br />
<img src=”pic/f2.jpg” alt=”ภาพดอกไม้” /> <br /><br />
</body>
</html>

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

 

4. การปรับขนาดของภาพ

รูปแบบของ HTML     <img src= “ชื่อไฟล์รูปภาพ” width= “ความกว้าง” height=“ความสูง” />
ค่าที่กำหนดให้ใช้          กำหนดค่าเป็นจำนวนพิกเซลหรือเป็น %

ตัวอย่างการใช้งาน

<DOCTYPE HTML>
<html>
<head>
<title>การแทรกรูปภาพ</title>
</head>
<body>
<b>การปรับขนาดรูปภาพ</b><br /><br />
<img src=”pic/fl.jpg” />ภาพก่อนการปรับขนาด<br />
<img src=”pic/fl.jpg” width=”200″ />ภาพหลังปรับขนาดแล้ว
</body>
</html>

ผลลัพธ์ที่ได้

3

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

ชื่อแอตทริบิวต์                border
รูปแบบของ HTML     <img src=“ชื่อไฟล์รูปภาพ” border=“ความหนาของกรอบ” />
ค่าที่กำหนดให้ใช้           กำหนดค่าเป็นจำนวนพิกเซล

ตัวอย่างการใช้งาน

<DOCTYPE HTML>
<html>
<head>
<title>การแทรกรูปภาพ</title>
</head>
<body>
<b>การใส่กรอบรูปภาพ</b><br /><br />
<img src=”pic/fl.jpg” width=”200″ border=”2″ />ปรับความหนาเท่ากับ 2px
</body>
</html>

ผลัพธ์ที่ได้

4

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

ชื่อแอตทริบิวต์                  align
รูปแบบของ HTML       <img src=“ชื่อไฟล์รูปภาพ” align=“ตำแหน่งรูปภาพ” />
ค่าที่กำหนดให้ใช้            ตำแหน่งในการจัดวาง โดยกำหนด คือ
                             bottom     ให้ขอบล่างภาพเสมอขอบล่างข้อความ
left          จัดภาพอยู่ด้านซ้าย
middle     ให้กึ่งกลางภาพเสมอข้อความ
right         จัดภาพอยู่ด้านขวา
top          ให้ขอบบนภาพเสมอขอบบนข้อความ

ตัวอย่างการใช้งาน

<DOCTYPE HTML>
<html>
<head>
<title>การแทรกรูปภาพ</title>
</head>
<body>
<b>การจัดตำแหน่งรูปภาพ</b><br /><br />
<img src=”pic/f2.jpg” align=”bottom” />bottom bottom bottom bottom bottom<img src=”pic/f2.jpg” align=”top” />top top top top top top
<img src=”pic/f2.jpg” align=”middle” />middle middle middle middle middle<br /><img src=”pic/f2.jpg” align=”left” />left left left left left
<img src=”pic/f2.jpg” align=”right” />
</body>
</html>

ผลลัพธ์ที่ได้

5

7. การเพิ่มระยะระหว่างรูปภาพกับข้อความ

การเพิ่มระยะห่างของภาพสามารถกำหนดได้ 2แบบ คือ การกำหนดระยะห่างแนวตั้ง (Vertical space) โดยใช้แอตทริบิวต์ vspaceเป็นการกำหนดด้านบนกับด้านล่าง และการกำหนดระยะห่างแนวนอน (Honrizontal space) โดยใช้แอตทริบิวต์ hspaceเป็นการกำหนดด้านซ้ายและขวา

ชื่อแอตทริบิวต์                  vspace และ hspace
รูปแบบของ HTML      <img src=“ชื่อไฟล์รูปภาพ” vspace=“ระยะห่างขอบบนล่าง” hspace=“ระยะห่างขอบซ้ายขวา” />
ค่าที่กำหนดให้ใช้           ขนาดของความห่างขอบกำหนดเป็นพิกเซล

ตัวอย่างการใช้งาน

<DOCTYPE HTML>
<html>
<head>
<title>การแทรกรูปภาพ</title>
</head>
<body>
<b>การเพิ่มระยะห่างข้อความ</b><br /><br />
<img src=”pic/f2.jpg” vspace=”10″ hspace=”10″ />
การเพิ่มระยะห่างระหว่างขอบบนล่างและซ้ายขวา
</body>
</html>

ผลลัพธ์ที่ได้

6

8. การแสดงภาพเป็นพื้นหลัง

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

ชื่อแอตทริบิวต์                                background
ตำแหน่งของแอตทริบิวต์             อยู่ในแท็กเปิด <body>
รูปแบบของ HTML                    <body background=“ตำแหน่งของรูปภาพ”>

ตัวอย่างการใช้งาน

<DOCTYPE HTML>
<html>
<head>
<title>การแทรกรูปภาพ</title>
</head>
<body background=”pic/f2.jpg”>
<b>การแทรกรูปภาพเป็นพื้นหลัง</b>
</body>
</html>

ผลลัพธ์ที่ได้

7

9. การแสดงภาพเป็นพื้นหลังคงที่

นอกจากเราทำให้รูปภาพเป็นพื้นหลังแล้ว เราสามารถทำการกำหนดให้พื้นหลังไม่เลื่อนหรือไม่เปลี่ยนแปลงเวลาเลื่อนแถบเลื่อน (Scrollbar)ลงไปเรื่อย ๆ ได้ เพื่อเพิ่มลูกเล่นให้กับพื้นหลังของเรา

ชื่อแอตทริบิวต์                      bgproperties
ตำแหน่งของแอตทริบิวต์   อยู่ในแท็กเปิด <body>
รูปแบบของ HTML 
<body background=“ตำแหน่งของรูปภาพ” bgproperties= “fixed”>
ค่าที่กำหนดให้ใช้                   มีค่าเดียว คือ “fixed” การกำหนดให้ฉากหลังไม่เปลี่ยนแปลง

 

อ้างอิง

  • รูปภาพจากอิดิเตอร์ Notepad
  • รูปภาพประกอบสืบค้นจากอินเทอร์เน็ต
  • การสร้างเว็บและเพิ่มลูกเล่นด้วย HTML และ XHTML เขียนโดย นายประชา  พฤกษ์ประเสริฐ  สำนักพิมพ์ซิมพลิฟาย

ใส่ความเห็น