วิธีเพิ่มความเร็วให้เว็บไซต์: การลดขนาดรูปภาพ

Publish Published: 14/10/2018 Category Category: SEO and Tools

ปัจจัยนึงที่ทำให้เว็บไซต์ของเราสามารถไต่อันดับได้ดีบน search engine คือ เว็บไซต์รองรับการแสดงผลที่หน้าจออุปกรณ์ขนาดเล็ก(หรือที่เรียกว่า mobile friendly) และอีกวิธีที่เป็นที่นิยม สามารถทำได้ง่ายคือการลดขนาดของหน้าเพจให้เว็บไซต์สามารถโหลดได้เร็ว ยิ่งเว็บไซต์ของเราเร็วขึ้นเท่าไหร่ ก็มีโอกาสในการไต่อันดับให้อยู่ในหน้าแรก หรือตำแหน่งแรกๆ ของการค้นหาได้

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

ทำไมต้องลดขนาดรูปภาพก่อนใช้งานจริง?

ยกตัวอย่างเว็บไซต์ของคุณใช้รูปในหน้าแรกจำนวน 5 รูป โดยขนาดไฟล์เฉลี่ยอยู่ที่ 300KB ต่อไฟล์ (ก็รวมแล้ว 1,500KB หรือประมาณ 1.5MB) นี่แค่ขนาดรูปอย่างเดียวนะครับ ยังไม่รวมพวกขนาดไฟล์ตกแต่ง หรือไฟล์สคริปอื่นๆ ที่ต้องโหลดพร้อมๆ กันด้วย ถ้าให้ประมาณจากกรณีดังกล่าว ผมตีไปคร่าวๆ การโหลดหน้าเว็บไซต์ 1 ครั้งจะใช้ bandwidth(หรือ ปริมาณในการรับส่งข้อมูล) ในการโหลดหน้าเว็บไซต์ 2MB ต่อหนึ่งครั้ง!

ลูกค้าของคุณต้องใช้เน็ตจำนวน 2MB ในการโหลดหน้าเว็บไซต์ของเรา ด้วยขนาดการรับส่งขนาดนี้ส่งผลอะไรบ้าง?

  1. ลูกค้าใช้เวลาในการรอข้อมูลโหลดแล้วแสดงผลนานขึ้น มีโอกาสที่ลูกค้าจะไม่ทนรอ แล้วปิดไปดูเว็บไซต์อื่นที่โหลดไวกว่าแทนได้
  2. เครื่องเซิฟเวอร์ที่เราใช้โฮสต์เว็บไซต์ ใช้ทรัพยากรในการส่งข้อมูลมากขึ้น ซึ่งบางผู้ให้บริการจะคิดราคาเพิ่มตามปริมาณข้อมูลที่ใช้
  3. ส่งผลต่ออันดับเว็บไซต์ใน search engine อย่างแน่นอน เว็บไซต์คู่แข่งที่โหลดได้ไวกว่ามีโอกาสจะไต่อันดับได้ดีกว่าด้วย
  4. ส่งผลต่อประสบการณ์ผู้ใช้ ดังที่กล่าวไปในข้อแรก คือไม่อยากรอโหลดนาน มีโอกาสออกจากหน้าเว็บไซต์เราได้

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

tinypng
tinypng ลดขนาดไฟล์ภาพทั้งหมดให้ได้มากถึง 19MB แหนะ!

วิธีลดขนาดไฟล์ภาพให้เล็กลง

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

ย่อขนาดไฟล์ภาพออนไลน์ด้วย TinyPNG

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

ติดตั้งโปรแกรม ImageOptim เพื่อลดขนาดไฟล์

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

ImageOptim
ตัวโปรแกรมสามารถตั้งค่าการบีบอัดไฟล์แต่ละประเภทได้ด้วย

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

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

photobulk
โปรแกรม photobulk สำหรับ mac

และนี่ก็เป็นอีกหนึ่งวิธีง่ายๆ สำหรับผู้ที่ต้องการทำให้เว็บไซต์เร็วขึ้นโดยการบีบอัดขนาดไฟล์ภาพ โดยไม่ต้องอาศัยทักษะการเขียนโปรแกรมเลยครับ นอกจากนั้นสำหรับคนที่ใช้ WordPress ในการสร้างเว็บไซต์แล้ว เรายังสามารถหาปลั๊กอินเสริมช่วยในการบีบอัดไฟล์ภาพอย่าง Smush Image Compression and Optimization หรือ EWWW Image Optimizer มาใช้งานได้เลยทันทีโดยที่ไม่ต้องเปิดเว็บไซต์อื่น หรือติดตั้งโปรแกรมเสริมในเครื่องคอมพ์ของเราครับ