การ Optimize รูปภาพ ด้วย Dreamweaver [Article ID : 53]

เรื่อง : การ Optimize รูปภาพโดยใช้โปรแกรม Dreamweaver

การใช้งานรูปภาพประกอบหน้าเว็บเรานั้น สิ่งหนึ่งที่เราต้องคำนึงถึง คือ ขนาดของไฟล์เว็บเพจ (ขนาดไฟล์ คือ ขนาดที่มีหน่วยเป็น Byte, Kb, Mb เป็นต้น) เนื่องจากว่า ยิ่งไฟล์เว็บเพจมีขนาดใหญ่มากเท่าไหร่ การโหลดเพื่อการเรียกชมเว็บก็จะนานขึ้น และรูปภาพก็มักจะเป็นปัจจัยหลัก ๆ ที่จะทำให้ไฟล์เว็บเพจของเรามีขนาดไฟล์ที่ใหญ่ รวมถึงฟอร์แมทของรูปที่จะนำมาใช้ที่เราต้องพิจารณา ซึ่ง Dreamweaver คำนึงถึงจุดตรงนี้ จึงได้มี Option ในการ Optimize รูปภาพได้จากตัวโปรแกรม Dreamweaver เอง เป็นอย่างไรลองอ่านดูครับ

วิธีการ Optimize รูปภาพ

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

1. ให้ทำการ Click เลือกที่รูปภาพที่จะทำการ Optimize นั้น
2. เมื่อคลิ๊กไปแล้ว ให้สังเกตที่ Properties Panel จะพบไอคอน Edit Image Settings ให้คลิกที่ไอคอนนี้ ดังรูป
3. โปรแกรมจะทำการเปิดหน้าต่าง Image Optimization ขึ้นมาให้ทำการกำหนดค่า ดังรูป - Preset คือ ค่าที่โปรแกรมกำหนดมาให้ใช้งานได้
- Format คือ ฟอร์แมทของรูป เช่น JPEG,PNG, GIF เป็นต้น เมื่อเลือกแล้วจะปรากฎมี Option ต่าง ๆ ในการกำหนดค่าให้เราปรับแต่ง

4. ให้ทำการปรับแต่งค่าต่าง ๆ ตาม Option ที่หน้าต่าง Image Optimization มีให้ โดยขณะทำการปรับแต่งให้พิจารณาตามความเหมาะสม
ในขณะปรับแต่งให้เราสังเกตความเปลี่ยนแปลงของรูปภาพเรา
*สังเกตที่ด้านท้ายของหน้าต่าง จะมี File Size แจ้งบอกขนาดไฟล์แก่เรา

5. เมื่อกำหนกค่าได้แล้ว คลิก OK เป็นอันเสร็จสิ้นการ Optimize รูปภาพ

การพิจารณาในการปรับแต่งรูปภาพให้เหมาะสม

สำหรับหลักการพิจารณานั้น ก็ไม่มีอะไรแน่นอนตายตัว ขึ้นอยู่กับรูปภาพที่นำมาใช้ โดยหลัก ๆ ก็พิจารณา ดังนี้
- รูปภาพเป็นรูปอะไร โลโก้, รูปถ่าย, ไอคอน หรืออื่น ๆ
- ประเภทของฟอร์แมทรูปภาพ (Format)
- ขนาดของไฟล์ที่ควรจะเป็น

ยกตัวอย่างเช่น
ถ้าเป็นรูปไอคอนประกอบหน้าเว็บ ฟอร์แมทควรจะเป็น PNG หรือ GIF ขนาดไฟล์ก็ไม่ควรเกิน 10Kb เป็นต้น ทั้งนี้เราต้องอาศัยประสบการณ์ และการหมั่นสังเกตการใช้งานรูปของเรากับเว็บเราครับ...

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

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 1

เรื่อง : การออกแบบ Responsive Web Design ด้วย Dreamweaver ตอนที่ 1 บทความนี้มีด้วยกัน 3 ตอนครับ จะเป็นบทความที่ว่าด้วยเรื...  

สร้าง Select Options แบบ Checkbox เพื่อให้ User เลือกข้อมูล

เรื่อง : วิธีการสร้าง Select Options ในแบบ Checkbox หลายท่านอ่านหัวข้อบทความแล้วอาจจะงง ๆ ว่า Select Options ในแบบ Chackbo...  

Upload ไฟล์เว็บไปไว้บน Web Hosting ด้วย Dreamweaver

เรื่อง : Dreamweaver กับการ Upload ไฟล์เว็บไซต์ไปยัง Web Hosting เมื่อเร็ว ๆ นี้มีน้องคนหนึ่งโทรเข้ามาสอบถามเรื่องของการใช้...  

ห้าม Click ขวาหน้าเว็บ โดยไม่ใช้ Extension

เรื่อง :: ห้าม Click ขวาหน้าเว็บ โดยไม่ใช้ Extensionมีผู้ติดต่อสอบถามกันเข้ามามากเลยว่า...ไม่สามารถหาตัว Extension ที่ชื่อ...