การจัดการภาพ

เตรียมภาพที่ใช้ในเว็บเพจ

ภาพกราฟิกในคอมพิวเตอร์

           ในการสร้างเว็บเพจแต่ละนั้นถ้ามีการใส่ข้อความหรือตัวอักษรเพียงอย่างเดียวจะทำให้เว็บเพจนั้นไม่เป็นที่สนใจของผู้เข้าชม จึงต้องมีการแทรกรูปภาพเพื่อให้เว็บเพจสวยงามมากยิ่งขั้นและสื่อความหมายของเนื้อหาในเว็บเพจ ได้ดียิ่งขึ้น ภาพกราฟิกในคอมพิวเตอร์นั้นแบ่งออกเป็น 2 ประเภท คือ
          1. ภาพเวคเตอร์ (Vector) จะเป็นภาพที่ประกอบด้วยเส้นลักษณะต่างๆ เช่น เส้นตรง โค้ง และรูปทรงของเลขาคณิต จะถูกจัดเก็บในคำสั่งของโปรแกรมและค่าตัวเลข ซึ่งเวลาทำการแสดงผลจะมีการคำนวณทุกๆ ครั้ง ส่งผลให้ภาพลักษณะเช่นนี้มีความคมชัดและไม่แตกเมื่อมีการขยายให้ภาพมีขนาดใหญ่ขึ้น
          2. ภาพบิตแมป (Bitmap) จะเป็นภาพที่ประกอบจากจุดสีขนาดเล็กๆจำนวนมากเรียงเรียงตัวกันในลักษณะรูปแบบ ตาราง เรียกว่า พิกเซล(pixel) โดยในแต่ละภาพจะมีค่าและขนาดที่แน่นอน ถ้ามีการขยายเพิ่มมากขึ้น จากขนาดเดิมจะทำให้มองเห็นเป็นภาพหยาบหรือรูปภาพแตกอย่างชัดเจน
          ความละเอียดของภาพ (Resolution)
          Resolution คือ ค่าความละเอียดของภาพ ๆ หนึ่งซี่งกำหนดเป็นจำนวนเม็ดสี (pixels) ต่อหนึ่งหน่อย ความยาวของภาพ ตัวอย่าง เช่น หากภาพนั้นมีค่า Resolution = 150 pixels/inches แสดงว่าใน พื้นที่ 1 ตารางนิ้วของภาพนั้นประกอบไปด้วยเม็ดสีจำนวน 150 สี (Pixels)

สิ่งที่ต้องคำนึงถึงในการเลือกรูปภาพ

          การนำภาพกราฟิกมาประกอบเว็บเพจจะต้องคำนึงถึงสิ่งสำคัญ ดังนี้
          1. ความแตกต่างกันของเครื่องคอมพิวเตอร์ การนำรูปภาพมาใช่ในคอมพิวเตอร์จะต้องคำนึงถึงความแตกต่างของเครื่องคอมพิวเตอร์ ที่ผู้ใช้อินเทอร์เน็ตทั่วไปใช้กันอยู่บางเครื่องอาจจะเป็นคอมพิวเตอร์รุ่นเก่าประสิทธิภาพ การทำงานของเครื่องในหลายด้าน เช่น หน่วยความจำ หน่วยประมวลผลกลาง ขนาด จอภาพ ระบบปฏิบัติการ ฯลฯ
          2. ชนิดของเบราวเซอร์ เบราว์เซอร์ที่ผู้ใช้อินเทอร์เน็ตทั่วไปนิยมใช้เช่นกูเกิ้ลโครม(Chrome) อินเทอร์เน็ตเอ็กซ์พลอเลอร์ (IE) และ ไฟร์ฟอกซ์ (Firefox)็มีลักษณะการแสดงผลไม่เหมือนกันบางครั้งภาพที่ดูเหมาะสมกับเบราว์เซอร์หนึ่งอาจจะมีขนาดเล็กหรือใหญ่เกินไปกับอีกเบราวเซอร์หนึ่งก็เป็นไปได้ วิธีแก้ไขก็ต้องเลือกภาพที่มีขนาดปานกลางและทดลองแสดงผลกับเบราวเซอร์ต่างๆ เพื่อให้แน่ใจว่าใช้ได้ดีกับทุกๆ เบราว์เซอร์
          3. กำหนดหน่วยจัดมาตรฐานของภาพให้เป็นมาตรฐานเดียวกัน หน่วยจัดมาตรฐานสากลของรูปภาพสำหรับแสดงผลบนคอมพิวเตอร์ คือ พิกเซล(Pixel) ดังนั้น เมื่อกำหนดขนาดกับเว็บเพจควรกำหนดเป็นพิกเซลถ้าใช้หน่วยจัดเป็นเซ็นติเมตรหรือ มิลลิเมตรอาจจะทำให้ภาพมีขนาดไม่เป็นไปอย่างที่ต้องการเมื่อแสดงผลบนเว็บเพจก็ได้
          4. ความละเอียดของรูปภาพ ความละเอียดของภาพ (Resolution) เป็นการกำหนดให้ภาพมีขนาดความละเอียด ของเม็ดสีจำนวนจุดต่อนิ้ว (dpi) โดยปกติภาพบนเว็บเพจจะใช้เพียง 72 จุดต่อนิ้วก็เพียงพอเพื่อความรวดเร็วในการดาวน์โหลดไฟล์
          5. ขนาดของไฟล์ภาพขนาดของภาพก็คือความกว้างและความยาวของภาพซึ่งมีผลต่อการดาวน์โหลดข้อมูลภาพขนาดใหญ่ทำให้แสดงผลข้า ผู้ใช้อินเทอร์เน็ตส่วนมากจะไม่นิยมรอนาน

          วิธีการเลือกขนาดภาพให้เหมาะสมมีหลักการ ดังนี้
          1. ลดขนาดพิกเซลของภาพให้เล็กลงที่สุดเท่าที่จะทำได้โดยไม่ทำให้คุณภาพของภาพเสียไป
          2. ถ้าไม่สามารถหลีกเลี่ยงได้ต้องใช้ภาพใหญ่ เช่น หัวเว็บเพจภาพศิลปะ ฯลฯ ควรตัดภาพออกเป็นส่วนๆ ย่อยๆ เพื่อให้สามารถดาวน์โหลดทีละส่วนผู้ชมจะได้รอชมภาพเต็มได้โดยไม่เบื่อเสียก่อน
          3. แสดงข้อความก่อนภาพเป็นเทคนิคที่ทำให้ผู้อ่านได้อ่านเนื้อเรื่องไปพรางๆ ก่อนที่ภาพจะปรากฏขึ้นมา
          4. ใช้ภาพเดิมซ้ำๆที่มีอยู่แล้วเนื้อหาบางอย่างสามารถใช้ภาพเดิมประกอบได้ซึ่งเบราว์เซอร์จะจำภาพนั้นได้ช่วยให้การดาวน์โหลดเร็วขึ้น

การจัดเก็บภาพที่ใช้บนหน้าเว็บ

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

รู้จักกับไฟล์ภาพกราฟิกชนิดต่าง ๆ บนเว็บ

รายละเอียดของไฟล์ภาพกราฟิกชนิดต่างๆ ที่แตกต่างกันสำหรับการใช้งานบนเว็บ ดังนี้

          ฟอร์แมต GIF
             - ถูกพัฒนาโดย CompuServe ในปี 1980 เพื่อบีบอัดข้อมูลลายเส้น
             - มีข้อจำกัการใช้งานอยู่ที่ 256 สีเท่านั้น (8 บิต)
             - ใช้การบีบอัดแบบสร้างพาเลต (Palette) สีขึ้นใหม่ ทำให้ไม่สูญเสียคุณภาพของภาพ เพราะไม่มีการตัดสีภาพออก แต่เป็นลักษณะการแทนสี ภาพในแต่ละพิกเซลด้วยสีที่กำหนดขึ้นใหม่ ฉะนั้นคุณภาพไฟล์จะไม่เสีย
             - แสดงภาพโปร่งใส และภาพเคลื่อนไหวได้
             - Dither เป็นกระบวนการลดทอนสีที่ใช้ในภาพ โดยการแทนที่สีด้วยสีใกล้เคียง

          ฟอร์แมต JPEG
             - ถูกพัฒนาขึ้นโดย Joint Photographic Experts Group เพื่อจุดประสงค์ในการบีบอัดข้อมูลของไฟล์รูปภาพ มีจุดเด่นคือหลังการบีบอัด ยังสามารถใช้สีได้ถึง 16.7 ล้านสี ในขณะที่ GIF ใช้ได้เพียง 256 สีเท่านั้น
             - ไม่จำเป็นต้องกำหนดพาเลตสีเพื่อการใช้งาน เพราะรองรับข้อมูลสีได้มากถึง 16.7 ล้านสีอยู่แล้ว
             - ลักษณะการบีบอัด เป็นการลบข้อมูลส่วนที่ซ้ำซ้อนกันมากที่สุดออกจากภาพ ยิ่งมีการบีบอัดข้อมูลมากขึ้นเท่าไหร่ คุณภาพก็จะสูญเสียมากขึ้นเท่านั้น

          ฟอร์แมต PNG
             - ถูกพัฒนาโดย Thomas Boutell และ Tom Land วัตถุประสงค์ เพื่อการทำงานข้ามระบบ
             - บีบอัดข้อมูลได้ดีกว่า GIF 20-30 เปอร์เซ็นต์
             - สามารถเลือกการจัดเก็บข้อมูลได้ทั้งแบบ 8 บิต, 24 บิต และ 32 บิต ต่างกับ GIF
             - แสดงผลได้เร็วกว่าแบบ GIF เพราะภาพใน GIF จะเริ่มแสดงผลเมื่อดาวน์โหลดข้อมูลมาได้ 1 ใน 18 ส่วน ขณะที่ PNG เริ่มแสดงผล เมื่อข้อมูลถูกโหลดเข้ามา 1 ใน 64 ส่วน
             - ใช้กับภาพโปร่งใสได้

การแทรกภาพลงในเว็บเพจ

สามารถแทรกภาพประกอบให้กับหน้าเว็บเพจของเราได้ โดยการคลิกปุ่ม

(image) ในแท็บ Common หรือคลิกคำสั่ง Insert -> Image หรือกดคีย์ลัด <Ctrl> + <Alt> + <I> แล้วเรียกใช้ไฟล์ภาพที่เราจัดเก็บอยู่ในโฟลเดอร์ ชื่อ images มาใช้บนหน้าเว็บเพจได้ดังนี้

1 เลือกตำแหน่งวางภาพบนหน้าเว็บเพจ

2 ในแท็บพาเนล Insert เลือกกลุ่มเครื่องมือ Common คลิกที่เครื่องมือ

(Image) จะปรากฏหน้าต่าง Select Image Source

3 เลือกโฟลเดอร์ที่เก็บรูปภาพ

4 เลือกภาพที่ต้องการ

5 คลิกปุ่ม OK เพื่อตกลงการเลือกภาพ จากนั้นจะปรากฏหน้าต่าง Image Tag Accessibility Attributes

6 Alternate text ข้อความบรรยายภาพครับ ใช้ในกรณีที่ Web Browser ไม่สามารถโหลดภาพได้ จะแสดงข้อความนี้แทน (ไม่ใส่ก็ได้)
Long description พิมพ์เพื่อกำหนดการเชื่อมโยงของรูปภาพไปยังหน้าเว็บไซต์ (ไม่ใส่ก็ได้)

7 คลิกปุ่ม OK ภาพแสดงบนหน้าเว็บเพจ

ถ้าภาพที่เรานำมาแทรกไม่ได้เก็บอยู่ในโฟลเดอร์ที่เก็บเว็บไซต์เรา โปรแกรม Dreamweaver จะแนะนำ ให้คัดลอก (Copy) ภาพนี้ไว้ในโฟลเดอร์ดังกล่าว โดยให้คลิกปุ่ม ใช่ (Yes) และตั้งชื่อภาพนี้ ก่อนนำนำภาพเข้ามาเก็บไว้ในโฟลเดอร์เว็บไซต์

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

ครูอัครชัย โพนสัย

บทเรียนบนเครือข่ายอินเทอร์เน็ต
การสร้างเว็บไซต์ด้วย Dreamweaver CS6
กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี
โรงเรียนเมืองแกพิทยาคม
สังกัดสำนักงานเขตพื้นที่การศึกษามัธยมศึกษาเขต 32
สำนักงานคณะกรรมการการศึกษาขั้นพื้นฐาน
กระทรวงศึกษาธิการ

6 หมู่ 6 ต.เมืองแก
อำเภอสตึก จังหวัดบุรีรัมย์

mr.auckarachai@hotmail.com

090-360-3400

Your message has been sent. Thank you!