หน่วยที่ 5 การจัดการกราฟิกด้วยภาษา HTML : คุณสมบัติของภาพชนิด JPG และ GIF ในภาษา HTML

หมวด: ภาพเคลื่อนไหวภาษา HTML

ให้เรตสมาชิก: 0 / 5

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

              ในภาษา HTML สามารถนำภาพ ชนิด JPG และ GIF ซึ่งเป็นภาพนิ่งมาประกอบการนำเสนอเนื้อหา การทำความเข้าใจเกี่ยวกับคุณสมบัติของภาพชนิด JPG และ GIF การทำให้การแสดงผลรูปภาพมีการแสดงผลที่เร็วขึ้นนั้นด้วยการใช้เทคนิคการแบ่งรูปภาพ (Slicing) แสดงผลภาพเป็นแบบโปร่งแสง (Transparency) และการแสดงภาพหยาบสู่ละเอียด (Interlaced)

arrow2 คุณสมบัติของภาพชนิด  JPG ในภาษา HTML

            arrow3การใช้เทคนิคการแบ่งรูปภาพ (Slicing)

                   เป็นการนำรูปภาพขนาดปกตินำมาตัดเป็นส่วน ​​​​​​​​ๆ ​​​​​​​​​​เพื่อช่วยโหลดรูปภาพในเวลาอันสั้น เนื่องจากภาพมีขนาดเล็กลงเพราะมีการซอยออกเป็นชิ้นเล็ก ​​​​​​​​​​​​​ ๆ  ในขนาดที่เหมาะสมซึ่งมีลักษณะเป็นจิ๊กซอว์ ดังภาพ

 

slicing web 2 slicing web 22

       arrow3 วิธีการสร้างภาพชนิด JPG ด้วยเทคนิคการแบ่งรูปภาพ

                    สามารถทำได้ด้วยโปรแกรมการจัดการรูปภาพในที่นี่ขอยกตัวอย่างโปรแกรม Photoshop ในการสร้างภาพโดยมีขั้นตอนดังต่อไปนี้

 slicing1 2

 slicing2 2

 slicing3 2

arrow2 คุณสมบัติของภาพชนิด GIF ในภาษา HTML

               คุณสมบัติพิเศษของภาพชนิด​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ GIF ​​​​​​​​​​​​​​​​​​​​​​​​​​นั้นสามารถแสดงผลภาพเป็นแบบโปร่งแสง (Transparency) และการแสดงภาพหยาบสู่ละเอียด (Interlaced) ช่วยในเรื่องการแสดงผลที่รวดเร็วจากจำนวนสีที่มีเพียง 256 สี

 

               arrow3การใช้คุณสมบัติการแสดงภาพหยาบสู่ละเอียด (Interlacing)

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

 

ex interlacing 11

   

        arrow3 วิธีสร้างภาพชนิด GIF แบบ Interlaced

                การสร้างภาพชนิด  GIF  แบบ  Interlaced  สามารถทำได้ด้วยโปรแกรมการจัดการรูปภาพ​​​​​​​​​​​​​​​​​​​​​ในที่นี่ขอยกตัวอย่างโปรแกรม  Photoshop  ในการสร้างภาพมีขั้นตอนดังต่อไปนี้

interlced1 2

interlced3 2

  

       arrow3การกำหนดภาพให้เป็นแบบโปร่งแสง (Transparency)

               การกำหนดภาพให้เป็นภาพแบบโปร่งแสดงนั้น  เป็นการกำหนดสีพื้นหลังให้มีลักษณะโปร่งแสงจะมีแต่ภาพวัตถุนั้น  ​​​​​​​​​​​​​​​​ๆ  ​​​​​​​​​​​​​ที่จะแสดงผลได้จะถูกลบสีพื้นหลังสามารถนำไปวางบนตำแหน่งใดก็ได้บนหน้าเว็บเพจโดยไม่มีการแสดงสีพื้นของรูปภาพนั่นเอง

EX Transparency

 

         arrow3 วิธีสร้างภาพชนิด GIF แบบ Transparency

                การสร้างภาพชนิด GIF แบบ Transparence  สามารถทำได้ด้วยโปรแกรมการจัดการรูปภาพ ​​ในที่นี่ขอยกตัวอย่างโปรแกรม ​​​​​​​​​​​​​​​​​​​​​​​​Photoshop ในการสร้างภาพ

 transparency