Skip to content

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

A picture is worth a thousand words

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

ShortPixel

บีบอัพภาพ ปรับขนาดภาพด้วย ShortPixel

คือปลั๊กอินที่ไว้ใช้สำหรับการการบีบอัพภาพ เพื่อให้ภาพที่เราอัพโหลดขึ้นไปยังเว็บนั้นมีขนาดที่เล็กลง เพราะภาพที่เราอัพโหลดนั้นมีข้อมูลอื่นๆ อีกหลายอย่างที่ทำให้ภาพนั้นมีขนาดใหญ่อยู่ด้วย ShortPixel จะช่วยในการลบข้อมูลเหล่านี้และข้อมูลอื่นๆ ด้วยอัลกอริทึ่มของปลั๊กอิน ไฟล์ที่ปลั๊กอินรองรับมีทั้ง JPG,PNG,GIF,PDF และแถมสร้าง WebP ทำให้เราได้ภาพที่โหลดได้เร็วขึ้นบนบราวเซอร์ Chrome/Opera/Android

การติดตั้งปลั๊กอิน ShortPixel

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

การใช้งาน ShortPixel

กรอก API Key ที่ได้จากเว็บก่อนหน้านี้แล้วคลิกปุ่ม Validate

ตั้งค่าการบีบอัดภาพ

ในเมนู Settings > ShortPixel เราจะเจอกับแท็บ General เป็นอันแรก เป็นการตั้งค่าทั่วไปเกี่ยวกับการบีบอัดภาพหรือ Compression โดยจะมีตัวเลือก 3 แบบ ก็คือ Lossy, Glossy, Lossless อยู่ที่ว่าเรารับได้ในระดับไหน

shortpixel compression
  • Lossy บีบอัดแบบเล็กที่สุดโดยให้ภาพที่ดูด้วยตาแล้วแทบไม่แตกต่าง สามารถลองคลิกดูความแตกต่างก่อนได้โดยคลิกที่ลิงค์ here
  • Glossy บีบอัดน้อยกว่าแบบแรกหน่อย เหมาะสำหรับเว็บที่ต้องการภาพที่ชัดเจนมากกว่า เช่น ช่างภาพ
  • Lossless แบบเสียความละเอียดน้อยที่สุด เช่น ภาพวาด ภาพศิลปะต่างๆ ที่ต้องการความเพอร์เฟคเหมือนต้นฉบับที่สุด

Also include thumbnails เป็นการกำหนดว่าใช้กับภาพ Thumbnails ด้วยหรือไม่ ภาพเหล่านี้คือภาพที่ WordPress สร้างขึ้นโดยอัตโนมัติเมื่อเราอัพโหลดภาพขึ้นไปบางภาพเช่น ภาพ  Featured Image จะมีการสร้าง Thumbnails ตามที่ได้มีการระบุไว้ในธีมหรือปลั๊กอินที่เราใช้งาน เช่น ถ้าเรามีปลั๊กอิน WooCommerce มันก็จะมีการสร้างภาพ Thumbnails สำหรับปลั๊กอินนี้ด้วย ซึ่งบางเว็บอาจจะมีภาพเพิ่มมากหรือน้อยก็อยู่ที่นี่ตรงนี้แหละ หากเราไม่ต้องการให้บีบ Thumbnails ด้วยก็ไม่จำเป็นต้องติ๊กนะคะ เพราะบางเว็บอาจจะเน้นเฉพาะภาพใหญ่ในบทความเท่านั้น ก็จะประหยัดจำนวนภาพไปได้เยอะเลยค่ะ

Image backup สร้างโฟลเดอร์ Backup ไว้ เพื่อให้เราสามารถที่จะนำเอาภาพต้นฉบับกลับมาแทนได้หากเราไม่ชอบภาพหลังการบีบอัด

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

Resize large image ใช้สำหรับในกรณีที่เราอาจจะมีภาพขนาดใหญ่ถูกอัพโหลดขึ้น เช่น เว็บข่าวที่ทำงานกับผู้เขียนคนอื่น ที่เขาอาจจะไม่ได้สนใจว่าจะต้องย่อรูป ปรับขนาดภาพหรือเปล่า การอัพภาพขนาด 4000 x 4000 pixel ขึ้นไปบนเว็บอาจจะทำให้ภาพมีขนาดที่ใหญ่มากและไม่มีความจำเป็นสำหรับการใช้งาน เราสามารถใส่ค่าความกว้างและความสูงสูงสุดที่เราต้องการให้ปลั๊กอินทำการปรับขนาดภาพให้อัตโนมัติได้ ไม่ควรต่ำกว่า 1024 pixel เผื่อในกรณีที่เราอาจจะทำการปรับขนาดภายหลัง

Advanced

Additonal media folders สำหรับเพิ่มโฟลเดอร์อื่นที่นอกเหนือจากโฟลเดอร์ uploads ของ WordPress ในกรณีที่เรามีการสร้างโฟลเดอร์ไว้เก็บภาพนอกเหนือจากนี้

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

CMYK to RGB conversion สำหรับแปลงภาพที่ใช้ชุดสีแบบ CMYK เป็น RGB เพราะภาพที่แสดงบนหน้าจอปกติจะเป็นภาพแบบ RGB เท่านั้น

WebP versions สร้างไฟล์ภาพแบบ WebP ซึ่งมีขนาดเล็กกว่าไฟล์แบบอื่นๆ มาก แต่รองรับเฉพาะ Chrome/Opera/Android แต่ Chrome ก็ถือเป็นบราวเซอร์ที่มีคนใช้งานมากที่สุด

Generate WebP markup สร้างแท็ค <picture> สำหรับให้บราวเซอร์ที่ไม่ซัพอร์ต WebP เช่น Safari เรียกใช้ภาพแบบปกติแทน

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

Optimize other thumbs สำหรับการบีบอัดภาพ thumbnails อื่นๆ ที่อาจไม่ได้เป็น thumbnails ปกติ

Optimize media on upload ทำการบีบอัดทำทีเมื่อมีการอัพโหลด ปกติแล้วเราจะเปิดไว้เลย โดยเฉพาะเวลาที่มีคนเขียนหลายคน กันการลืมบีบ

Statistics

เป็นแท็บที่แสดงปริมาณการใช้งานว่าใช้ไปแล้วกี่ภาพ เหลือใช้ได้อีกกี่ภาพ

Bulk Optimize

คือการบีบอัดทีเดียวทั้งเว็บ สำหรับเว็บที่ไม่เคยทำเลย หรือนานๆ ทำทีนึงเป็นต้น ระบบจะทำการค้นหาภาพที่ยังไม่ผ่านการ Optimize ซึ่งการคำนวนก็จะขึ้นอยู่กับว่าเราตั้งค่าให้  Include thumbnails  ด้วยหรือไม่ เพราะถ้าทำด้วยมันก็จะมากขึ้น 2-3-4 เท่าตัวตามจำนวนภาพ thumbnails นั่นเอง โดยสามารถทำการ Bulk Optimize ได้ที่เมนู Media > Bulk ShortPixel  แล้วคลิกปุ่ม Start Optimizing และเปิดหน้านี้ทิ้งไว้จนกว่าจะเสร็จ หากเผลอปิด ก็ต้องเข้ามา Restart optimizing ภาพที่เหลือใหม่

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

หรือจะติ๊กเลือกเฉพาะภาพที่ต้องการแล้วเลือก Optimize with ShortPixel และคลิก Apply ก็ได้เช่นกัน

หลังจากการ Optimize แล้ว เราสามารถที่จะคลิกที่เมนูเพื่อทำการเปรียบเทียบภาพก่อนหลังได้ หรือทำการ Optimize ด้วยความละเอียดแบบอื่นก็ได้ หรือ Restore ภาพต้นฉบับจาก backup ก็ได้

การเลือกใช้ภาพให้เหมาะกับเว็บ

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

PNG

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

เปรียบเทียบขนาดไฟล์ PNG/JPEG เมื่อใช้ JPEG แบบ 100% quality

ในขณะเดียวกัน เราสามารถใช้ข้อดีของภาพประเภท PNG ได้ด้วย คือ การที่เราสามารถกำหนดจำนวนสีให้กับภาพ PNG บางประเภทได้ เช่น ภาพ vector ที่ไม่ได้มีการไล่ระดับสี อย่างภาพการ์ตูน 2D หรือแม้แต่ภาพที่ได้จากการจับภาพหน้าจอของเว็บเราส่วนใหญ่นั้นก็ใช้ภาพแบบ PNG โดยการจำกัดจำนวนสีที่ต้องการให้แสดงก่อน ทำให้ได้ภาพที่มีขนาดเล็กมาก โดยที่ให้ความคมชัดคุณภาพสูงมากกว่าแบบ JPG และไม่เละง่ายเท่า JPEG เมื่อถูกบีบอัด

จาก 28kb เหลือเพียง 7kb จากการจำกัดจำนวนสีเพียง 64 สี

JPG

ภาพประเภทนี้เหมาะอย่างยิ่งกับภาพประเภทภาพถ่ายทั่วไป เพราะมีขนาดไฟล์ที่เล็กกว่าแบบ PNG มาก แต่ภาพแบบนี้จะเสียง่ายกว่าเมื่อใช้โปรแกรมบีบอัด โดยปกติถ้าบีบอัดโดยใช้คุณภาพต่ำกว่า 80% ลงมาก็จะเริ่มเห็นว่าภาพเริ่มจะเละแล้ว ส่วนใหญ่เราจะบีบที่ 90% สามารถใช้โปรแกรม Photoshop โดย Save for web หรือโปรแกรมฟรีอย่าง Photoscape ก็ได้เช่นกัน ภาพแบบ JPG นี้ยังใช้เวลาในการบีบอัดน้อยกว่าด้วย ทั้งจากโปรแกรมหรือปลั๊กอิน

GIF

คล้ายกับแบบ PNG สามารถรองรับภาพพื้นหลังใสได้เช่นกัน และยังสามารถแสดงภาพแบบ Animation ได้ ปกติเราจะใช้เวลาทำภาพเคลื่อนไหวเท่านั้น

การเตรียมภาพให้เหมาะสมสำหรับการใช้งานบนเว็บ

นอกจากการใช้ปลั๊กอินแล้ว เรายังสามารถเตรียมภาพก่อนการอัพโหลดโดยใช้โปรแกรมคอมพิวเตอร์ก่อนก็ได้

Photoscape ฟรี สามารถบีบอัดภาพ JPG ได้ ดูตัวอย่างได้ที่ภาพก่อนหน้านี้

Photoshop เสียตังค์ บีบอัดได้ทั้ง JPG,PNG แบบ Save for web legacy

ImageAlpha (Mac)ใช้สำหรับการปรับแต่งภาพ PNG โดยสามารถกำหนดลักษณะการบีบอัดและจำนวนภาพที่ต้องการให้แสดงได้

ImageOptim (Mac) ใช้สำหรับบีบอัดภาพได้ทั้ง JPEG,PNG และ GIF

ShortPixel เปรียบเทียบกับปลั๊กอินบีบอัดภาพตัวอื่นๆ

เราได้ลองทำการเปรียบเทียบ ShortPixel กับปลั๊กอินบีบอัดภาพตัวอื่นๆ ที่เป็นที่นิยม คือ Imagify, Ewww Image Optimizer, Smush, Compress JPEG & PNG Images เพื่อดูว่าตัวไหนบีบอัดภาพได้ขนาดเล็กที่สุด

ภาพต้นฉบับมีขนาดไฟล์ 7.6MB ไฟล์แบบ JPEG จาก Picjumbo

ทุกปลั๊กอินใช้เวอร์ชั่น Pro เพื่อการตั้งค่าการบีบอัดแบบสูงสุดที่แต่ละตัวทำได้ และเพื่อรองรับขนาดไฟล์ภาพขนาดใหญ่

Ewww Image Optimizer : 973kb
ShortPixel : 525kb
Imagify : 1.48mb
Smush Pro: 1mb
Compress JPEG & PNG images : 979kb

ภาพที่ได้เมื่อมองด้วยตาเปล่าปกติแทบไม่ต่างกัน อาจจะเพราะเป็นภาพขนาดใหญ่ด้วย จากการทดสอบจะเห็นว่า ShortPixel บีบจนเหลือเล็กสุดที่ 525kb คิดเป็น 89.92% แต่ถ้าหากทดสอบด้วย SSIM เพื่อใช้อัลกอริทึ่มของคอมพิวเตอร์ในการเปรียบเทียบความต่างกับภาพต้นฉบับพบว่า จริงๆ แล้ว ShortPixel ใช้ระดับการบีบอัดมากกว่าตัวอื่น คือ quality 40% (จะต่างจาก quality ของโปรแกรมบนคอมนะคะ บนคอมต่ำกว่า 50 ก็เละแล้วค่ะ) ทำให้ได้ภาพที่ขนาดเล็กกว่า แต่เป็นที่น่าสังเกตว่า Imagify ที่ใช้ระดับการบีบอัดเท่ากันกับ Smush แต่กลับมีขนาดที่เกินมาถึง 480kb ส่วนที่ใกล้เคียงกันก็คือ Ewww Image Opimizer, Smush Pro, Compress JPEG & PNG images ซึ่งทั้ง 3 ตัวนี้ มีเพียง Ewww Image Optimizer ตัวเดียวที่แถม WebP ให้ด้วยค่ะ

Similarity by SSIM:

1 - Identical images
0 - Completely different images

EWWW Image Optimizer : 0.9993 973kb
ShortPixel : 0.9986 525kb
Imagify : 0.9999 1.48mb
Smush Pro : 0.9999 1mb
Compress JPEG & PNG images: 0.9993 979kb

Mozjpeg (quality: default 75) : 0.9998 1mb
Mozjpeg (quality: 40) : 0.9986 522kb

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

ราคา

ShortPixel ให้เราใช้ฟรีเดือนละ 100 รูป และนอกเหนือจากนั้นก็จะมีทั้งแพลนแบบรายเดือนกับแบบซื้อเหมา แบบรายเดือนจะได้เยอะกว่าพอประมาณ ถ้าทำ Bulk optimize ครั้งแรกเราอาจจะเลือกแบบรายเดือน แล้วรอบต่อไปก็ใช้แบบซื้อเหมาจะดีกว่า เพราะไม่มีวันหมดอายุจนกว่าจะใช้หมด อย่าลืมลงปลั๊กอินแล้วคำนวนรูปดูก่อนนะคะ เพราะบางเว็บมี Thumbnails หลายขนาดมาก ก็จะเปลืองมากค่ะ โดยส่วนตัวปลั๊กอินนี้ราคาโอเค ไม่แพง มีโปรบ่อยตอนต่ออายุ

รายเดือน
เหมาๆ

Adaptive Image

ปัจจุบัน ShortPixel ได้มีบริการเพิ่มมาอีกตัวคือ Adaptive Image ที่ช่วยเราบีบอัดและเสริฟภาพผ่าน CDN ของเขาอัตโนมัติ ซึ่งนอกจากภาพจะเล็กลงแล้ว ยังช่วยให้เรากำจัดพวกคะแนน Page Speed เกี่ยวกับ Cookie free domain ในส่วนของรูปภาพได้อีกด้วย ซึ่งนอกจากจะรวมคุณสมบัติทุกอย่างของ ShortPixel ตัวเดิมแล้ว ยังเพิ่มคุณสมบัติในการสร้างภาพที่มีขนาดพอดีกับการแสดงผลบนหน้าเว็บของเราเป๊ะๆ มาให้อีกด้วย แต่มีค่าใช้จ่ายเป็นรายเดือนนะ

ปลั๊กอินบีบอัดภาพอื่นๆ

Ewww Image Optimizer มีทั้งแบบเดือนและเหมาเช่นกัน ไม่ต่างกันมาก แบบรายเดือนจริงๆ แล้วก็ไม่ค่อยเหมือนรายเดือน เพราะเขาไม่ได้เก็บทุกเดือน จะเก็บเมื่อครบ 3,000 ภาพขึ้นไปเท่านั้น ราคาอยู่ที่ภาพละ $0.003 มี WebP แถมให้ด้วย เป็นตัวรองที่เราชอบ เพราะสามารถกำหนดบีบอัดเฉพาะ thumbnails ที่ต้องการได้ ไม่เปลืองดี

Compress JPEG & PNG Images ราคาจะแรงกว่าเพื่อน ทั้งๆ ที่หน้าเว็บให้บริการฟรี แต่เมื่อใช้ API กับปลั๊กอิน ราคาจะอยู่ที่ $0.009 ต่อภาพเลยทีเดียว

Imagify คิดตามขนาดที่ใช้ รายเดือนได้เยอะกว่าแบบเหมาเป็นเท่าตัว เจ้านี้บีบอัดได้น้อยกว่าเพื่อน เลยไม่สนใจเท่าไหร่ค่ะ Ewww ดีกว่า

Optimus ตัวนี้ถูกสุด ปีละ $29 มี WebP ด้วย แต่จากที่เคยใช้ เซิฟเวอร์ที่เยอรมันจะช้านิดนึง และเนื่องจากจำกัดภาพละ 5mb เลยน่าเสียดายที่เราไม่ได้ลองนำมาทดสอบเปรียบเทียบ

Smush Pro คิดเป็นรายเดือน $49 ตัวนี้ค่อนข้างแพง เพราะขายรวมกับปลั๊กอินทุกตัวและบริการอื่นๆ ของเขาทั้งหมดด้วย เรียกว่าซื้อบริการมากกว่า ถ้าใช้ทั้งหมดนั่นก็ถือว่าคุ้มเลยล่ะ ถ้าใช้แต่ Smush ไม่คุ้ม ตัวฟรีบีบได้ไม่มากค่ะ

ShortPixel Image Optimizer
บทสรุป
ShortPixel เป็นปลั๊กอินที่ใช้งานได้ดีเช่นเดียวกับปลั๊กอินอื่นๆ ราคาไม่แพงมาก มักมีโบนัสแถมให้ค่อนข้างเยอะ บางครั้งต่ออายุได้แบบ Double เลย สนับสนุน WebP สำหรับบราวเซอร์ Chrome ที่คนใช้งานมากที่สุด ทำให้มีขนาดเล็กลงไปอีก
Customizability
Feature Availability
Easy to use
Optimized Quality
ข้อดี
บีบอัดได้ขนาดเล็กสุด
สนับสนุน WebP
สามารถ Restore ได้
ราคาไม่แพงมากหากเทียบกับตัวอื่นๆ
ข้อเสีย
การบีบอัดสูงสุดอาจทำให้ภาพเสียความละเอียด
ไม่สามารถเลือกเฉพาะ Thumbnails ที่ต้องการได้
4.2
คะแนน
Back To Top
Search