3แทรกรูปภาพ

HTML

การแทรกภาพ

การแทรกภาพ

ไฟล์ภาพทน่ี ิยมนามาใช้บนเวบ็ เพจ

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

สาหรับในที่นี้ จะขอกล่าวถึงฟอร์แมตภาพทน่ี ิยมนามาใช้งานบน
อนิ เทอร์เน็ต อนั ประกอบด้วย

การแทรกภาพ

ฟอร์แมตภาพ JPEG (Joint Photographic Expert
Group)
ฟอร์แมตภาพ JPG ได้รับความนิยมสูงมาก รองรับจานวนสีทม่ี ี
ความแตกต่าง ได้มากถงึ 24 บติ (16 ล้านสี) ซ่ึงนอกจากจะแสดงผล
ภาพทด่ี แี ล้ว ยงั มคี วามจตุ า่ ดงั น้ัน จงึ มกั ถูกนาไปใช้เพ่ือ การ
บนั ทกึ ภาพถ่ายต่างๆ

การแทรกภาพ

ฟอร์แมตภาพ GIF (Graphics Interchange Format)

ฟอร์แมตภาพ GIF รองรับจานวนสีสูงสุดเพยี ง 8 บิต (265 สี) ดงั น้ันจงึ
เหมาะกบั ภาพพืน้ ฐานทัว่ ไป ทีม่ รี ะดับความละเอยี ดและสีต่างๆ จานวนไม่
มาก เช่น ภาพประเภทตราสัญลกั ษณ์ (Logo) ภาพการ์ตูนคลปิ อาร์ตหรือ
ภาพอ่ืนๆ ท่ีมีรายละเอยี ดสีไม่ซับซ้อน โดยฟอร์แมตภาพ GIF จดั เป็ น
ทางเลือกเพื่อการใช้งานท่ดี ี ซ่ึงนอกจากจะมคี วามจะตา่ แล้ว ยงั สามารถ
นามากาหนดพืน้ หลงั ของภาพให้เป็ นแบบโปร่งใส รวมถึงการสร้าง
ภาพเคล่ือนไหวอย่าง GIF Animation ได้

การแทรกภาพ

ฟอร์แมตภาพ PNG (Portable Network
Graphics)
เป็ นฟอร์แมตภาพทนี่ าคุณสมบัตเิ ด่นของ JPG และ GIF มา
รวมเข้าไว้ด้วยกนั รองรับสีทมี่ จี านวนมากถึง 24 บิต เหมือนกบั
JPG อกี ท้งั ยงั สามารถกาหนดพืน้ หลงั ให้เป็ นแบบโปร่งใสได้
เช่นเดยี วกบั GIF ในขณะเดยี วกนั กม็ คี วามจุตา่

การแทรกภาพ

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

การแทรกภาพ

การแทรกภาพ
รูปแบบ
<img src=”ช่ือไฟล์ภาพ” />
โดยชื่อไฟล์ภาพทร่ี ะบุ อาจกาหนด path ลงไปได้
เช่น <img src=”image/bull.jpg” />

การแทรกภาพ

การกาหนดขนาดภาพ
รูปแบบ
1.ภายในแทก็ <img> ให้พมิ พ์ width=”ค่าตวั เลข”
เพ่ือกาหนดความกว้างของภาพ

2.ภายในแท็ก <img> ให้พมิ พ์ height=”ค่าตวั เลข”
เพื่อกาหนดความสูงของภาพ

การแทรกภาพ

ค่าตวั เลขจะมีหน่วยเป็ น พกิ เซล (pixels) นอกจากนีย้ งั สามารถ
กาหนดเป็ นอตั ราร้อยละกไ็ ด้ เช่น

A <img src=”image/bull.jpg” />
B <img src=”image/bull.jpg” width=“200”
height=”100” />
C <img src=”image/bull.jpg” height=”100” />
D <img src=”image/bull.jpg” width=”100” />
E <img src=”image/bull.jpg” width=”30%” />

การแทรกภาพ

โดยที่
A คือภาพทม่ี ขี นาดตรงกบั ต้นฉบับ
B คือภาพทถี่ ูกกาหนดให้มีขนาด 200*100 พกิ เซล ผลที่ได้ทาให้ภาพไม่ได้
สัดส่ วน
C คือภาพท่ถี ูกกาหนดให้มคี วามสูง 100 พกิ เซล ส่วนความกว้างไม่ได้
กาหนด ปล่อยให้ปรับสัดส่วนอตั โนมัติ
D คือภาพทถ่ี ูกกาหนดให้มีความกว้าง 100 พกิ เซล ส่วนความสูงไม่ได้
กาหนด ปล่อยให้ปรับสัดส่วนอตั โนมัติ
E คือภาพท่ถี ูกกาหนดให้มขี นาดเป็ น 30% ของขนาดหน้าต่างบราวเซอร์

การแทรกภาพ

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

การแทรกภาพ

การระบุข้อความกากบั ภาพ (Alternative text)

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

การแทรกภาพ

รูปแบบ
ภายในแทก็ <img> ให้พมิ พ์ alt=”ข้อความกากบั ภาพ”
เช่น <img src=”image/bull.jpg” alt=”ภาพสุนัข
พนั ธ์บูลเทอร์เรีย” />

การแทรกภาพ

การกากบั ป้ายช่ือให้กบั ภาพ (Image Label)
ในกรณที ต่ี ้องการคาอธิบายภาพเม่ือมกี ารเล่ือนเมาส์ไปยงั ตาแหน่ง
ภาพดงั กล่าว กส็ ามารถทาได้ตามรูปแบบดงั นี้
รูปแบบ

ภายในแทก็ <img> ให้พมิ พ์ title=”ป้ายช่ือภาพ”
เช่น <img src=”image/bull.jpg” alt=”ภาพสุนัข
พนั ธ์ุบูลเทอร์เรีย” title=”บูลเทอร์เรีย-รูปร่างลกั ษณะและ
ประวตั ”ิ />

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

ในการจดั วางตาแหน่งภาพพร้อมกบั ข้อความทแี่ สดงผล จะใช้แอตตริบิวต์

align กากบั ไว้ในแท็ก <img>

รูปแบบ

ภายในแท็ก <img> ให้พมิ พ์ align=”?”

left จัดตาแหน่งภาพชิดซ้าย

right จัดตาแหน่งภาพชิดขวา

middle จดั ตาแหน่งภาพตรงกลาง

top จัดตาแหน่งภาพขอบบน

bottom จัดตาแหน่งภาพขอบล่าง

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

เช่น <img src=”image/bull.jpg” width=”15%”
align=”middle” />
หากต้องการเพม่ิ ช่องว่างหรือระยะห่างของภาพ ไม่ว่าจะเป็ นช่องว่าง
ระหว่างภาพกบั ข้อความ หรือช่องว่างระหว่างภาพด้วยกนั กต็ าม กส็ ามารถ
ทาได้ด้วยการระบุแอตตริบิวต์ hspace (ช่องว่างแนวนอน) และ
vspace (ช่องว่างแนวต้งั )
รูปแบบ
ภายในแท็ก <img> ให้พมิ พ์ align=”?”

การจดั ตาแหน่งภาพ
กรณีเพมิ่ ช่องว่างแนวนอน
ภายในแทก็ <img> ให้พมิ พ์ hspace =”ค่าตวั เลข”

กรณีเพมิ่ ช่องว่างแนวต้งั
ภายในแทก็ <img> ให้พมิ พ์ vspace =”ค่าตวั เลข”

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

<html>
<head> <title>พนั ธ์สุนัข ทไี่ ด้รับความนิยม</title>

</head>
<body>
<img src=”image/bull.jpg” width=”100” />
<img src=”image/bull.jpg” width=”100” hspace=”20” />
<img src=”image/bull.jpg” width=”100” vspace=”50” />
<img src=”image/bull.jpg” width=”100” vspace=”50”
hspace=”20” />
<h1>บูลเทอร์เรีย</h1>

</body>
</html>

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

การสร้างกรอบให้กบั ภาพ
รูปแบบ
ภายในแทก็ <img> ให้พมิ พ์ border=”ตวั เลขกากบั ขนาด
ความหนาของกรอบ”
เช่น <img src=”image/bull.jpg”
width=”15%” align=”left” border=”5” />

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

การนาภาพมากาหนดเป็ นฉากหลงั

หากต้องการให้ฉากหลงั เป็ นภาพ กส็ ามารถเพม่ิ แอตตริบิวต์
background ในแท็ก <body> ตามรูปแบบดงั นี้

รูปแบบ

ภายในแทก็ <body> ให้พมิ พ์ background=”=ชื่อไฟล์ภาพ”

เช่น <body

background=”image/bull_background.jpg”>
อย่างไรกต็ ามภาพท่ีนามาเป็ นภาพพืน้ หลงั ควรทาเป็ นสีจางๆ ไม่ให้กลืนหรือ
บดบังข้อมูลท่แี สดงผลอย่หู น้าเวบ็ ในขณะเดียวกนั หากภาพทนี่ ามาเป็ น
ภาพพืน้ หลงั มีขนาดเลก็ กว่าขนาดจอภาพท่ใี ช้งาน ผลท่ไี ด้คือ จะมีการนา
ภาพเหล่าน้ันมาเรียงต่อกนั

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

การจดั ข้อความและรูปภาพ

ในบางคร้ังหน่ึง <br clear=”left” /> การนาเสนอข้อมูล
พร้อมรูปภาพ อาจมรี ูปแบบทแี่ ตกต่างกนั ออกไป เช่น มภี าพพร้อม
คาอธิบายอยู่ 2 ส่วนด้วยกนั โดยภาพแรกจะถูกจดั ชิดซ้าย แล้วตาม
ด้วยข้อความ ส่วนภาพทส่ี องจะถูกจดั ชิดขวา จากน้ันจะมกี ารส่ง
ปัดบรรทดั เพื่อให้ข้อความส่วนทสี่ องนี้ ไปเริ่มต้นแสดงผลตรง
ตาแหน่งชิดขอบซ้าย ซ่ึงการกระทาดงั กล่าว จะต้องแทก็ <br />
พร้อมกบั แอตตริบิวต์ clear เข้าช่วย ซ่ึงเป็ นไปตามรูปแบบดงั นี้

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

รูปแบบ
<br clear=”left” /> ปัดบรรทัด เพื่อให้ข้อความถดั ไป
เริ่มต้นแสดงท่ี Left Margin
<br clear=”right” /> ปัดบรรทดั เพ่ือให้ข้อความถัดไป
เริ่มต้นแสดงที่ Right Margin

ตวั อยา่ งโปรแกรม การใสร่ ูปภาพประกอบในเว็บเพจ ตวั อย่างการแทรกรูปภาพ

โดยการกาหนดความกว้างของภาพ 120 พิกเซล ความสงู ของภาพ 120 พิกเซล

และใสค่ าอธิบายรูปภาพวา่ น่ีคือภาพทฉ่ี ันชอบ โดยแสดงก่งึ กลางจอภาพ

<HTML>

<HEAD>
<TITLE> การใสร่ ูปภาพประกอบในเว็บเพจ </TITLE>

</HEAD>

<BODY>

<CENTER>
น่ีคอื ภาพทฉี่ ันชอบ><BR>

<IMG SRC="flower.jpg" BORDER=0 WIDTH=120 HIGHT=120 ALT="นี่คือภาพท่ฉี นั
ชอบ"><BR>

ดอกกหุ ลาบไง<BR>

</CENTER>

</BODY>

</HTML>