องค์ประกอบห้าประการของการประมวลผลภาพที่สมบูรณ์แบบในการออกแบบเว็บไซต์
ผู้เขียน：Eve Cole
เวลาอัปเดต：2009-06-20 16:51:39
1. รูปแบบ: แนะนำให้ใช้รูปแบบ PNG สำหรับรูปภาพที่มีรูปแบบง่ายๆ ที่สร้างโดยคอมพิวเตอร์ (เช่น โลโก้และไอคอน) ในขณะที่รูปภาพที่มีสีสันสดใสจะต้องเป็น JPEG หากมีสีน้อยและไม่มีการไล่ระดับสี ควรใช้รูปแบบ GIF
GIF เป็นรูปแบบรูปภาพบนเว็บที่ใช้บ่อยที่สุด GIF เก็บสีได้มากถึง 256 สีและใช้งานได้กับภาพเกือบทั้งหมด ยกเว้นภาพถ่าย นอกจากนี้ยังมีความสามารถในการสร้างภาพเคลื่อนไหวและภาพที่โปร่งใสอีกด้วย
รูปแบบ PNG ค่อนข้างใหม่และเป็นรูปแบบที่แนะนำโดย W3C PNG-8 สามารถมีสีได้สูงสุด 256 สี ซึ่งเทียบได้กับ GIF; PNG-24 รองรับโหมด RGB ซึ่งสามารถแสดงสีใดก็ได้ที่มีคุณภาพสูงกว่า PNG-32 เพิ่มช่องอัลฟ่าตาม PNG-24 ซึ่งสามารถตั้งค่าแบบโปร่งใสได้
JPEG สามารถบันทึกสีได้ประมาณ 16.7 ล้านสี และมักใช้ในการบันทึกรูปภาพ แต่นอกเหนือจากนั้น JPEG ก็แทบจะไม่เคยใช้เลย หากรูปภาพมีสีน้อยกว่า 256 สี หรือมีพื้นที่สีทึบขนาดใหญ่ JPEG จะทำงานได้ไม่ดี - ขนาดไฟล์อาจเพิ่มเป็นสองเท่าเพื่อให้ได้ภาพคุณภาพสูง
เมื่อเลือกรูปแบบภาพ คุณควรพิจารณาขอบเขตการใช้งานอย่างครอบคลุม เช่น สี ความโปร่งใส ภาพเคลื่อนไหว ฯลฯ ตามรายละเอียดด้านล่าง สามารถเปรียบเทียบพารามิเตอร์ต่างๆ ได้ผ่านวิซาร์ดการส่งออกของ Photoshop หรือ Fireworks เกณฑ์การคัดเลือกคือขนาดไฟล์ควรมีขนาดเล็กที่สุดเท่าที่เป็นไปได้โดยยังคงรักษาคุณภาพของภาพที่ยอมรับได้
2. รูปภาพที่สร้างสีควรใช้โหมด RGB ไม่ใช่โหมด CMYK ในการพิมพ์ ไม่ต้องกังวลเรื่องสีที่ปลอดภัยของเบราว์เซอร์ เนื่องจากแทบไม่มีใครใช้จอภาพ 8 บิตอีกต่อไป การเลือกสีควรอ้างอิงถึงมาตรฐานที่เป็นเอกภาพ เช่น ระบบการระบุตัวตนด้วยภาพ (VI) จำนวนและเอฟเฟกต์ของสีเป็นปัจจัยสำคัญในการกำหนดรูปแบบภาพ ตัวอย่างเช่น การไล่ระดับสีมักจะสร้างสีจำนวนมาก หากบันทึกเป็น GIF การบิดเบือนจะเกิดขึ้นและขนาดไฟล์ก็จะเพิ่มขึ้นอย่างมากเช่นกัน ควรพิจารณาใช้รูปแบบ PNG-24, PNG-32 หรือ JPEG
3. ขนาด รูปภาพที่สร้างโดยใช้เครื่องมือสร้างเวกเตอร์มักจะเหมาะสำหรับการบันทึกในรูปแบบ PNG และควรกำหนดขนาดในเครื่องมือวาดภาพเวกเตอร์ เมื่อแปลงเป็นบิตแมปแล้ว จะไม่สามารถปรับขนาดได้ง่าย (โดยเฉพาะอย่างยิ่งไม่ควรขยาย) ). เป็นที่น่าสังเกตว่าไฟล์ PNG ที่สร้างในดอกไม้ไฟมีข้อมูลที่แก้ไขได้ เช่น เลเยอร์ และเส้น รูปร่าง และข้อความในนั้นเป็นกราฟิกแบบเวกเตอร์ทั้งหมด การใช้รูปภาพดังกล่าวกับเว็บเพจควรดำเนินการเอาต์พุตเพื่อบีบอัดขนาดไฟล์ก่อน และรูปภาพ PNG เอาต์พุตจะถูกแปลงเป็นบิตแมปด้วยเนื่องจากข้อมูลที่แก้ไขได้สูญหาย ดังนั้นการปรับขนาดภาพควรเสร็จสิ้นก่อนการดำเนินการเอาท์พุต บิตแมปไม่ได้ปรับขนาดเพื่อให้แน่ใจว่าโครงร่างและการไล่ระดับสีของรูปภาพมีความชัดเจนเพียงพอ
สำหรับบิตแมปและรูปภาพที่มีอยู่ คุณควรใช้ Photoshop และซอฟต์แวร์อื่นๆ เพื่อปรับขนาดก่อนที่จะแทรกลงในหน้าเว็บ แทนที่จะใช้แอตทริบิวต์ความกว้างและความสูงในภาษา HTML เพื่อเปลี่ยนขนาดรูปภาพ การใช้ภาษา HTML โดยตรงเพื่อควบคุมขนาดภาพอาจทำให้ภาพบิดเบี้ยวอย่างรุนแรง
โดยทั่วไป รูปภาพที่วางบนหน้าเว็บควรถูกควบคุมให้มีขนาดค่อนข้างเล็ก หากผสมกับข้อความ ความกว้างควรอยู่ที่ประมาณ 300 พิกเซล แม้ว่าจะปรากฏเพียงลำพัง แต่ความกว้างก็ควรน้อยกว่า 600 พิกเซล ส่วนความสูงก็เหมาะสมที่จะไม่เกินหนึ่งหน้าจอ
4. GIF และ PNG แบบโปร่งใสรองรับทั้งความโปร่งใส แต่ในรูปแบบที่แตกต่างกัน GIF เพียงตั้งค่าสีหนึ่งหรือหลายสีให้โปร่งใสโดยสมบูรณ์ โดยไม่คำนึงถึงความโปร่งใสของสีไล่ระดับสีที่อยู่ติดกัน ซึ่งหมายความว่าหากสีพื้นหลังเปลี่ยนแปลงไปอย่างมาก (หรือมีสีตัดกันหลายสี) การเปลี่ยนไปใช้ส่วนที่โปร่งใสจะไม่ราบรื่นและจะมีเส้นแบ่งที่ชัดเจน หากคุณต้องการสร้าง GIF แบบโปร่งใส จำเป็นต้องตั้งค่าสีพื้นหลังของแคนวาสให้เหมือนกับ (หรือใกล้เคียงกับ) สีพื้นหลังของเอฟเฟกต์เป้าหมาย PNG ไม่มีปัญหานี้และสามารถตั้งค่าให้โปร่งแสงได้
อย่างไรก็ตาม IE6 ไม่สามารถแสดง PNG แบบโปร่งใสได้อย่างถูกต้องตามค่าเริ่มต้น และจำเป็นต้องมีมาตรการที่เหมาะสม
5. ภาพเคลื่อนไหวบนหน้าเว็บแบบเคลื่อนไหวมักจะมี Flash และ GIF แบบเคลื่อนไหว Flash มีฟังก์ชันอันทรงพลัง เอฟเฟ็กต์ที่หลากหลาย คุณภาพของภาพที่สูง และซอฟต์แวร์สร้างอันทรงพลัง ซึ่งเป็นรูปแบบที่นิยมของแอนิเมชั่นบนเว็บในกรณีส่วนใหญ่ ข้อเสียของ GIF แบบเคลื่อนไหวคือสามารถใช้ได้ไม่เกิน 256 สีเท่านั้น และเป็นการยากที่จะสร้างภาพเคลื่อนไหวที่มีเอฟเฟกต์ที่ซับซ้อน อย่างไรก็ตาม ข้อดีของมันคือไฟล์มีขนาดเล็กและสามารถเล่นได้ในเบราว์เซอร์รุ่นเก่าหรือสมัยใหม่โดยไม่ต้องใช้ปลั๊ก -ในการสนับสนุน
