About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

การ 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

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



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

สร้างโปรแกรมอ่าน RSS ด้วย Dreamweaver ตอนที่ 3 [จบ]

เรื่อง : สร้างโปรแกรมอ่าน RSS/XML ด้วย Dreamweaver ตอนที่ 3 [จบ] ในตอนที่ 2 ของบทความเรื่องนี้ เรา...  

การ Set ให้โปรแกรม Dreamweaver ใช้งานภาษาไทย

เรื่อง : การกำหนด Encoding ให้เว็บเพจเพื่อการใช้งานภาษาไทยได้อย่างถูกต้อง *เวอร์ชั่นตั้งแต่ CS3 ขึ้นไปไม่จำเป็นต้องเซ็ท เพราะค่า Defaul...  

การลบ Tag/Code ของ HTML ที่ไม่จำเป็นออก (Clean up HTML)

เรื่อง: ลบ Tag/Code ของ HTML ที่ไม่จำเป็นออกจาก Source Code บางครั้งการสร้าง Web Page โดยใช้โปรแกรม Dreamweaver ตัวโปรแ...  

ซ่อน URL บน Address Bar

เรื่อง :: ซ่อน URL บน Address Barมีผู้สอบมามากมายว่าจะทำอย่างไรให้ URL บน Address Bar คงที่อยู่ตลอดเวลา โดยไม่เปลี่ยนแปลงไ...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*