บีบขนาดภาพเพิ่มความไวเว็บไซต์

[fox4]

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

ทำไมรูปภาพถึงส่งผลต่อการโหลดหน้าเว็บไซต์

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

การทำให้ภาพเบาขึ้น

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

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

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

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

4 เข้าโปรแกรมลดขนาดภาพ ข้อนี้ถือว่าเป็น ไฮไลท์ ของบทความนี้เลยครับ นั่นก็คือการใช้โปรแกรมหรือบริการออนไลน์เพื่อลดน้ำหนักของภาพ แต่คุณภาพไม่เสียไปมากนัก

5 หลีกเลี่ยงการใส่ effact ให้ภาพ ตรงไหนไม่จำเป็นก็ไม่ต้อองใส่ครับเพราะเป็นการเพิ่มโค้ด เพิ่มการประมวลผลให้โหลดช้าขึ้น


แนะนำเว็บไซต์ลดขนาดภาพออนไลน์ เพื่อใช้ทำภาพประกอบในเว็บไซต์

เว็บไซต์ที่แนะนำก็คือ https://tinypng.com/ เป็นเว็บที่ผมใช้บ่อยมากที่สุด เพราะ ใช้ง่าย สะดวก ไม่มีปัญหาทางเทคนิคให้รำคาญใจเลย



วิธีการใช้งาน

1.ไปที่เว็บไซต์ https://tinypng.com/

2.กดไปที่  " Drop your .png or .jpg files here! " เพื่อเลือกรูปภาพที่ต้องการ จะทีละรูปหรือหลายรูป ก็ได้ครับ

3.ระบบจะเริ่มทำงาน เมื่อเสร็จเราก็ดาวน์โหลด ออกมาเก็บไว้ครับ

ถ้าชอบหรือไม่ชอบก็ + 1 ด้วยจะดีมากเลยครับ ไม่ได้โดน + 1 มานานมากละครับ  

[Legolas]

+1 ให้ครับ

[fox4]

ในไทยเสียวนี่น่าแบ่งสายคนนอนดึก คนนอนกลางวัน ครับคุณครับ ดีใจในรอบหลายเดือนในโลกไทยเสียว 

[tumtac]

ของผม คงไม่ทันรับประทานมั๊งครับ (แซวๆๆ)




คือว่าวันดีคืนดี เช่นวันนี้ ได้ถอดเอาไฟล์รูปภาพ ทั้งหลายนามสกุล เอามาลดขนาดลด ซึ่งได้เยอะเหมือนกัน
จาก 486 Mb เหลือ 256 Mb

ชื่อโปรแกรม FastStone Photo Resizer  เป็นของฟรีครับ ลดได้ แถมแปลงได้หลายนามสกุลเหมือน
ใช้มานานมากแล้ว เดียวไปลงทะเบียนแบบเสียตังค์ดีกว่า  ใช้ฟรีมานานแล้ว

เดียวก็นอนแล้วครับ...

[Gangzaa!]

ขอบคุณครับ

[coolsweet]

ขอบคุณคร้าบผม 

[nonkungzacb]

ขอบคุณครับสำหรับเทคนิดดีๆที่นำมาแชร์กัน

[Jir4yu]

เห็นด้วยครับ อย่าง tinypng, tinyjpg เนี่ยผมใช้บ่อยมากก่อนจะอัพขึ้นเว็บไซต์มาทำอะไรก็ตามแต่
ส่วน wordpress ก็ดีหน่อยใช้ plugin พวก ewww image optimizer จัดการรูปภาพให้

ลดขนาดไปได้เยอะ ยิ่งใช้กับ lazyload ด้วย เว็บเร็วขึ้นมากเลยครับ

[gd,lN]

ใช่แล้วครับ รูปภาพทำให้โหลดเร็วขึ้น ลองเทสกับ g speed test ละ

[BIGALOW]

+1  ให้แล้วครับ

ขอบคุณ จขกท. มากๆ ครับ

เดี๋ยวผมลองไปใช้ดูมั่งนะ เว็บดีมีประโยชน์