Transform
Ideas Into Gems

let JindaTheme build platforms for your business

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

In: SEO and Tools Published: 14/10/2018

ปัจจัยนึงที่ทำให้เว็บไซต์ของเราสามารถไต่อันดับได้ดีบน 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 มาใช้งานได้เลยทันทีโดยที่ไม่ต้องเปิดเว็บไซต์อื่น หรือติดตั้งโปรแกรมเสริมในเครื่องคอมพ์ของเราครับ

This might interest you

image

Schema Markup พระเอกตัวจริงสำหรับการทำ Onpage SEO

Schema Markup ที่ถูกลืม onpage SEO นั้นถือเป็นอีกหนึ่งหัวใจหลักสำหรับการทำ SEO ให้กับเว็บไซต์ เพ... Read more >
image

3 เครื่องมือ ช่วยเพิ่มประสิทธิภาพการทำงานของทีม – เมื่อต้อง WFH

ช่วงโควิด-19 นี้เป็นช่วงที่หลายองค์กรต้องปรับตัวกันอย่างหนักเพื่อให้การทำงานยังสามารถทำต่อไปได้ แ... Read more >
image

3 เทคนิคเปลี่ยนจากผู้ใช้ทั่วไป ให้กลายมาเป็นสมาชิก

การทำ user onboarding นั้นถือเป็นเรื่องสำคัญของแพลตฟอร์มดิจิตอลในปัจจุบัน ยิ่งกับเว็บไซต์หรือแอปท... Read more >

Please fill up this form

Our team will estimate the price from your details and send a quotation to your email.

Notifications

Thank you, we have received your message.

preloader

Preparing, please wait a moment.