BLOGINNOVATION

ความรู้ ประเภทของไฟล์ภาพ และ TAG คำสั่งที่ใช้ในการแทรกภาพบนเว็บไซต์

ไฟล์ภาพ สามารถแบ่งออกได้เป็น 2 ประเภทหลัก ดังนี้..

  1. ภาพแบบ บิตแมป (Bitmap) หรือ ราสเตอร์ (Raster) คือ ภาพที่เกิดจากหน่วยภาพเล็กๆ มารวมกันจนเป็นภาพใหญ่คล้ายจิ๊กซอร์ สามารถดูได้โดยการซูมภาพเข้าไป  กล่าวคือ ภาพเหล่านี้ยิ่งซูม (ขยาย) ภาพจะยิ่งแตก หรือคุณภาพของภาพจะต่ำลงจนดูไม่รู้เรื่อง ได้แก่ ไฟล์ภาพสกุล JPEG, TIFF, GIF และ PNG เป็นต้น
  2. ภาพแบบ เวคเตอร์ (Vector) คือภาพที่เกิดจากเส้นโค้ง, เส้นตรง และคุณสมบัติสีของเส้นนั้นๆ ที่เกิดจากการคำนวณทางคณิตศาสตร์ (ที่เรามองไม่เห็นด้วยตา) ไม่ว่าจะย่อหรือขยายกี่ครั้งภาพแบบนี้จะยังคมชัดเท่าเดิม .. (อ่านต่อ)ไฟล์ภาพ Vector เหล่านี้ได้แก่
    – ไฟล์ภาพสกุล .wmf (Clipart ที่เราไว้ตกแต่งใน Microsoft Office นั่นเอง)
    – ไฟล์ภาพสกุล .ai ใน Adobe Illustrator และไฟล์ภาพใน Macromedia Freehand

 

ตัวอย่างไฟล์ภาพแบบ บิตแมป (Bitmap) หรือ ราสเตอร์ (Raster)

 

ไฟล์ภาพประเภท bmp

ไฟล์ BMP (Bitmap)

มีนามสกุล .BMP  เป็นไฟล์ภาพประเภทที่เก็บจุดของภาพแบบจุดต่อจุดตรงๆ เรียกว่า ไฟล์แบบ บิตแมพ (Bitmap) ไฟล์รูปภาพมาตรฐานของระบบปฏิบัติการตระกูล Windows ไฟล์ประเภทนี้จะมีขนาดใหญ่มาก เพราะสามารถเก็บรายละเอียดของภาพได้อย่างสมบูรณ์ แต่เนื่องจากภาพแบบ Bitmap ใช้เนื้อที่ในการเก็บจำนวนมาก จึงได้มีการคิดค้นวิธีการเก็บภาพให้มีขนาดเล็กลงแต่ยังคงสามารถเก็บความละเอียดได้ใกล้เคียงจากเช่นเดิมขึ้นมาอีกหลายวิธีการ เช่น TIFF, JPEG, PNG และ GIF

จุดเด่น

  • ภาพมีความละเอียดที่สมบูรณ์ มีขนาดไฟล์ค่อนข้างใหญ่
  • เหมาะสำหรับใช้ทำเป็นภาพ Wall Paper บนเครื่องคอมพิวเตอร์
จุดด้อย

  • ต้องใช้เนื้อที่ในการเก็บจำนวนมาก เปลืองเนื้อที่บน Disk space และ Band width (Data transfer)
  • ไม่นิยมนำมาใช้ในการเขียนเว็บเพจ

 

 

ไฟล์ภาพประเภท jpg ไฟล์ภาพประเภท jpg

ไฟล์ JPEG หรือ JPG (Joint Photographic Experts Group)

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

จุดเด่น

  • สนับสนุนสีได้มากถึง 24 bit
  • สามารถกำหนดคุณภาพและตั้งค่าการบีบอัดไฟล์ภาพได้
  • ใช้ใน Internet (Worl Wild Web) มีนามสกุล.jpg
  • มีโปรแกรมสนับสนุนการสร้างจำนวนมาก
  • เรียกดูภาพได้ใน Graphic Browser ทุกตัว
จุดด้อย

  • ไม่สนับสนุนภาพเคลื่อนไหวเพราะไม่สามารถเก็บภาพหลายๆ ภาพไว้ด้วยกันได้

 

 

ไฟล์ภาพประเภท gif

ไฟล์ GIF (CompuServe Graphics Interchange Format)

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

เนื่องด้วยเป็นไฟล์ที่มีขนาดเล็ก เก็บรายละเอียดสีได้ไม่เกิน 8 bit มีความละเอียดของจุดสี (Pixel) สูงสุด 64,000 x 64,000 จุด จึงนิยมนำมาใช้บนเว็บไซต์ เหมาะสำหรับเว็บไซต์ที่ไม่เน้นเรื่องความละเอียดของสีรูปภาพมากนัก

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

[…โปรดติดตามวิธีทำภาพ  gif แบบง่าย เร็วๆ นี้ครับ]

จุดเด่น

  • เป็นที่นิยมมากที่สุดสำหรับภาพที่จะแสดงบน Web/Internet
  • มีขนาดเล็กมาก
  • สามารถทำพื้นให้เป็นแบบโปร่งใสได้ (Transparent/Opacity)
  • สามารถทำเป็นภาพเคลื่อนไหวบน WebPage ได้ โดยใช้เครื่องมือช่วยสร้างเช่น JAVA, Flash
  • มีโปรแกรมสนับสนุนในการสร้างจำนวนมาก
  • สามารถเรียกดูภาพได้ใน Graphic Browser ทุกตัว
จุดด้อย

  • แสงภาพได้เพียง 256 สีเท่านั้น
  • ไม่เหมาะสำหรับการนำเสนอภาพถ่ายหรืองานที่ต้องการความคมชัดระดับสูง

 

ไฟล์ภาพประเภท png

ไฟล์ PNG (Portable Network Graphics)

เป็นภาพที่เกิดจากการนำเอาคุณสมบัติของภาพ JPG และ GIF มาผสมผสานกันให้ได้ลักษณะเฉพาะ ถูกพัฒนาขึ้นมาแทนที่ไฟล์ GIF และไฟล์ JPG   สามารถใช้ได้กับทุกระบบปฏิบัติการ

จุดเด่น

  • เอาคุณสมบัติของ (JPEG+GIF) มาใช้คือ สีมากกว่า 256สีและโปร่งใสได้(Transparent)
  • PNG มีการบีบอัดข้อมูลโดยไม่เสียคุณภาพ
  • ทำให้โปร่งใสได้ (Transparency)และยังสามารถควบคุมองศาของความโปร่งใส (Opacity)ได้ด้วย
  • เก็บบันทึกภาพด้วยสีจริง (True Color) ได้เช่นเดียวกับตารางสี (Pallete) และสีเทา(Grayscale) แบบ GIF
จุดด้อย

  • ไม่สนับสนุนภาพเคลื่อนไหวเพราะไม่สามารถเก็บภาพหลายๆ ภาพไว้ด้วยกันได้

 

ไฟล์ TIFF หรือ TIF (Tag Image File Format)

มีนามสกุลเป็น .TIF  เป็นการเก็บไฟล์ภาพในลักษณะเดียวกับ ไฟล์แบบ BMP แต่ในไฟล์มี Tagged File ซึ่งเป็นสัญลักษณ์ที่ช่วยโปรแกรมควบคุมการแสดงภาพ เช่น การแสดงหรือไม่แสดงภาพบางส่วนได้ ภาพที่เก็บไว้ในลักษณะของ TIFF จึงมีความพิเศษกว่าการเก็บแบบอื่น สามารถใช้กับระบบปฎิบัติการหลายชนิด สามารถจัดเก็บภาพสี ขาวดำ และ gray scale  ภาพส่วนใหญ่จะเป็นภาพที่เกิดจากการสแกนรูปภาพต่างๆ และจะจัดเก็บเป็นไฟล์นามสกุล .TIF โดยแต่ละแบบจะมีจุดเด่นแตกต่างกันไป มักนิยมใช้ในงานกราฟิกการพิมพ์

 

ลองเปรียบเทียบความแตกต่างกันดูนะครับ

ไม่แน่ใจว่าจะสังเกตกันชัดไหม  แต่ที่แน่ๆ ขนาดไฟล์แตกต่างกันมากเลยทีเดียวครับผม

ไฟล์ภาพประเภท bmpไฟล์ภาพประเภท jpg ไฟล์ภาพประเภท jpgไฟล์ภาพประเภท gifไฟล์ภาพประเภท png

 


 

TAG คำสั่งการแทรกรูปภาพ

  1. การนำรูปภาพมาแสดงบนเว็บเพจ  ใช้คำสั่ง <img src = “ชื่อรูปภาพ.สกุล”>
  2. การกำหนดขนาดของรูปภาพ  ใช้คำสั่ง <img src = “ชื่อรูปภาพ” width = “ความกว้าง” height = “ความสูง”>
  3. การจัดตำแหน่งข้อความกับรูปภาพ  ใช้คำสั่ง <img align = “ตำแหน่ง”>
  4. การกำหนดเส้นขอบรูปภาพ  ใช้คำสั่ง <img border = “ขนาดของเส้นขอบ”>
  5. การปรับระยะห่างรูปภาพกับข้อความ  ใช้คำสั่ง <img vspace = “ระยะห่างแนวตั้ง” hspace = “ระยะห่างแนวนอน”>
  6. การกำหนดข้อความอธิบายรูปภาพ  ใช้คำสั่ง <img alt = “ข้อความ”>
  7. การกำหนดรูปภาพเป็นพื้นหลังทั้งเว็บเพจ  ใช้คำสั่ง <body background = “ชื่อไฟล์รูปภาพ.สกุล”>
  8. การกำหนดพื้นหลังเป็นรูปภาพทั้งตาราง  ใช้คำสั่ง <table background = “ชื่อไฟล์รูปภาพ.สกุล”>

(่ต้องการเผยแพร่บทความนี้..รบกวนอ้างอิง iiZZiiStudio.com ให้ด้วยครับ)

อ้างอิงข้อมูลเดิมจาก
http://htmlkimhanbinmiew.wordpress.com l https://comgp.wikispaces.com l http://kabinburischool.com

This site uses Akismet to reduce spam. Learn how your comment data is processed.

แชร์เลย