เมื่อเรารู้ถึงข้อแตกต่างระหว่างในเรื่องของรูปแบบการเก็บไฟล์ สิ่งต่อไปที่เป็นสิ่งที่จำเป็นต้องเรียนรู้ต่อไปก็คือ การกำหนดขนาดและสีของรูปที่จะใส่ลงไป ทั้งนี้พร้อมกันนั้นสิ่งที่ต้องเรียนรู้ควบคู่กันไปก็คือ เรื่องของโปรแกรมที่นำมาใช้ในการเก็บรูปภาพที่สร้างขึ้นมาในรูปของ GIF และ JPEG
รูปแบบพื้นฐาน จากที่ได้กล่าวมาแล้วว่า โดยทั่วไปรูปแบบของไฟล์กราฟิกบนอินเตอร์เน็ตจะมีอยู่ 2 ประเภทใหญ่ ๆ คือ GIF ( Graphic Interchange Format ) เป็นรูปแบบการเก็บไฟล์ได้รับการพัฒนาโดย CompuServe ซึ่งถือได้ว่า GIF เป็นรูปแบบการเก็บไฟล์ที่ได้รับการพัฒนาขึ้นมาใช้เป็นตัวแรก และด้วยเหตุนี้จึงเป็นส่วนหนึ่งที่ทำให้ GIF เป็นรูปแบบการเก็บไฟล์แบบหนึ่งที่ได้รับความนิยมสูง ส่วนประเภทที่สองก็คือ JPEG ( Joint Photographic Expert Group) เป็นชื่อของคณะกรรมการที่ได้ทำการจัดระบบของการเก็บรูปกราฟิกให้เป็นมาตรฐาน อย่างไรก็ตาม ในทางเทคนิค JPEG เป็นแค่อักษรย่อที่แสดงรูปแบบของการเก็บ หรือบีบอัดไฟล์ให้มีขนาดเล็กลงเท่านั้น ซึ่งโดยแท้จริงแล้วไฟล์กราฟิกที่จะได้รับการเก็บให้อยู่ในรูปของ JPEG นี้ มีลักษณะของรูปแบบการเก็บไฟล์ ( File Format ) เป็น JFIF แต่ผู้ใช้ส่วนใหญ่มักจะใช้คำว่า JPEG แทนอยู่เสมอ อย่างไรก็ตาม บราวเซอร์รุ่นใหม๋ก็สนับสนุนรูปแบบไฟล์ทั้งสองแบบนี้ ( GIF และ JPEG ) แต่ในขณะที่บราวเซอร์รุ่นเก่ามักจะใช้ได้เฉพาะไฟล์แบบ GIF เท่านั้น
เมื่อไรจึงจะใช้ GIF รูปกราฟิกที่เหมาะกับการใช้ GIF เป็นรูปแบบของเก็บไฟล์ ควรเป็นรูปที่มีสีพื้นสีไม่ซับซ้อน ( Solid Flat Color ) และรูปนั้นควรมีลักษณะของขอบเส้นที่ชัดเจน เหมือนอย่างเช่น รูปตัวหนังสือ หรือรูปภาพประเภท Line Arts นอกจากนี้ GIF จะให้สีสันตรงกับความเป็นจริง หรืออาจกล่าวได้ว่า ในการเก็บไฟล์รูปแบบนี้ คุณสามารถควบคุมที่ไม่ให้ภาพที่ใส่ลงไปให้มีความคมชัดเสียจนเกินความเป็นจริง ซึ่งเราเรียกวิธีการนี้ว่า การ Dither ( Dither เป็นเทคนิคของการทำให้ภาพที่ปรากฏออกมา มีการแสดงสีออกมาเกินกว่าที่สีที่มีอยู่ในพาเล็ตต์ ( Palette - จานสี ) และด้วยการทำอย่างนี้ ให้เกิดการเปลี่ยนหน่วย ( Pixel ) ของสี จึงทำให้ภาพที่ตาคุณเห็นสีนั้นเป็นสีอื่น และทำให้ภาพที่ออกมามีความละเอียดและชัดมากขึ้น ซึ่งวิธีการที่กล่าวมานี้จะไม่สามารถทำได้ ถ้าใช้ไฟล์แบบ JPEG พร้อมกันนี้ ข้อดีอีกประการของ GIF คือการทำให้ภาพที่ต้องการใส่ลงไปให้เป็นภาพโปร่งใส กล่าวคือคุณสามารถสร้างภาพที่ไม่จำเป็นต้องมีรูปร่างที่เป็นสี่เหลี่ยม บนพื้นสี หรือแบ็กกราวนด์ที่ได้มีการกำหนดไว้ อย่างไรก็ตาม จุดด้อยของ GIF คือข้อจำกัดของจำนวนสี เนื่องจาก GIF ไม่สามารถแสดงภาพที่มีจำนวนสีเกิน 256 สีได้ ดังนั้นถ้าหากคุณต้องการใส่รูปที่มีจำนวนสีเกิน 256 สี คุณก็ควรใช้ JPEG แทนจะดีกว่า
ข้อควรคำนึงในการเลือกใช้ไฟล์แบบ GIF อีกข้อหนึ่ง ก็คือการที่ GIF นี้เป็นรูปแบบการเก็บไฟล์ที่สามารถใช้ทั้งบราวเซอร์รุ่นเก่า หรือรุ่นใหม่ดูได้ เมื่อเป็นเช่นนี้ ถ้าไซต์ที่คุณสร้างขึ้นมานั้น คุณคาดว่าจะมีผู้ชมที่ใช้บราวเซอร์หลายรุ่น มาชมแล้ว ไฟล์ GIF ก็น่าเป็นรูปแบบที่เหมาะสม
เมื่อไรควรเลือก JPEG รูปภาพประเภทที่เหมาะสำหรับการเลือกเก็บไฟล์แบบ JPEG ก็คือ รูปภาพที่เป็นรูปถ่าย ซึ่งก็รวมไปถึงรูปทีมีความละเอียดสูงด้วย การเก็บไฟล์ที่เป็นภาพถ่ายในรูปของ JPEG นี้มีข้อดีกว่าที่เก็บด้ยรูปแบบ GIF ก็เพราะการเก็บรูปด้วย JPEG จะมีขนาดของไฟล์ที่เล็กกว่าการเก็บด้วย GIF แต่ทั้งนี้การเก็บไฟล์ด้วย JPEG จะทำให้คุณภาพบางส่วนของรูปนั้นลดลง และนอกจากนี้ รูปที่เก็บอยู่ในแบบ JPEG ไม่สามารถทำให้เป็นแบบโปร่งแสง ( Transparent ) ได้เหมือนอย่าง GIF ได้ สำหรับในเรื่องของการแสดงจำนวนสี JPEG ได้ใช้ระบบการแสดงสีแบบ 24 บิตสี ( เหมือนจริง ) ซึ่งทำให้ภาพที่ออกมา มีสีสันที่สวยงามมากขึ้น โดยเฉพาะถ้าแสดงบนจอมอนิเตอร์ที่สามารถแสดงสีได้เป็นจำนวนมาก แต่อย่างไรก็ตาม แต่เมื่อมีการ Dither บนจอภาพ JPEG จะแสดงสีออกมาได้เพียง 8 บิตสี ( 256 สี ) เท่านั้น
ไม่ควรใช้ไฟล์ GIF กับ JPEG สลับไปมา ไม่ว่าคุณนำรูปแบบการเก็บไฟล์แบบไหนมาใช้ สิ่งที่คุณไม่ควรทำก็คือ ไม่ควรเปลี่ยนไฟล์จาก GIF ไปเป็น JPEG หรือในทางกลับกัน JPEG ไปเป็น GIF เพราะจะทำให้รูปภาพที่ออกมานั้น ไม่สามารถดูได้ หรืออาจดูได้ แต่ไม่สวยงาม และดูไม่รู้ว่าเป็นรูปอะไร
การนำเอาคุณสมบัติของ GIF และ JPEG มาใช้ เราสามารถนำเอาคุณสมบัติบางประการของรูปแบบการเก็บไฟล์ทั้งสองมาใช้ประโยชน์ได้ เช่น นำมาช่วยให้การดาวน์โหลดของรูปเร็วขึ้น หรือช่วยในการสร้างสรรค์ภาพเคลื่อนไหว ( Animation) แบบง่ายได้ การใช้เทคนิค Interlaced GIF มาช่วยให้แสดงภาพได้เร็วขึ้น Interlaced GIF เป็นเทคนิคที่มีการใช้มานานแล้ว ซึ่งคุณอาจพบการใช้เทคนิคแบบนี้อยู่บ่อย ๆ กล่าวคือ ภาพที่ใช้เทคนิคที่ว่านี้มักมีลักษณะดังนี้คือ ในตอนแรกภาพที่ถูกดาวน์โหลดมามักมีลักษณะที่เป็นภาพไม่ชัดหรือเบลอ ๆ และต่อจากนั้นก็จะค่อย ๆ ชัดขึ้นจนรูปภาพนั้นสมบูรณ์ โดยหลักการของการใช้เทคนิคแบบนี้มีอยู่ว่า การเก็บข้อมูลของรูปที่เป็นแบบ GIF จะมีการเก็บรายละเอียดของรูป โดยแบ่งรูปนั้นออกเป็นแถว ๆ เริ่มตั้งแต่ บน ลงล่าง โดยในแต่ละแถวนั้นจะมีขนาด 1 พิกเซล และด้วยวิธีการเก็บข้อมูลแบบนี้ จึงทำให้เราสามารถมาประยุกต์มาใช้ให้การดาวน์โหลดเร็วขึ้น โดยให้สั่งให้การเก็บข้อมูลแต่ละครั้งนั้น ให้มีการเก็บข้อมูลเป็นบรรทัดเว้นบรรทัดก่อนในตอนแรก และต่อจากนั้นก็ใช้วิธีเดียวกันเก็บข้อมูลส่วนที่เหลือจนหมดทั้งภาพ ด้วยเทคนิคที่ว่านี้ ทำให้การดาวน์โหลดรูปขนาดใหญ่ไม่เป็นสิ่งน่าเบื่อสำหรับผู้ใช้ และนอกจากนี้การใช้เทคนิคแบบนี้ ก็ยังเหมาะสำหรับผู้ใช้ที่มีการเชื่อมต่อระบบด้วยความเร็วของโมเด็มที่ช้า เพราะผู้ใช้สามารถรู้ได้ว่ารูปนั้นคืออะไร โดยไม่จำเป็นต้องรอจนกระทั่งภาพนั้นสมบูรณ์เสียก่อน
การใช้ภาพเคลื่อนไหว ( Animation ) ที่อยู่ในรูปของ GIF เราสามารถนำมาดัดแปลงเป็นภาพเคลื่อนไหว โดยภาพที่ถูกทำให้มีการเคลื่อนไหวได้นี้ เรียกว่า GIF89a โดยคุณสมบัติพื้นฐานรูปแบบของ GIF89a ช่วยให้นักสร้างเว็บสามารถสร้างรูปเล็กที่มีลักษณะของการเคลื่อนไหวแบบง่าย ๆ ได้ โดยภาพเคลื่อนไหวที่ปรากฏออกมาทางเว็บเพจก็เกิดจาก ภาพในรูป GIF ที่สร้างขึ้นด้วย GIF89a จะใช้เฟรมต่าง ๆ ในการสร้างภาพขึ้นมามากกว่า 1 ภาพขึ้นไป ( อาจเป็น 2 ภาพ หรือ 8 ภาพก็ได้ ) พร้อมกันนั้นทางโปรแกรมก็ให้เรากำหนด การหน่วงเวลา หรือระยะห่างของเวลาของการเปลี่ยนภาพจากเฟรมหนึ่งไปสู่อีกเฟรมหนึ่ง ( Interframe Delay ) ต่อจากนั้น เมื่อมีการโหลดรูปขึ้นมาดู ภาพในแต่ละเฟรมที่เราสร้างขึ้นมา ก็จะถูกโหลดมาจากแคชของบราวเซอร์ และเล่นวนซ้ำไปเรื่อย ๆ เป็นลูป ( Loop ) ตามที่คุณกำหนด อย่างไรก็ตาม การใช้รูปภาพที่มีการเคลื่อนไหวแบบที่ว่านี้ ไม่ควรนำมาใช้ในเว็บเพจมากจนเกินไป โดยเฉพาะหน้าเว็บเพจที่มีตัวหนังสือ ( Text ) อยู่มาก ยิ่งไม่ควรนำรูปเคลื่อนไหวแบบนี้เข้าไปใส่ เพราะทำให้ผู้ชมไม่สามารถแยกแยะได้ว่า สาระแก่นสารที่สำคัญของหน้านั้นอยู่ตรงไหน
เทคนิคใหม่ของ JPEG นี้มีชื่อว่า Progressive JPEG เป็นเทคนิคที่ใช้ในการแสดงภาพที่อยู่ในรูปของ JPEG แบบใหม่ โดยภาพที่แสดงออกมาในขั้นแรกจะเป็นภาพที่มีความละเอียดต่ำ ( Low Resolution ) และตามมาด้วยส่วนที่มีความละเอียดสูง ( High Resolution ) ตามมา ซึ่งเทคนิคอันนี้ก็คล้ายกับวิธีการของ Interlace GIF นั้นเอง และด้วยความที่เทคนิคที่ว่านี้เป็นเทคนิคใหม่ล่าสุด จึงทำให้เฉพาะบราวเซอร์รุ่นใหม่เท่านั้น ที่สามารถแสดงรูปภาพที่ใช้เทคนิคที่ว่านี้ได้
ขนาดของไฟล์รูป ในการออกแบบรูปภาพกราฟิก สำหรับใช้ในเว็บเพจหรือเว็บไซต์ โดยส่วนใหญ่ผู้ออกแบบจะพยายามที่ออกแบบให้รูปนั้น มีขนาดไฟล์ของรูป ( มิใช่ขนาดของรูป ) ให้เล็กที่สุดเท่าที่ทำได้ ทั้งนี้เนื่องจากขนาดไฟล์ของรูปนี้จะเป็นตัวกำหนดถึงขนาดของหน้าเว็บเพจและรวมไปถึงเวลาที่ใช้ในการดาวน์โหลดด้วย อย่างไรก็ตาม โดยปกติแล้ว รูปแบบกราฟิกได้รับการสร้างขึ้นมาให้อยู่ในรูปแบบของ GIF และ JPEG มักได้รับการบีบอัด ( Compress ) ให้มีขนาดเล็กลงอย่างอัตโนมัติ พร้อมกันนั้น นอกเหนือจากการบีบอัดอย่างอัตโนมัติของ GIF และ JPEG ก็ยังมีเทคนิคอื่น ๆ ที่สามารถนำมาใช้ลดขนาดของไฟล์ได้เช่นกัน
ลักษณะการบีบอัดไฟล์ GIF ในการย่อไฟล์ของ GIF มีลักษณะการลดขนาดโดยใช้ระบบการลดขนาดของไฟล์ของ LZW ( Lempel-Ziv Welch ซึ่งเป็นชื่อของคนต้นคิดระบบนี้ ) การย่อไฟล์ใน GIF ถือได้ว่าเป็นการลดขนาดของไฟล์ ที่จะไม่มีการสูญหายข้อมูลของไฟล์ระหว่างกระบวนการย่อ ( แต่ข้อมูลอาจสูญหายได้จากการลดจำนวนสีของรูป เพื่อทำให้ความเข้มของสีลดลง ) อย่างไรก็ตาม การใช้โปรแกรมในการย่อไฟล์ในรูปของ GIF โดยส่วนใหญ่ อัตราส่วนที่มักใช้ในการย่อไฟล์ของ GIF คือประมาณ 3:1
ลักษณะการบีบอัดไฟล์ JPEG เริ่มต้นจากการแบ่งรูปที่ได้รับการย่อออกเป็นสี่เหลี่ยมเล็ก ซึ่งรูปสี่เหลี่ยมเล็กที่ว่า ถูกแบ่งออกเป็นจำนวนมากหลาย ๆ รูป ต่อจากนั้นระบบก็จะทำการคำนวณทางคณิตศาสตร์ เพื่อกำหนดค่าของแต่ละรูปสี่เหลี่ยมเล็กที่เกิดจากการตัดแบ่งในตอนแรก การย่อไฟล์ใน JPEG ระบบจะลบสีที่มีความแตกต่างออกไป โดยสีที่ลบออกไปนี้มักเป็นสีที่มนุษย์ไม่สามารถแบ่งแยกถึงความแตกต่างได้ และด้วยเหตุนี้จึงทำให้การย่อไฟล์ของรูปที่มีสี ขาว-ดำ ใน JPEG ทำได้ไม่ดีเหมือนกับการย่อไฟล์ของรูปสี สำหรับอัตราส่วนที่ JPEG สามารถย่อไฟล์นั้นสูงถึง 50:1 โดยที่มีการสูญเสียคุณภาพของรูปเพียงเล็กน้อยเท่านั้น ( ปกติแล้ว ถ้าเป็นภาพ JPEG เมื่อนำมาใช้แบบปกติ เมื่อเทียบกับไฟล์ฟอร์แมตอื่น ๆ แล้ว ความแตกต่างจะไม่ปรากฏชัด ถ้าไม่ใช้งานที่มีความละเอียดสูง อย่างการเอาต์พุตด้วยเครื่องอิมเมจเซตเตอร์ )
การใช้สี อุปสรรคที่สำคัญในเรื่องการใส่สีลงไปในหน้าเว็บเพจไม่ได้อยู่ที่เรื่องของจำนวนสีที่เราใส่ลง แต่กลับไปที่เรื่องของการที่เราจะใส่สีลงไปอย่างไร เพื่อให้ภาพที่ออกมาชัดเจน และสีที่ใช้นั้นมีลักษณะที่ผสมกลมกลืนกันดี ซึ่งการทำเพื่อให้ผลงานออกมาโดยให้มีคุณสมบัติครบถ้วนตามข้องต้นนี้ เป็นสิ่งที่ทำได้ยากมาก ดังนั้นต่อจากนี้จะเป็นเรื่องของการใช้สีอย่างไร เพื่อให้ภาพที่ออกมาสมบูรณ์ที่สุด ระบบจานสีของ GIF จำนวนสีมีอยู่ใน GIF Palette มีถึง 256 สี ( หรือระบบสี 8 บิต ) ซึ่งในการใช้ระบบพาเล็ตต์ของ GIF นี้ เราควรทำให้ระบบ GIF Palette นี้ให้สอดคล้องกับสีที่มีอยู่ในพาเล็ตต์สีของเน็ตสเคปที่มี 216 สี ซึ่งพาเล็ตต์สีที่จะให้สี ขณะที่คุณทำงานตรงกับที่แสดงบนบราวเซอร์ หรือเรียกว่า 216 Brower-Safe Colors ( ในคราวต่อไปขอย่อว่า 216 สีของเน็ตสเคป ) เนื่องจากสีที่มีการใช้อยู่ใน GIF Palette นี้เราอาจถือได้ว่าเป็นส่วนหนึ่งของระบบพาเล็ตต์ 256 สีในแมคอินทอชและพีซีที่เราใช้กันอยู่ทั่วไป ดังนั้นแม้ว่าการทำให้ GIF Palette สอดคล้อง 216 สีของเน็ตสเคปนั้น อาจจะไม่ได้เป็นสิ่งที่มารับปรกันได้ว่า ผู้ใช้ที่เข้ามาในไซต์ของเรา จะเห็นสีที่เราใช้สร้างรูปหรือเพจเหมือนกันหมด ( เนื่องจาก จอแต่ละจอของผู้ใช้จะมีคุณสมบัติบางอย่างที่แตกต่างกัน ) แต่อย่างน้อยการทำเช่นนี้ คุณก็มั่นใจได้ว่าจะไม่มีการเพิ่มความเข้มของสี ( Dither ) ของคุณบนแพลตฟอร์มอื่น ๆ แน่นอน
เมื่อไรจึง Dither ไฟล์ GIF Dither เป็นเทคนิคของการเพิ่มสีของภาพให้แสดงออกมาเกินกว่าสีที่มีอยู่ในพาเล็ตต์ ดังนั้นในบางโอกาสคุณอาจต้องการ Dither ภาพของคุณเพื่อให้ได้ภาพที่สวยงามขึ้น อย่างไรก็ดี การ Dither ภาพที่เป็น GIF อาจก่อให้เกิดผลเสียตามมาอย่าง เช่น เมื่อใดคุณ Dither ภาพ สิ่งที่ตามมาก็คือขนาดไฟล์ของภาพก็จะขยายใหญ่ตามขึ้นมาด้วย ซึ่งเมื่อขนาดของไฟล์มีขนาดใหญ่ขึ้น ก็จะส่งผลไปถึงในเรื่องเวลาที่ใช้ในการดาวน์โหลด เมื่อเป็นเช่นนี้ เพื่อเป็นการป้องกันในเรื่องของขนาดไฟล์ที่ใหญ่เกินไป เราควรเลือกดูว่า รูปกราฟิกประเภทใดควร Dither และรูปประเภทใดไม่ควร อย่างเช่น ถ้าคุณสร้างรูปขึ้นมารูปหนึ่ง เพื่อใช้เป็นตัวโลโก้ หรือเป็นปุ่ม ( Buttom ) ไว้สำหรับคลิ้กทั้งสองสิ่งคุณคงไม่จำเป็นต้อง Dither เพื่อให้เกิดสีที่เข้มขึ้นเลย อย่างไรก็ดีคุณอาจจำเป็นต้องใช้การ Dither ในกรณีที่ภาพที่สร้างขึ้นมานั้น ไม่ได้มีความชัดเจน หรือเบลอ ๆ ( คุณอาจใช้ JPEG แทนก็ได้ )
216 สีของเน็ตสเคปจะมีประโยชน์มากในการที่คุณจะลดจากจำนวนสีในพาเล็ตต์ของ
GIF ( ซึ่งมี 256 สี ) ไปเป็นพาเล็ตต์ 216 สีของเน็ตสเคปนี้ อาจก่อให้เกิดปัญหาต่อภาพที่คุณสร้างขึ้นมาได้
เมื่อเป็นเช่นนี้ คุณอาจจะใช้วิธี adaptive palette ( สีที่อยู่นอกเหนือจาก
216 สี ) สีของเน็ตสเคปซึ่งหมายถึงวิธีการที่เลือกใช้พาเล็ตต์ที่ใช้กับสีที่มีอยู่ในรูปนั้น
แทนที่การเปลี่ยนสีที่ใช้อยู่ในรูปให้เข้ากับสีที่มีอยู่ในพาเล็ตต์ที่ใช้อยู่
ซึ่งผลของการทำอย่างนี้ อาจทำให้ภาพของคุณแสดงผลในระบบจอ 256 สี ดูไม่ดี แต่ภาพนี้ก็จะสามารถแสดงได้ดีในจอที่แสดงจำนวนสีมากกว่า
256 สี ซึ่งถึงแม้ว่าภาพจะออกมาแย่ แต่ก็ดีกว่าแย่ไปทั้งระบบ
