การบีบอัดไฟล์รูป

Dreamweaver

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

    ปัจจัยที่จะกระทบต่อความเร็วในการแสดงผลเว็บไซต์ ได้แก่ ขนาดของรูปภาพที่ใช้ จำนวนของรูปภาพที่ใช้ และปริมาณของตัวอักษรที่ อยู่บนหน้านั้นๆ อนึ่งความเร็วในการแสดงผลเว็บไซต์ อาจอยู่ที่ Server ที่เว็บไซต์นั้นๆอยู่ว่ามี ความสามารถสูงเพียงใด ขนาดของรูปภาพที่ใช้ควรจะมีขนาดไม่เกิน 20-30K ต่อรูป ส่วนประเภทของ รูปนั้นควรเป็น GIF หรือ JPEG ถ้าขนาดของรูปภาพใหญ่เกินไป อาจตัดแบ่งให้ขนาดเล็กลง และใช้ ตารางช่วยในการจัดรูปภาพนั้นๆ

ชนิดของไฟล์ที่ใช้ในการบีบอัดภาพ

    ชนิดของไฟล์ (format) ที่ใช้ในการบีบอัดรูปได้แก่ GIF , JPEG และ PNG ซึ่งเราจะใช้ฟอร์แมตใดก็ต้องทำความเข้าใจลักษณะในการบับอัดข้อมูลของแต่ละฟอร์แมต เพื่อให้เราสามารถเลือกใช้ได้ถูกต้อง

    1.JPEG สำหรับภาพถ่าย หรือภาพวาดที่มีจำนวนสีมากๆ

    2.GIF , PNG-8 สำหรับภาพที่มีลักษณะเป็นลายเส้น หรือภาพที่ไม่ต้องการให้มีพื้นหลัง รูปที่ไม่มีการไล่สี เช่นภาพการ์ตูน ภาพที่มีจำนวนสีน้อยๆ เช่น โลโก้

    3.PNG ใช้กับภาพถ่ายที่ต้องการให้มีลักษณะโปร่งแสง ไฟล์ที่อัดแล้วจะมีขนาดใหญ่กว่า JPEG แต่มีคุณภาพความคมชัดสูงกว่า



โปรแกรมที่ใช้ในการบีบอัดภาพ

    เราอาจนำภาพที่บีบอัดแล้ว มาอัดซ้ำให้ได้ขนาดตามที่เราต้องการก็ได้ โดยโปรแกรมที่แนะนำให้ใช้ก็คือ Photoshop หรือ Illustrator สามารถใช้งานได้เหมือนกัน เนื่องจากว่า 2 โปรแกรมนี้มีเครื่องมือที่ทำให้การบีบอัดไฟล์ง่ายขึ้น และเปรียบเทียบการบีบอัดแต่ละชนิดได้ง่าย



การบีบอัดไฟล์ JPEG โดยใช้ Photoshop

    1.เปิดภาพนั้นขึ้นมาด้วยโปรแกรม Photoshop , illustrator จากนั้นไปที่ File > Save for web ดังรูป



    2.จะมีหน้าต่างขึ้นมาดังรูป



    3.เริ่มจากทางซ้ายมือ บนสุดเลือก 4-up เป็นการระบุหน้าที่ใช้เปรียบเทียบให้มี 4 หน้า

    4.ให้เลือกหน้าใดหน้าหนึ่งใน 4 หน้า แล้ว ไปที่ ส่วนที่ใช้ปรับชนิดและคุณสมบัติต่างๆของไฟล์ มีรายละเอียดที่จำเป็นต้องทราบดังนี้

         4.1.Preset เลือกชนิดของไฟล์ที่เราต้องการ ในหัวข้อนี้ก็เลือก JPEG

         4.2.หัวข้อใต้ Preset ใช้เลือกคุณภาพของรูปว่าต้องการแบบได้ High , Medium , Low ยิ่งต่ำมากไฟล์ยิ่งเล็ก แต่คุณภาพของรูปก็จะลดลงไป

         4.3.Quality เลือกคุณภาพของภาพ ดีสุดอยู่ที่ 100

         4.4.Blur ปรับ Focus ของภาพ รูปจะดูนุ่มนวลขึ้นเมื่อปรับค่านี้

    5.เราสามารถปรับขนาดของรูปได้โดยคลิกที่ image size และใส่ขนาดที่เราต้องการลงไปเพียงค่าเดียว จะ height หรือ width ก็ได้โปรแกรมจะปรับขนาดรูปตามที่เราต้องการ

    6.คลิก Save ก็จะได้รูปที่ทำการบีบอัดแล้ว

หมายเหตุ การ save ไฟล์ เราจะ save ทับไฟล์เดิมหรือ save เป็นไฟล์ใหม่ก็ได้



การบีบอัดไฟล์ GIF โดยใช้ Photoshop

    1.เปิดภาพนั้นขึ้นมาด้วยโปรแกรม Photoshop , illustrator จากนั้นไปที่ File > Save for web ดังรูป



    2.จะมีหน้าต่างขึ้นมาดังรูป



    3.เริ่มจากทางซ้ายมือ บนสุดเลือก 4-up เป็นการระบุหน้าที่ใช้เปรียบเทียบให้มี 4 หน้า

    4.ให้เลือกหน้าใดหน้าหนึ่งใน 4 หน้า แล้ว ไปที่ ส่วนที่ใช้ปรับชนิดและคุณสมบัติต่างๆของไฟล์ มีรายละเอียดที่จำเป็นต้องทราบดังนี้

         4.1.Preset เลือกชนิดของไฟล์ที่เราต้องการ ในหัวข้อนี้ก็เลือก GIF

         4.2.Color เลือกจำนวนสีที่ใช้ในภาพ

         4.3.Dither เลือกให้มีการชดเชยสี ภาพจะแสดงการไล่สีที่นุ่มนวลขึ้น

         4.4.Transparency เลือกให้ไม่มีพื้นหลัง จะเห็นว่าภาพจะสีลายตารางหมากรุกด้านหลัง เพื่อเป็นการบอกว่าภาพนี้ไม่มีพื้นหลัง

    5.เราสามารถปรับขนาดของรูปได้โดยคลิกที่ image size และใส่ขนาดที่เราต้องการลงไปเพียงค่าเดียว จะ height หรือ width ก็ได้โปรแกรมจะปรับขนาดรูปตามที่เราต้องการ

    6.คลิก Save ก็จะได้รูปที่ทำการบีบอัดแล้ว

หมายเหตุ การ save ไฟล์ เราจะ save ทับไฟล์เดิมหรือ save เป็นไฟล์ใหม่ก็ได้

ขนาดไฟล์ภาพเล็กเท่าไหร่ถึงจะพอ

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

    Dreamweaver ได้มีเครื่องมือที่ใช้คำนวนเวลาในการแสดงผลของหน้าเว็บเพจ ไว้ให้แล้วที่ status bar ดังรูปด้านล่าง



    เราสามารถกำหนดความเร็วของอินเทอร์เนตที่ใช้คำนวนได้โดยไปที่ Edit > Preferences จะมีหน้าจอดังรูป ทางขวามือให้เลือก Status bar จะมีความเร็วอินเทอร์เนตให้เลือกดังรูป



เกี่ยวกับบทความนี้

  • ระดับความยาก : พื้นฐาน
  • คะแนนของบทความนี้ : 10
  • สร้างเมื่อ : 16-05-2010
  • จำนวนครั้งที่เปิด : 23,668
  • เนื้อหาที่เกี่ยวข้อง :
      -

คะแนนความน่าสนใจ

13004

คลิกที่ เจ๋งเป้ง! เพื่อโหวตให้กับบทความนี้หากคิดว่าน่าสนใจ

บทความอื่นๆในหมวดลองทำเว็บไซต์ แบบง่ายๆ (5 เรื่อง)

การบีบอัดไฟล์รูป

การบีบอัดไฟล์รูป

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

สร้างเมื่อ : 16-05-2010 11:13 | จำนวนครั้งที่เปิด : 23,668


การใส่รูป และการจัดตำแหน่งของรูป

การใส่รูป และการจัดตำแหน่งของรูป

ในหัวข้อนี้จะเป็นเนื้อหาการใส่รูปในเว็บเพจ และการจัดตำแหน่งของรูป ให้ชิดซ้าย ขวา หรือ อยู่ตรงกลาง

สร้างเมื่อ : 16-05-2010 10:43 | จำนวนครั้งที่เปิด : 36,341


เครื่องมือที่ใช้ปรับแต่งภาพของ Dreamweaver

เครื่องมือที่ใช้ปรับแต่งภาพของ Dreamweaver

ในบทความนี้จะเป็นเรื่องเครื่องมือของ Dreamwerver ที่ใช้ในการตัดแต่งภาพ เช่น ปรับขนาดภาพ , ปรับความคมชัดของภาพ , ปรับแสง และเครื่องมือที่ใช้ในการบีบอัดไฟล์รูป [br]

สร้างเมื่อ : 16-05-2010 10:44 | จำนวนครั้งที่เปิด : 20,044


การใส่ภาพพื้นหลัง ให้เว็บเพจ

การใส่ภาพพื้นหลัง ให้เว็บเพจ

ภาพพื้นหลังของเว็บเพจที่ดีจะช่วยให้ เว็บเพจดูมีมิติ และทำให้การอ่านเนื้อหาในเว็บเพจง่ายยิ่งขึ้น

สร้างเมื่อ : 16-05-2010 10:44 | จำนวนครั้งที่เปิด : 72,412


Image map

Image map

image map เป็นการสร้างจุด (hot spot) บนรูปภาพ และให้จุดเหล่านั้นเป็นลิงค์ โดยเราจะสร้างกี่จุดในรูปก็ได้ ตัวอย่างการใช้งาน เช่น รูปการตูนที่มีหลายตัวละครในภาพเดียว เราจะทำ hot spot ให้กับรูปตัวละครแต่ละตัวแล้วให้ลิงค์ไปยังรายละเอียดของตัวละครนั้น

สร้างเมื่อ : 16-05-2010 10:45 | จำนวนครั้งที่เปิด : 15,569