All Blog
วิธีลดขนาดของภาพ และการเซฟภาพ สำหรับใช้บนเว็บไซต์
หลาย ๆ ท่านอาจพบมีปัญหาในเรื่อง การใส่รูปภาพบนเว็บไซต์ เช่น
ใส่ภาพบนเว็บแล้ว ขนาดของภาพใหญ่มาก ต้องการจะลดขนาดของภาพลง
ให้เหมาะสมกับพื้นที่ หรือต้องการให้ภาพมีขนาดที่เบา
เหมาะแก่การชมบนเว็บไซต์ วันนี้ผมมีคำแนะนำดี ๆ
ที่จะช่วยให้ท่านสามารถ ลดขนาดของภาพได้ด้วยตัวเอง รวมถึงเทคนิคในการเซฟภาพ
เพื่อใช้สำหรับประกอบเว็บไซต์ และเหมาะกับประเภทของรูปภาพมาฝากครับ






มาเริ่มกันเลยดีกว่านะครับ






        1. เปิดโปรแกรม Photoshop เลือกเปิดไฟล์ที่ต้องการ
ทำการลดขนาดของภาพครับ โดยคลิกที่ File --> Open -->
เลือกไฟล์ที่ต้องการ















        2. ทำการเลือกเปิดรูปภาพที่เราต้องการจะลดขนาด
เพื่อนำมาใช้บนเว็บไซต์












        3. หลังจากที่ได้ทำการเปิดรูปภาพขึ้นมาแล้ว
ให้ทำการเลือกที่เมนู Image --> Image Size...









        4. เราจะพบหน้าต่างใหม่ ซึ่งจะมีค่าความกว้าง
และความสูงบอกอยู่ ซึ่งตรงนี้ก็คือขนาดของภาพที่เราเลือกอยู่นั่นเองครับ









        5. ทำการเปลี่ยนขนาดภาพให้ลดลงตามที่ต้องการครับ
โดยการเปลี่ยนค่าที่ Pixel Dimensions ในส่วนของ Width (ความกว้าง) และ
Height (ความสูง) ค่าที่เราใส่เข้าไปใหม่นี้ ไม่ว่าจะใส่ในค่าของความสูง
หรือความกว้างก็ตาม ค่าของอีกตัวเลือกหนึ่งก็จะมีการแปรผันตามครับ
ซึ่งผมแนะนำว่าควรให้ Resolution อยู่ที่ 72 pixels/inch
สำหรับงานเว็บไซต์นะครับ หลังจากเปลี่ยนขนาดเสร็จแล้วก็เลือกที่ OK ครับ









                5.1 หากเราทำการนำเครื่องหมายถูกหน้าตัวเลือก
Constrain Proportions ออก เราจะเห็นว่า
สัญลักษณ์รูปโซ่ที่แสดงอยู่ข้างหลัง Width และ Height จะหายไป
ตรงนี้เราสามารถที่จะใส่ค่าความสูง และความกว้างแบบอิสระให้แก่ภาพ
โดยที่ค่าของอีกตัวเลือกหนึ่งจะไม่แปรผันตามครับ





        6. ต่อมาจะเป็นวิธีการ save
สำหรับนำไปใช้บนเว็บไซต์ครับ โดยมาที่เมนู File --> Save for web...
ครับ





        7. การเซฟภาพสำหรับใช้บนเว็บไซต์นั้น
สามารถเลือกประเภทไฟล์ภาพได้หลายประเภท
ขึ้นอยู่กับรูปแบบของภาพที่เราใช้ครับ ในการเซฟภาพ สำหรับภาพถ่าย
หรือภาพที่มีรายละเอียดสูง ควรเลือกเป็นไฟล์ JPEG
และเรายังสามารถที่จะเลือกปรับค่า Quality ตามที่เราต้องการได้
โดยในการปรับลดค่า Quality ลง
ต้องดูที่ตัวภาพด้วยว่ารายละเอียดของภาพลดลงมากน้อยเพียงใด
เพื่อให้ภาพมีน้ำหนักเบา แต่ยังคงเห็นภาพได้ชัดเจนครับ





        8. ภาพที่นิยมเซฟเป็นไฟล์ GIF ได้แก่ ภาพโลโก้
ภาพหัวข้อ ตัวอักษร หรือ ปุ่มต่าง ๆ
เนื่องจากเราสามารถกำหนดให้พื้นหลังของภาพ หรือบริเวณรอบ ๆ
ของภาพโปร่งใสครับ โดยเราสามารถลดจำนวนของสีลงได้
ภาพที่ทำการลดจำนวนของสีลงแล้ว จะมีขนาดของไฟล์ภาพที่เบาลง
แต่การจะลดจำนวนสีลงได้นั้น ขึ้นอยู่กับตัวภาพด้วย
ว่ามีการใช้สีที่มากน้อยเพียงใด เพื่อไม่ให้สีของภาพ
หรือรายละเอียดของภาพผิดหรือเสียหายครับ









                8.1 หากเราทำการเลือกที่ Transparency
จะเป็นการเลือกเพื่อให้พื้นหลังของภาพโปร่งใสครับ





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


None  ภาพจะไม่มีขอบ หรือขอบไม่คมชัด
White 
ภาพจะมีขอบสีขาว เหมาะสำหรับใช้บนพื้น Background สีขาว
Black 
ภาพจะมีขอบสีดำ เหมาะสำหรับใช้บนพื้น Background สีดำ
Other 
เป็นการเลือกสีขอบภาพให้ตรงกับสีพื้น Background ที่เรามีอยู่





        9. ไฟล์ PNG ไฟล์ภาพประเภทนี้ จะรวมความสามารถของไฟล์
GIF และ JPEG เอาไว้ คือ ภาพที่ได้จะมีความละเอียดสูง มีความชัด ภาพไม่แตก
แต่ไฟล์ภาพชนิดนี้มีขนาดที่ใหญ่กว่า JPEG และ GIF มาก
หากนำไฟล์ชนิดนี้มาใช้กับเว็บไซต์คงจะไม่ดีนัก
เพราะจะทำให้การแสดงผลบนหน้าเว็บไซต์ของเรา ใช้เวลาโหลดนานขึ้นครับ





การเลือกเซฟรูปภาพให้ถูกประเภทมีความสำคัญมากนะครับ
เพราะถ้าเราเลือกถูกประเภท ไฟล์ที่ได้จะมีขนาดเล็ก
และคุณภาพที่ได้จะเหมาะสมกับงานที่ทำครับ พบกันใหม่สัปดาห์หน้าครับ






Create Date : 22 กรกฎาคม 2553
Last Update : 22 กรกฎาคม 2553 14:45:44 น.
Counter : 3971 Pageviews.

0 comments
ชื่อ : * blog นี้ comment ได้เฉพาะ VIP Friend
Comment :
 *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

ชีวานรินทร์
Location :
  

[ดู Profile ทั้งหมด]
 ฝากข้อความหลังไมค์
 Rss Feed
 Smember
 ผู้ติดตามบล็อก : 3 คน [?]