Save for web เรื่องสำคัญที่ต้องรู้

บทความโดย: FFM
ใน การสร้างงานกราฟฟิคเพื่อใช้ในการทำเว็บนั้น เราจะใช้โปรแกรม Adobe Photoshop เป็นโปรแกรมหลักในการทำงาน โดยในปัจจุบันนั้นโปรแกรมนี้ได้พัฒนามาถึงเวอร์ชั่นที่ 7 แล้วซึ่งในเวอร์ชั่นนี้จะมีคำสั่งการ save งานที่ใช้เพื่อการสร้างเว็บโดยเฉพาะ โดยคำสั่งจะอยู่ที่เมนู File > Save for web (ดูรูปที่1 ประกอบ) ซึ่งจุดเด่นของการใช้คำสั่งนี้ก็คือ ผู้ใช้งานจะสามารถเห็นความละเอียดของภาพที่จะถูก save ไปใช้ในเว็บได้ทันทีพร้อมทั้งสามารถเปรียบเทียบภาพที่จะถูก save กับภาพที่เป็นภาพต้นฉบับได้ และยังแสดงข้อมูลระยะเวลาที่ใช้ในการ load รูปภาพนั้นๆ เมื่อนำไปแสดงผลจริงบนเว็บ ณ ความเร็วโมเด็มในระดับต่างๆ ได้อีกด้วย (ดูรูปที่2,3 ประกอบ)

รูปที่1 เมนู Save for web

รูปที่2 หน้าจอ save for web

รูปที่3 แสดงข้อมูลระยะเวลาที่ใช้ในการ load

โดยเทคนิคการ save ไฟล์ทั้งสองชนิดมีดังนี้
1. การ save ไฟล์นามสกุล .jpg มีขั้นตอนดังนี้
1.1 เลือกภาพที่ต้องการ save โดยทำการ crop ด้วยอุปกรณ์ crop tool แล้วใช้คำสั่ง File > Save for web จะได้ผลลัพธ์ดังรูปที่ 4

รูปที่ 4 แสดงรายละเอียดการsave แบบ .jpg

1.2 ทำการตั้งค่าการ save จากคำสั่งบริเวณด้านขวาของหน้าจอ โดยกำหนดค่าต่างๆ ดังนี้ (ดูรูปที่ 5 ประกอบ)
(1) ตั้งค่า Optimized file format (ช่องที่ 1) ให้เป็น JPEG
(2) ตั้งค่า Quality (ช่องที่ 2) ให้มีค่าอยู่ในช่วง 30-50 ขึ้นอยู่กับ ความต้องการความคมชัดของภาพ โดยถ้าตั้งค่ามากภาพจะ คมชัดมาก แต่ขนาดไฟล์ก็จะใหญ่ตามไปด้วยทำให้ ภาพ ใช้เวลาในการ load นานขึ้น ถ้าตั้งค่าน้อยก็จะได้ผลลัพธ์ ในทางตรงกันข้าม
(3) ตรวจสอบการใช้งาน Progressive (ช่องที่ 3) ซึ่งการเลือกใช้งานคำสั่งนี้โดยปกติจะทำให้ไฟล์มีขนาดเล็กลง(แต่ บางครั้งถ้าทำให้ไฟล์มีขนาดใหญ่ขึ้นให้ยกเลิกคำสั่งนี้)
(4) เมื่อตั้งค่าได้เรียบร้อยแล้วให้กดปุ่ม Save

รูปที่ 5 แสดงรายละเอียดการตั้งค่าการ save ไฟล์แบบ .jpg

2. การ save ไฟล์นามสกุล .gif มีขั้นตอนดังนี้
2.1 เลือกภาพที่ต้องการ save โดยทำการ crop ด้วยอุปกรณ์ crop tool แล้วใช้คำสั่ง File > Save for web จะได้ผลลัพธ์เช่นเดียวกับรูปที่ 6
2.2 ทำการตั้งค่าการ save จากคำสั่งบริเวณด้านขวาของหน้าจอ โดยกำหนดค่าต่างๆ ดังนี้ (ดูรูปที่ 4 ประกอบ)
(1) ตั้งค่า Optimized file format (ช่องที่ 1) ให้เป็น GIF
(2) ตั้งค่า Colors (ช่องที่ 2) โดยสามารถกำหนดสีได้สูงสุดถึง 256 สี ถ้ามีการกำหนดจำนวนสีน้อยภาพจะมีความ ละเอียดต่ำแต่ไฟล์จะเล็กและภาพจะ load ได้เร็ว ถ้ามีการ กำหนดจำนวนสีมากผลลัพธ์ที่ได้จะเป็นตรงกันข้าม
(3) ตรวจสอบการใช้งาน Interlaced (ช่องที่ 3) ซึ่งการเลือกใช้ งานคำสั่งนี้โดยปกติจะทำให้ไฟล์มีขนาดเล็กลงเหมือน กับการใช้คำสั่ง Progressive ของไฟล์แบบ .jpg (แต่ บางครั้งถ้าทำให้ไฟล์มีขนาดใหญ่ขึ้นให้ยกเลิกคำสั่งนี้)
(4) เมื่อตั้งค่าได้เรียบร้อยแล้วให้กดปุ่ม save

รูปที่ 6 แสดงรายละเอียดการตั้งค่าการ save ไฟล์แบบ .gif

จาก ที่ได้แสดงให้เห็นถึงวิธีการในการ save งานกราฟฟิคทั้ง 2 ชนิดนี้แล้ว ถ้าได้มีการนำวีธีการนี้ไปใช้ในการสร้างเว็บ ไม่ว่าจะเป็นเว็บทั่วๆ ไปหรือเว็บทางด้าน E-Commerce ก็จะสามารถทำให้เว็บที่ใช้กราฟฟิคจากวิธีการ save แบบนี้ ใช้เวลาในการ load ข้อมูลน้อยลง นั่นคือเว็บจะแสดงผลได้เร็วขึ้นนั่นเอง

ลิงค์หัวข้อ: http://dexmore.com/topic/1245

Save for web เรื่องสำคัญที่ต้องรู้

ทำเว็บไซต์ | แต่งบอร์ด | ออกแบบ | SMF | Joomla | Drupal | WordPress | JQuery | CMS | ECommerce | Tel. 08-08577477