เรื่องเกี่ยวกับ รูปที่อยู่บนหน้าเว็บ

เราก็จะมากล่าวถึง 6 ปัจจัยที่เกี่ยวข้องกับการสร้างรูปบนหน้าเว็บ

format หรือรูปแบบของไฟล์
คนที่ print รูปบนกระดาษมักจะไม่ค่อยใส่ใจถึงผู้อ่านที่ได้อ่านรูปนั้น โดยในแต่ละวัน มีรูปถูกเปิดอ่านจากคนที่ใช้ window, mac, linux, unix มากมายหลายล้านครั้ง ที่มีระบบคอมพิวเตอร์ที่แตกต่างกัน ซึ่งรูปบางแบบ ก็จะไม่สามารถแสดงผลได้ในบาง OS โดยปรกติเราจึงใช้ตัวที่มีความนิยมมากที่สุดคือ JPEG, PNG และ GIF นั้นเอง เพราะว่า browser ส่วนใหญ่ สามารถแสดงรุปใน 3 format นี้ได้

mindwebhost
สิ่งเพิ่มเติมที่ 5.1 รูปที่เป็นนามสกุล GIF (GIF format)ซึ่งจะมีการบีบอัดตามมาตรฐานของไฟล์ GIF

color หรือ สี ของรูป
มีคนกล่าวว่า ประมาณกลางปี 2006 ประมาณ 80% ของผู้ใช้งานเว็บ จะใช้ 24 หรือ 32 bit ของการแสดงผลสีของหน้าจอ และ 16% ใช้ 16 bit ประมาณ 1% ใช้ 8 bit ในปี 2002 มีจำนวนผู้ใช้ที่แตกต่างกันออกไป โดย 50% ใช้ 24 bit 40% ใช้ 16 bit และ 10 % ใช้ 8 bit โดยที่รุปแบบการแสดงผลท่ได้รับความนิยมนั่นคือ แบบ True color คือจะสามารถแสดงสีได้ทั้งหมด 16 ล้านสี

อย่างไรก็ดี การทำเว็บ เราอาจจะยังต้องคำนึงถึงคนที่ไม่ได้ใช้สีเยอะๆเลย เช่น คนที่ใช้ 8 bit เพราะว่าเค้าเหล่านั้น จะไม่เห็นสีเหมือนอย่างที่คุณเห็น แต่ถ้าจะไม่สนใจคนกลุ่มนี้เลย ก็อาจจะมองผ่านเลยไปก็ได้ (แต่ถ้าคนกลุ่มนี้คือลูกค้าก็ต้องระวังนิดนึง)

meewebfree product
สิ่งเพิ่มเติมที่ 5.2 รูปที่มีสีสันเยอะๆ และมากกว่า 256 สี โดยที่แสดงในรูปแบบ JPEG (JPEG Format)

size / resolution หรือ ขนาด และความละเอียด
การวัดความละเอียดของรูปในระบบ Digital นั้นเราจะวัดกันที่ pixel เช่นรูป 4 Megapixel สามารถแสดงผลได้เป็น กว้าง 1600 pixel และสูง 1200 pixel และสงสัยไหมครับ ว่าความใหญ่มันมผลอย่างไร ก็คือว่าถ้าเรา print ด้วยความละเอียด 200 ppi (Pixel Per inch หรือจุดต่อตารางนิ้ว) มันก็จะ print ได้รูปที่ประมาณ 8*6นิ้ว แต่ถ้าเอามาใช้บนเว็บมันก็จะเป็นรูปที่ใหญ่โตมาก โดยปรกติแล้วหน้าเว็บจะใช้ประมาณ 72-80 (แต่ช่วงใช้ได้ ตั้งแต่ 72-100) ก็จะได้รูปที่ ประมาณ 18*14 นิ้วเลยทีเดียว ซึ่งลองนึกขนาดเอานะครับ (46*36 เซ็นติมตร)

ดังนั้นเราจึงควรคิดถึงขนาดรูปก่อนที่จะนำมาลงในเว็บของเรา ว่าคนเข้าเว็บเรานั้น ส่วนใหญ่ใช้หน้าจอขนาดเท่าไร ซึ่งหน้าจอเล็กที่สุดนั่นก็คือ กว้าง 640 pixel และสูง 480 pixel (ถ้าไม่นับพวกอุปกรณ์พกพา) โดยเมื่อเรารู้ดังนี้แล้ว เราก็อาจจะออกแบบให้กว้างสัก 600 pixel เพื่อให้สามารถดูได้เต็มจดพอดี (หักลบส่วนที่เสียไปตมขอบกับ scroll bar)
ในขณะที่ความจริง คนที่เปิดเว็บ หรือใช้งาน computer โดยทั่วไปก็จะมีขนาดของหน้าจอที่ใหญ่กว่านั้น (เฉลี่ยอยู่ที่ 1024*768) ซึ่งบางเว็บที่เราไม่ไดห้กำหนดขนาดของหน้าเว็บ ให้ตายตัว (คือการกำหนดให้เป็น % ของหน้าจอ) อาจจะทำให้วัตถุไหลออกตามความกว้างที่กว้างขึ้นได้ ซึ่งนั่นจะทำให้เว็บเพี้ยนและเสียรูปไปได้ ดังนั้นการออกแบบเว็บก็ต้องคิดส่วนนี้ก่อนล่วงหน้าแล้วว่าต้องการให้แสดงผลออกมาเป็นอย่างไร

สำหรับ resolution นั่นเป็นคนละส่วนกับ ขนาด โดยเป็นตัวบอกความละเอียด ตัวอย่างเช่น หน้าจอขนาด 640 * 480 อาจจะมีความละเอียดที่ 72 หรือ 86 ppi เป็นต้น โดยหากยิ่งมี resolution ที่มากขึ้น ก็จะสามารถแสดงผลรายละเอียดได้ดียิ่งขึ้น แต่หากมี pixel ที่มากขึ้น หมายความว่ารูปจะมีขนาดใหญ่ขึ้นนั่นเอง

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

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

หรือทางที่สองในการทำให้เร็วขึ้นก็คือการบีบอัดข้อมูลนั่นเอง ทำให้ข้อมูลมีขนาดที่เล็กลง โดยที่มีกระบวนการบีบอัดรุปอยู่ 3 วิธี (นั่นจึงทำให้ได้ format ของรูปภาพหลักๆ 3 แบบ) ซึ่งจะมี LZW (สำหรับ GIF) ,JPEG และ PNG โดยที่ LZW จะเหมาะสำหรับการทำป้ายโลโก้ หรือรูปที่มีขนาดไม่ใหญ่ สีสันไม่เยอะเกินไปนัก หรือตัวหนังสือ รูปต่างๆ หรือว่ารูปขนาดใหญ่ที่มีสีเพียงสีเดียว หรือน้อยสี โดยปัจจัยที่มีผลก็คือ ถ้าคุณสามารถลดจำนวนของสีลงได้ LZW ก็จะทำให้มีขนาดเล็กลงไปได้อีก (แต่ก็ไม่เสมอไป) ส่วน JPEG จะเหมาะสำหรับรุปภาพโดยทั่วๆไป ที่มีความสวยงาม และมีขนาดใหญ่มีสีสันมากมาย

จากนั้นต่อมา ก็เกิดความเปลี่ยนแปลง เมื่อ LZW ได้ถูกจดสิทธิบัตร (ตั้งแต่ 2004) ดังนั้น ใครที่จะใช้การบีบอัดแบบ LZW จะต้องทำการจ่ายเงินเพื่อเป็นค่าลิขสิทธ์ด้วย (นี่ทำให้เป็นเหตุผลหลักในการพัฒนา PNG ขึ้นมา) และรูปภาพแบบ GIF ก็รองรับเพียงแค่ 256 สีเท่านั้น JPEG ดูจะได้เปรียบมากกว่าในเรื่องการเก็บ ซึ่งก็จะทำให้ขนาดเล็กลงไปมากพอประมาณ แต่อย่างไรก็ดี การเก็บให้มีขนาดน้อยลงนี้ก็จะทำให้เกิดความสมบูรณ์ของรูปภาพลงไปได้ โดยยิ่งบีบมาก ยิ่งมีไฟล์ขนาดเล็กก็ยิ่งเสียหายมาก และไม่มีทางในการเอาภาพส่วนที่เสียหลายกลับคืนด้วย ดังนั้นถ้าต้องการเก็บรูปภาพโดยที่ไม่ให้มีการเสียหายเลย ก็จะต้องเก็บในรูปแบบที่ไม่มีการบีบอัด (ตัวอย่างเช่น PSD, TIFF) แล้วเราจึงค่อยเอามาทำเป็น JPEG อีกที ทีหลัง

PNG นั้นมีการบีบอัดที่ดีกว่า LZW โดยไม่มีการสูญเสียในรูปแบบที่เหมือนกับ JPEG แต่ว่า มันก็ไม่รองรับการทำ animation หรือภาพเคลื่อนไหว แต่ว่า GIF สามารถทำได้ และมันยังใช้ไม่ได้ใน browser บางตัวอีกด้วย (แต่ว่าปัจจุบันทั้ง IE6, Safari และ Firefox ก็สามารถใช้งานได้ตามปรกติ)

Transparency หรือ ความโปร่งใส
ความโปร่งใสนี้มีเหตุผลอยู่สองอย่าง หนึ่ง คุณสามารถสร้างให้รูปหนึ่งไปซ่อนอยู่อีกหลังรูปหนึ่งได้ (โดยรูปด้านหน้าใสจึงมองทะลุไปด้านหลัง) สอง คือคุณสามารถเอาความโปร่งใส มาทำรุปที่ขอบเป็นมนๆ ได้ (ปรกติขอบจะหักมุมเป็นเหลี่ยม) ซึ่งทั้ง GIF และ PNG ทำได้ แต่ JPEG ทำไม่ได้

Animation หรือ ภาพเคลื่อนไหว
สิ่งหนึ่งที่ไม่สามารถทำได้บนกระกาษนั่นคือ รูปภาพที่เคลื่อนไหวนั่นเอง แต่ว่าบนเว็บนั้นเราสามารถทำได้และได้ทุกๆที่ โดยรูปเคลื่อนไหวนั้นจะถูกเก็บใน GIF format เพราะว่า JPEG และ PNG ไม่สามารถทำได้

No comments yet.
You must be logged in to post a comment.