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



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

สร้างปุ่มกดให้กลายเป็น Link (Button Link with Dreamweaver)

เรื่อง : การทำปุ่มกดให้เป็นลิงค์เพื่อกดไปหน้าอื่นด้วย Dreamweaver โดยปรกติถ้าต้องการสร้าง Link บนหน้าเว็บเพจ เราต้อ...  

เปิดหน้าต่าง Code เพื่อแก้ไขโค้ดได้อย่างรวดเร็ว

เรื่อง : เปิดหน้าต่างเพื่อแก้ไข Source Code เว็บเพจ (Code Inspector) ทุกครั้งที่ผู้ใช้งานโปรแกรม Dreamweaver ...  

เปิดเส้น Grid เพื่อช่วยในการออกแบบเว็บเพจ (Enable Grid)

เรื่อง : เปิดเส้น Grid เพื่อช่วยการออกแบบเว็บเพจ (How to enable Grid view in Dreamweaver) Grid คือ ตาราง ซึ่งผู้ใช้งานโป...  

การ Import ข้อมูล MS Word มาใช้ทำเว็บกับโปรแกรม Dreamweaver

เรื่อง : การ Import ข้อมูลจากไฟล์ MS Word มาใช้งานกับโปรแกรม Dreamweaver หลายครั้งผู้ที่มีหน้าที่จัดทำ Website ต้องมีการรับ...  


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

*
*
*