การปรับขนาดภาพให้เหมาะสมกับการใช้งานในเว็บไซต์ด้วย Photoshop

ปัจจุบันภาพถ่ายที่ได้จากกล้องหรือมือถือขนาดมาตรฐานของภาพขั้นต่ำจะอยู่ที่ 3648 x 2736 Pixel ขนาดของไฟล์จะอยู่ที่ประมาณ 20-30 MB ซึ่งถ้าหน้าเพจนั้นมีภาพอยู่ประมาณ 10 กว่าภาพ แล้วภาพนั้นไม่ได้มีการย่อขนาดเลย หน้าเว็บนั้นจะโหลดช้ามากๆ

ดังนั้น หากต้องการให้หน้าเว็บโหลดเร็วขึ้นจึงควรปรับขนาดรูปภาพให้เหมาะสมกับหน้าเว็บไซต์ โดยในวันที่เราได้เขียนบทความเรื่องนี้ก็คือปี 2021 ขนาดหน้าจอที่กำลังนิยมอยู่ในขณะนี้อยู่ที่ 1920 X 1080 Pixel

อ้างอิง: statcounter

ไม่มีเหตุผลใดๆ เลยที่จะนำภาพขนาด 3648 x 2736 Pixel โดยที่ไม่มีการย่อขนาดมาใช้บนเว็บไซต์ เว้นเสียแต่ว่าคุณต้องการให้เว็บไซต์ของคุณโหลดช้า

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

1.คลิกที่ icon โปรแกรม Photoshop

2. ที่เมนูบาร์ด้านบน คลิกที่ file เลือก Open

3.เลือกภาพที่ต้องการจะนำไปใช้งานบนเว็บ จากนั้นกด Open

4. จะได้ภาพที่ต้องการแต่ขนาดของภาพยังใหญ่อยู่

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

การปรับขนาดรูปภาพสามารถทำได้ที่ Image => Image Size…

ใส่ขนาดความกว้างและความสูงตามความเหมาะสมที่พอดีกับการใช้งานหน้าเว็บไซต์

5. เพื่อนำไปใช้กับหน้าเว็บเพจ โดยที่เมนูบาร์ คลิก file เลือก Export

จากนั้นเลือก Save for Web (Legacy) ครั้งต่อๆ ไปจะกดคีย์ลัด Alt+Shift+Ctrl+S ก็ได้

6. จะมีหน้าต่างขึ้นมา โดยมีรายละเอียดดังนี้

  • สามารถเลือกชนิดของไฟล์ที่ต้องการบันทึกได้ โดยไฟล์ที่บันทึกสามารถบันทึกได้เป็นนามสกุล JPEG, GIF, PNG-8, PNG-24
  • คุณภาพของภาพสามารถเลือกได้ ดังนี้ Low, Medium, High, very High, Maximum

ข้อเสนอแนะ
หากเป็นรูปคนหรือรูปวิว ภาพถ่ายให้เลือกเป็นไฟล์ JPEG จะดีกว่า แต่ถ้าเป็นภาพกราฟฟิก ไอคอนหรือ Vector ให้เลือก PNG เพราะจะได้อัตราส่วนของภาพที่ดีกว่า

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

จากนั้นกดปุ่ม Save เพื่อทำการบันทึก

7. เลือกตำแหน่งไฟล์ที่ต้องการบันทึก จากนั้นทำการตั้งชื่อไฟล์ เมื่อเรียบร้อยแล้วกดปุ่ม Save

เท่านี้คุณก็จะได้ไฟล์รูปภาพที่พร้อมใช้งานสำหรับเว็บเพจแล้วค่ะ

เมื่อเปรียบเทียบกับภาพต้นฉบับเมื่อทำการลดขนาดภาพ และทำการ Save for web แล้ว ขนาดของภาพลดไปได้เยอะเลยทีเดียว

Was this article helpful?

Related Articles