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



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

สร้าง Popup Window ด้วย Open Browser Window

เรื่อง : การทำ Popup Window กำหนดขนาดหน้าต่าง Web Browser คงจะเคยเข้าไปตามเว็บ ซึ่งเขาอาจจะมีปุ่มกด ซึ่งเมื่อกดไปที่ปุ่ม...  

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

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

วิธีการสร้างกรอบข้อความด้วย CSS (CSS Border)

เรื่อง : การใช้ CSS เพื่อสร้างกรอบข้อความ (CSS Border) เส้นกรอบ หรือ Border ที่จะพูดถึงในบทความนี้ คือ...  

การ Export สไตล์ชีต CSS ที่อยู่ในเว็บเพจไปเป็นไฟล์ CSS (External Style Sheet)

เรื่อง : Export โค้ด CSS ไปเป็น External Style Sheet ด้วย Dreamweaver โค้ด CSS ที่ได้สร้างไว้กับไฟล์เว...  


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

*
*
*