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 ตอนที่ 1

เรื่อง : วิธีการสร้างโปรแกรมอ่าน RSS/XML ด้วย Dreamweaver ตอนที่ 1 RSS (Really Simple Syndication/Rich...  

สร้างโปรแกรม Guestbook ด้วย Dreamweaver + PHP + MySQL ตอนที่ 3

เมื่อเราได้ทำการกำหนดรูปแบบการแสดงผลของหน้าตา Guestbook ของเราแล้ว ต่อมาเราจะทำการเรียกข้อมูลจากฐานข้อมูลขึ้นมาแสดงกับหน้าตาแสดงผลท...  

มาเปิดใช้งาน Standard Toolbars เพื่อ Save File ได้อย่างสะดวกกันเถอะ

เรื่อง: เปิดใช้ Standard Toolbars ในโปรแกรม Dreamweaver Standard Toolbars เป็นเครื่องมือที่จะช่วยให้ผู...  

ใส่สีสันให้ input สำหรับกรอกข้อมูลของ Form ด้วย CSS

เรื่อง : ใส่สีสันให้ Input กรอกข้อมูลด้วย CSS หลายท่านคงจะเคยเห็น input สำหรับกรอกข้อมูลนะครับ หลายท่านอาจจะพบว่า เอ...ท...  


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

*
*
*