ในภาษา HTML สามารถนำภาพ ชนิด JPG และ GIF ซึ่งเป็นภาพนิ่งมาประกอบการนำเสนอเนื้อหา การทำความเข้าใจเกี่ยวกับคุณสมบัติของภาพชนิด JPG และ GIF การทำให้การแสดงผลรูปภาพมีการแสดงผลที่เร็วขึ้นนั้นด้วยการใช้เทคนิคการแบ่งรูปภาพ (Slicing) แสดงผลภาพเป็นแบบโปร่งแสง (Transparency) และการแสดงภาพหยาบสู่ละเอียด (Interlaced)
คุณสมบัติของภาพชนิด JPG ในภาษา HTML
การใช้เทคนิคการแบ่งรูปภาพ (Slicing)
เป็นการนำรูปภาพขนาดปกตินำมาตัดเป็นส่วน ๆ เพื่อช่วยโหลดรูปภาพในเวลาอันสั้น เนื่องจากภาพมีขนาดเล็กลงเพราะมีการซอยออกเป็นชิ้นเล็ก ๆ ในขนาดที่เหมาะสมซึ่งมีลักษณะเป็นจิ๊กซอว์ ดังภาพ
![]() |
![]() |
วิธีการสร้างภาพชนิด JPG ด้วยเทคนิคการแบ่งรูปภาพ
สามารถทำได้ด้วยโปรแกรมการจัดการรูปภาพในที่นี่ขอยกตัวอย่างโปรแกรม Photoshop ในการสร้างภาพโดยมีขั้นตอนดังต่อไปนี้
คุณสมบัติของภาพชนิด GIF ในภาษา HTML
คุณสมบัติพิเศษของภาพชนิด GIF นั้นสามารถแสดงผลภาพเป็นแบบโปร่งแสง (Transparency) และการแสดงภาพหยาบสู่ละเอียด (Interlaced) ช่วยในเรื่องการแสดงผลที่รวดเร็วจากจำนวนสีที่มีเพียง 256 สี
การใช้คุณสมบัติการแสดงภาพหยาบสู่ละเอียด (Interlacing)
เป็นภาพที่ปรากฎในลักษณะหยาบจากนั้นค่อย ๆ ปรากฎชัดขึ้นหรือมีความละเอียดครบถ้วนสมบูรณ์ตามลำดับซึ่งบราวเซอร์กำลังโหลดข้อมูลขึ้นมาการแสดงผลในลักษณะนี้จะทำให้ไม่รู้สึกถึงการรอคอยการแสดงผลของรูปภาพแต่การมองเห็นในเบื้องต้นจะยังไม่ชัดเจน
วิธีสร้างภาพชนิด GIF แบบ Interlaced
การสร้างภาพชนิด GIF แบบ Interlaced สามารถทำได้ด้วยโปรแกรมการจัดการรูปภาพในที่นี่ขอยกตัวอย่างโปรแกรม Photoshop ในการสร้างภาพมีขั้นตอนดังต่อไปนี้
การกำหนดภาพให้เป็นแบบโปร่งแสง (Transparency)
การกำหนดภาพให้เป็นภาพแบบโปร่งแสดงนั้น เป็นการกำหนดสีพื้นหลังให้มีลักษณะโปร่งแสงจะมีแต่ภาพวัตถุนั้น ๆ ที่จะแสดงผลได้จะถูกลบสีพื้นหลังสามารถนำไปวางบนตำแหน่งใดก็ได้บนหน้าเว็บเพจโดยไม่มีการแสดงสีพื้นของรูปภาพนั่นเอง
วิธีสร้างภาพชนิด GIF แบบ Transparency
การสร้างภาพชนิด GIF แบบ Transparence สามารถทำได้ด้วยโปรแกรมการจัดการรูปภาพ ในที่นี่ขอยกตัวอย่างโปรแกรม Photoshop ในการสร้างภาพ