หน้าเว็บที่มีสีสันที่ฉันเห็นในวันนี้ล้วนเป็นเพราะผลกระทบของภาพ ลองคิดดูว่าหน้าเว็บบนอินเทอร์เน็ตเป็นข้อความธรรมดาทั้งหมดซึ่งน่าเบื่อมากและคุณจะรู้ถึงความสำคัญของภาพในการออกแบบเว็บ สามารถแทรกรูปภาพในหน้า HTML รูปแบบรูปภาพที่ใช้กันทั่วไปสำหรับหน้าเว็บคือ JPEG และ GIF:
JPEG (กลุ่มผู้เชี่ยวชาญด้านการถ่ายภาพร่วม) เป็นรูปแบบไฟล์ที่ออกแบบมาโดยเฉพาะสำหรับภาพภาพถ่าย JPEG รองรับหลายล้านสี JPEG เป็นรูปแบบการสูญเสียคุณภาพซึ่งหมายความว่าข้อมูลภาพบางอย่างหายไประหว่างการบีบอัดซึ่งจะช่วยลดคุณภาพของไฟล์สุดท้าย อย่างไรก็ตามข้อมูลภาพถูกยกเลิกน้อยมากและจะไม่มีความแตกต่างอย่างมีนัยสำคัญในคุณภาพ
รูปแบบการแลกเปลี่ยนกราฟิก GIF เป็นรูปแบบที่ได้รับความนิยมอย่างมากในภาพเว็บ ในขณะที่มันมีเพียง 256 สี GIF ให้ยอดเยี่ยมเกือบจะไม่สูญเสียการบีบอัดภาพ และ GIF สามารถมีพื้นที่โปร่งใสและภาพเคลื่อนไหวหลายภาพ มันบีบอัดโดยการสแกนแถวพิกเซลในแนวนอนเพื่อค้นหาพื้นที่สีคงที่จากนั้นลดจำนวนพิกเซลในพื้นที่เดียวกัน ดังนั้น GIF มักจะเหมาะสำหรับการ์ตูนกราฟิกโลโก้กราฟิกที่มีพื้นที่โปร่งใสภาพเคลื่อนไหว ฯลฯ
การแทรกรูปภาพลงในหน้าสามารถทำให้สวยงามได้ มีแท็กเดียวเท่านั้นที่จะแทรกภาพนั่นคือแท็ก <Img> เมื่อแทรกภาพมันไม่เพียงพอที่จะใช้แท็ก <IMG> และจะต้องเสร็จสิ้นด้วยแอตทริบิวต์อื่น ๆ ดังที่แสดงในตารางต่อไปนี้
โดยการระบุเส้นทางของไฟล์แหล่งที่มาของภาพด้วยแอตทริบิวต์ SRC การแทรกภาพจะเสร็จสมบูรณ์
ระบุพา ธ ผ่านแอตทริบิวต์ SRC file_name เป็นพา ธ เพื่อแทรกภาพ
แทรกภาพผ่านแอตทริบิวต์ SRC ที่ทำเครื่องหมายด้วย <img>
01 <!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
02 <!-ตัวอย่างไฟล์: 9-1.htm->
03 <!-คำอธิบายไฟล์: แทรกรูปภาพ->
04 <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
05 <html>
06 <head>
07 <title> แทรกรูปภาพ </title>
08 </head>
09 <body>
10 <H1> ซอฟต์แวร์การออกแบบเว็บหลัก </h1>
11 <img src = 9-1.jpg>
12 ในปัจจุบันเทคโนโลยีหน้าเว็บได้เข้าสู่ขั้นตอนใหม่ ตอนนี้เว็บเพจจะไม่วางรูปภาพและข้อความที่น่าเบื่ออีกต่อไป ตอนนี้ผู้คนกำลังติดตามผลกระทบแบบไดนามิกและการโต้ตอบของหน้าเว็บ การออกแบบเว็บของ Macromedia สามซอฟต์แวร์ Musketeer Dreamweaver, Flash และ Fireworks เป็นตัวแทนที่โดดเด่นของการออกแบบเว็บแบบโต้ตอบ รุ่นล่าสุด MX 2004 ได้รับประโยชน์จากเวอร์ชันก่อนหน้าและรวมฟังก์ชั่นเพิ่มเติมซึ่งเหมาะมากสำหรับความต้องการของการออกแบบเว็บและการสร้างเว็บไซต์ <p>
13 </body>
14 </html>
บรรทัดที่ 11 แทรกไฟล์รูปภาพในรูปแบบ JPEG