รูปภาพเป็นไฟล์สื่อที่เว็บไซต์ทุกเว็บนำไปใช้ประกอบเนื้อหา หลายๆเว็บประสบปัญหาหน้าเว็บไซต์โหลดช้าซึ่งสาเหตุหลักๆที่ผมเจอก็มักจะมาจากรูปภาพนี่แหละครับ บางทีก็ใช้ขนาดรูปภาพไม่เหมาะสม บางครั้งก็ใช้ฟอร์แมตรูปภาพไม่ตรงกับการใช้งานบ้าง เว็บมาสเตอร์หลายๆคนก็พยายาม Optimize รูปภาพในเว็บไซต์ของตน แล้ววัดประสิทธิภาพด้วย PageSpeed Insights ทำตามคำแนะนำแล้วคะแนนก็ไม่ขึ้นซักที บางทีไม่เข้าใจว่าต้องทำยังไงกันแน่ บีดอัดแล้วก็เหมือนเดิม วันนี้เราจะมาดูกันครับว่าจะต้องทำยังไง
ก่อนที่เราจะไปทำการ Optimize หรือภาษาไทยแปลมาว่า “เพิ่มประสิทธิภาพ” ให้กับรูปภาพ เรามารู้จักกับรูปแบบของภาพ หรือ ฟอร์แมตของภาพที่นิยมใช้งานในเว็บไซต์กันก่อนว่ามันมีอะไรบ้างและแบบไหนมันเหมาะสมกับการนำมาใช้งาน
รูปแบบของภาพที่นิยมใช้งาน (Universal format)
เริ่มต้นด้วยการเลือกรูปแบบสากลที่ถูกต้อง: GIF, PNG, JPEG คุ้นๆกันรึยังครับ เราจะสังเกตรูปแบบได้จากนามสกุลของรูปภาพ ซึ่งโดยทั่วไปที่นิยมใช้งานกันก็จะมีสามแบบคือ *.gif , *.png และ *.jpg นั่นเอง การเลือก “รูปแบบที่เหมาะสม” สำหรับการใช้งานจะช่วยให้เราเพิ่มประสิทธิภาพให้กับเว็บไซต์ได้ เรามาดูกันว่าแต่ละแบบเหมาะกับการใช้งานแบบไหน แล้วเราจะเลือกใช้นามสกุลภาพหรือฟอร์แมตแบบไหนดี?
จากตารางด้านบน ถ้างานของเราต้องการภาพที่สามารถโปร่งใสได้รูปแบบภาพที่รองรับมีสองแบบคือ PNG และ GIF แต่ถ้างานของเรามีการทำ Animation ด้วยก็ให้เลือกเป็น GIF นั่นเอง สรุปออกมาเป็นแผนผังต้นไม้ให้ดูกันง่ายๆ
อ่านมาถึงตรงนี้แล้วยังงงๆ อ้าวแล้ว PNG กับ JPEG มันต่างกันแค่โปร่งใสได้กับโปร่งใสไม่ได้ แล้วจะเลือกแบบไหนดีหละเนี๊ยะ งั้นสรุปพร้อมรายละเอียดดังนี้เลยนะครับ
1. คุณต้องการภาพเคลื่อนไหวหรือไม่? ถ้าใช้ก็เลือก GIF
2. ต้องการรักษารายละเอียดและคุณภาพของรูปภาพไว้ให้มากที่สุด เลือกใช้ PNG การเลือกใช้ภาพประเภท PNG จะรักษารายละเอียดภาพไม่แตกเมื่อถูกบีดอัดมากๆ แต่ขนาดไฟล์ก็จะใหญ่กว่ารูปแบบอื่นๆ
– ถ้างานของเราประกอบไปด้วยรูปภาพเรขาคณิต สามเหลี่ยม สี่เหลี่ยม แปดเหลี่ยม ถึงแม้ว่า PNG จะตอบโจทย์ เพราะเมื่อเราบีดอัดภาพเยอะๆแล้วภาพมันจะไม่แตก แต่ Ilya Grigorik นักพัฒนาจาก Google แนะนำว่าถ้าภาพของคุณจะมีรูปเรขาคณิตเยอะขนาดนี้ให้ Convert เป็น Vector โลด
– ภาพที่ประกอบไปด้วยตัวหนังสือข้อความ เหมาะที่จะใช้ PNG แต่เดี๋ยวก่อนถ้าจำเป็นต้องทำเป็นรูปภาพจริงๆ เช่นโลโก้ที่มีข้อความและอยากได้พื้นหลังโปร่งใสก็ไม่ว่ากัน แต่อย่าลืมว่าข้อความที่อยู่ในภาพนั้นไม่สามารถค้นหาได้เพราะบอทยังอ่านไม่ออก(อนาคตอันใกล้ไม่แน่) เพราะฉะนั้นควรหลีกเลี่ยง ถ้ามีแต่ข้อความ ก็ควรจะพิมพ์เป็นข้อความไปเลยดีมั้ย
3. รูปภาพทั่วๆไปที่ไม่ต้องการรายละเอียดแบบชัดแจ๋วเห็นรูขุมขนมากนักเลือกใช้ JPG โดยทั่วไปก็นิยมใช้ JPG นี่แหละ
สุดท้ายนี้เมื่อคุณได้กำหนดรูปแบบภาพที่เหมาะสมและการตั้งค่าสำหรับแต่ละเนื้อหาแล้วให้ลองเพิ่มรูปแบบอื่นที่เข้ารหัสใน WebP และ JPEG XR รูปแบบทั้งสองรูปแบบนี้เป็นรูปแบบใหม่และน่าเสียดายที่เบราว์เซอร์ยังไม่ได้รับการรองรับโดยทั่วไป แต่ก็สามารถประหยัดเงินได้มากสำหรับลูกค้ารุ่นใหม่ ๆ เช่นโดยเฉลี่ย WebP จะลดขนาดไฟล์ลงได้ 30% เทียบกับภาพ JPEG แบบเดียวกัน
ขนาดภาพที่เหมาะสม
เมื่อเราเลือกรูปแบบหรือฟอร์แมตของภาพได้แล้วว่าจะใช้แบบไหน ต่อไปก็คือการกำหนดขนาดภาพความกว้าง ความสูง ของภาพให้เหมาะสมกับการนำไปใช้งาน ผมเห็นหลายเว็บตายข้อนี้กันเยอะมากๆยกตัวอย่าง เช่น ภาพไอคอนของเฟสบุ๊ก ซึ่งหน้าเว็บกำหนดให้แสดงผลเล็กมากๆ แต่ไฟล์จริงขนาดอย่างใหญ่เกินความจำเป็นทำให้หน้าเว็บของเราโหลดช้า เพิ่มภาระให้กับเซิร์ฟเวอร์ และฝั่งผู้ใช้งานเว็บก็ไม่ค่อยจะปลื้มเท่าไหร่
วิธีการเช็คขนาดรูปภาพที่ใช้งานบนหน้าเว็บ
ยกตัวอย่างเว็บของผมเองนี่แหละ วิธีการตรวจสอบขนาดของรูปภาพที่แสดงผลและใช้งานจริงด้วย Google Chome ให้เราทำการคลิกขวาที่ภาพที่เราต้องการจะดู แล้วเลือก Inspect
จากนั้นก็ดูรายละเอียดของ Element ที่เราต้องการ เครื่องมือก็จะแสดงให้เราดูว่าพื้นที่ตรงนี้ที่กำลังแสดงผลอยู่มันมีขนาด 100×100 px นะ เพราะฉพนั้นรูปภาพที่จะเอามาใส่ตรงนี้ก็ควรจะเป็นไฟล์ที่มีขนาด 100×100 px ไม่ใช่เอาไฟล์ขนาดที่ใหญ่มากๆมาใช้ เป็นต้น
บีบอัดรูปภาพให้มีความเหมาะสมมากที่สุด
ข้อนี้สำคัญมากๆ เพราะเมื่อเรากำหนดขนาดภาพได้แล้วยังเหลืออีกหนึ่งอย่างที่สำคัญก็คือ ขนาดไฟล์ เราจำเป็นจะต้องมีเครื่องมือในการบีบอัดที่ดี ภาพที่ผ่านการบีบอัดแล้วยังคงคุณภาพที่ดี และขนาดไฟล์จะต้องลดลง พอได้ตามนี้แล้วเว็บเราก็จะโหลดไว ผู้ใช้ก็ปลื้ม
วันนี้ผมจึงมีเว็บดีๆมาแนะนำ เป็นเว็บแอพพลิเคชันที่ใช้งานได้ฟรีๆ บีบอัดได้ทั้ง JPG และ PNG ก่อนที่เราจะอัพโหลดภาพขึ้นไปบนเว็บให้เราทำการบีบอัดภาพก่อนด้วยเว็บนี้เลย >> TinyPNG
TinyPNG สามารถเลือกใช้งานได้ทั้งแบบฟรีและแบบเสียเงิน แต่เราใช้แบบฟรีก็เพียงพอแล้ว แต่ก็จะมีข้อจำกัดตรงที่เราจะสามารถอัพโหลดไฟล์ขึ้นไปเพื่อบีบอัดได้ครั้งละ 20 ภาพ แต่ผมว่าเท่านี้ก็เหลือรัปประทานแล้วหละครับ
วิธีการใช้งานก็ง่ายมากๆ เราสามารถลากไฟล์จากเครื่องเราขึ้นไปที่หน้าเว็บเพื่ออัพโหลดได้เลย
- ดาวน์โหลดไฟล์ของเราหลังการบีบอัด ตรงนี้ละเลือกดาวน์โหลดได้ทีละไฟล์
- พื้นที่หรือขนาดไฟล์ลดลงได้เท่าไหร่ ตรงนี้คำนวณออกมาให้เป็นเปอร์เซ็นต์
- บันทึกไปไว้ที่ Drobbox หรือจะ Download all เป็น zip ไฟล์ก็ได้
- จำนวนพื้นที่ทั้งหมดที่ลดลงหลังจากการบีบอัด คิดเป็นเปอร์เซ็นต์ให้เราเรียบร้อย
หลังจากที่บีบอัดไฟล์เรียบร้อยแล้วก็นำไฟล์ที่ได้ไปใช้งานต่อได้เลย
ข้อมูลเพิ่มเติม :
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization https://www.labnol.org/software/tutorials/jpeg-vs-png-image-quality-or-bandwidth/5385/ http://stackoverflow.com/questions/1698330/webdesign-jpg-or-png-which-one-is-the-best-for-web