ชนิดไฟล์รูปภาพในงานเว็บไซต์
รูปภาพเป็นสิ่งสำคัญอย่างมากในการสร้างเว็บไซต์ เพราะจะทำให้ผู้อ่าน เข้าใจเรื่องราวที่นำเสนอมากยิ่งขึ้น เว็บไซต์มีความน่าสนใจมากขึ้น หากเป็นเว็บไซต์ขายสินค้ารูปภาพก็จะช่วยให้ผู้ซื้อเห็นสินค้าเบื้องต้นเพื่อประกอบการตัดสินใจซื้อ และหากเว็บไซต์เป็นลักษณะโปรไฟล์หรือให้บริการ รูปภาพก็จะช่วยสร้างความน่าเชื่อถือให้กับธุรกิจของคุณ
สิ่งที่จะต้องคำนึงในการนำรูปภาพมาในงานเว็บไซต์
ภาพควรจะมีขนาดที่เหมาะสม รูปภาพที่มีขนาดเล็กแต่ไม่สูญเสียคุณภาพ โดยมากการรูปภาพขนาดเล็ก เว็บจะโหลดได้เร็วขึ้น ซึ่งมีผลการประเมินประสิทธิภาพของเว็บไซต์บน Google ให้อยู่ในลำดับที่ดี แต่อาจจะไม่เป็นที่พอใจของผู้อ่านนัก เพราะคุณภาพของรูปจะถูกลดทอนทำให้รูปภาพเบลอและไม่ชัดได้ ในทางกลับกันหากเราใช้รูปภาพที่มีคุณภาพสูง คม ชัด ย่อมทำให้ขนาดไฟล์รูปภาพมีขนาดใหญ่ตามไปด้วย ผลคือหน้าเว็บไซต์ของเราจะโหลดช้าอย่างมาก ผลการประเมินประสิทธิภาพของเว็บไซต์บน Google ก็จะไม่อยู่ในลำดับที่ดีนัก แถมเมื่อผู้อ่านต้องรอโหลดเว็บเป็นเวลานานหลายวินาที นั้นย่อมทำให้เว็บเราถูกมองข้ามไปในทันที
ชนิดไฟล์รูปภาพในงานเว็บไซต์
ไฟล์รูปภาพหลักๆ ที่ใช้บนเว็บไซต์ที่เป็นที่นิยมกันอยู่ในปัจจุบัน คือ .gif , .jpg , . png , .Svg , .Webp ซึ่งในอนาคตอาจมีเพิ่มเติมเข้ามาอีก แต่ในบทความนี้เราจะแนะนำหลักๆ ดังนี้
ไฟล์ JPEG หรือ JPG (Joint Photographic Experts Group)
เป็นไฟล์ที่มีนามสกุล .jpeg หรือ .jpg เป็นไฟล์ที่พัฒนาเพื่อใช้งานกับภาพที่มีสีสันสดใสและความละเอียดสูงสามารถเก็บภาพได้ 24 บิตสี สามารถแสดงสีได้ถึง 16.7 ล้านสี
พบได้ทุกที่ตามเว็บเบราวเซอร์และสมาร์ทโฟน สำหรับการแสดงผลในเว็บไซต์ ไฟล์ jpg เหมาะสำหรับการใช้งานทั่วไป
ข้อดีของไฟล์ JPEG
- ไฟล์ JPEG อาจเรียกได้ว่าเป็นรูปแบบไฟล์ภาพที่มีการใช้งานอย่างกว้างขวางที่สุด ซึ่งเข้ากันได้กับเบราวเซอร์ ซอฟต์แวร์ และแอปส่วนมาก
- ขนาดไฟล์ที่เล็กทำให้ผู้ใช้ถ่ายโอนไฟล์ได้เร็วและสามารถเข้าถึงเพื่อดูไฟล์บนโลกออนไลน์ได้อย่างว่องไว ไฟล์ JPEG สามารถมีขนาดที่เล็กที่สุดเท่าที่จะเป็นไปได้ โดยการบีบอัดแบบละทิ้งสีที่ดวงตามนุษย์ไม่สามารถแยกออก
- กระบวนการปรับแต่งภาพหลังการถ่ายจะง่ายขึ้นเนื่องจากสมดุลสีขาวและความเข้มในไฟล์ JPEG นั้นถูกกำหนดไว้แล้วตั้งแต่ตอนกดชัตเตอร์
ข้อเสียของไฟล์ JPEG
- การบีบอัดไฟล์อาจช่วยประหยัดพื้นที่ แต่คุณภาพจะไม่ค่อยดีนัก รูปภาพที่มีขอบและเส้นชัดเจนจะสูญเสียความคมชัดไปในระหว่างการบีบอัด
- การสูญเสียข้อมูลจำนวนมากอาจก่อให้เกิด Posterization ซึ่งรูปภาพจะสูญเสียการไล่ระหว่างสีที่เรียบเนียน ทำให้รูปภาพแลดูแตกแยกเป็นบล็อก และขาดตอน นอกจากนี้ยังอาจก่อให้เกิดรอยหยักบนขอบ วงแสง หรือนอยส์ ซึ่งอาจส่งผลกระทบรุนแรงต่อคุณภาพของรูปภาพได้
ไฟล์ GIF (Graphics Interchange Format)
ไฟล์รูปภาพ GIF มักถูกนำไปใช้เพื่อแสดงภาพกราฟิกและโลโก้บนเว็บ นอกจากนี้ ไฟล์ประเภทนี้ยังรองรับภาพเคลื่อนไหวขั้นพื้นฐาน จึงเป็นรูปแบบไฟล์ยอดนิยมสำหรับมีมบนเว็บไซต์โซเชียลมีเดีย
ข้อดีของไฟล์ GIF
- ภาพเคลื่อนไหว GIF นั้นไม่มีความซับซ้อน จึงทำให้แสดงผลเร็วและสร้างไฟล์ได้ง่าย ไม่ต้องใช้ความรู้ทางเทคนิคมาก และสามารถเผยแพร่ในเว็บไซต์โซเชียลมีเดียได้ เช่นรูปมีม คลิปตลกสั้นๆ
- มีขีดจำกัดของสีในไฟล์ GIF ทำให้ไฟล์มีขนาดค่อนข้างเล็ก ซึ่งช่วยให้โหลดไฟล์บนหน้าเว็บได้รวดเร็วขึ้น
- ไฟล์ GIF นั้นมีฟีเจอร์ที่เรียกว่าการบีบอัดแบบไม่สูญเสียข้อมูล ซึ่งทำให้คุณภาพของรูปภาพไม่ลดลงเมื่อบีบอัดข้อมูลในไฟล์
ข้อเสียของไฟล์ GIF
- รูปแบบไฟล์ GIF รองรับเฉพาะจานสี 256 สีเท่านั้น ซึ่งหมายความว่ารูปภาพอาจมีความละเอียดต่ำหรืออาจเบลอเล็กน้อย
- ในบางครั้ง การกลับไปแก้ไขไฟล์ GIF แบบเคลื่อนไหวอาจเป็นเรื่องยากเนื่องจากไฟล์ใช้รูปภาพหลายรูป
- แม้ว่าไฟล์ GIF มักจะมีขนาดเล็กและโหลดได้เร็ว แต่ความเร็วในการเชื่อมต่ออินเทอร์เน็ตที่ช้าก็อาจทำให้การแสดงผลไฟล์ประเภทนี้ล่าช้า หรือส่งผลเสียต่อรูปลักษณ์เนื้อหาบนเว็บไซต์ได้
ไฟล์ PNG (Portable Network Graphic)
จะเป็นไฟล์ที่มีนามสกุล .png เป็นไฟล์ที่พัฒนาขึ้นมาโดยนาเอาคุณสมบัติที่ดีเด่นของไฟล์ GIF และ JPG มารวมกัน ซึ่งสนับสนุนจำนวนบิตสีได้ถึง 24 บิต เหมือนกับภาพแบบ JPG
ในขณะที่การบีบอัดไฟล์ใช้การทำงานแบบ GIF การแสดงผลในแบบ Interlace และยังสามารถทำภาพโปร่งใสได้
ข้อดีของไฟล์ PNG
- ไฟล์ PNG สามารถเก็บภาพที่มีรายละเอียดสูงกว่า GIF ได้เพราะรูปแบบไฟล์นี้สามารถรองรับสีได้มากกว่าล้านสี ซึ่งต่างจากไฟล์ GIF ที่รองรับได้เพียงหลักร้อย
- สามารถดูและแก้ไขไฟล์ได้ด้วยโปรแกรมต่างๆ มากมาย
- เมื่อผ่านการบีบอัด ไฟล์รูปภาพ PNG จะไม่สูญเสียข้อมูลใดๆ การเก็บรักษาและถ่ายโอนจึงเป็นเรื่องง่าย ซึ่งเป็นเหตุผลที่ทำให้รูปแบบไฟล์นี้เหนือกว่ารูปแบบสูญเสียข้อมูล เช่น ไฟล์ JPEG ที่ซึ่งข้อมูลจะหายไปในขั้นตอนการบีบอัด
ข้อเสียของไฟล์ PNG
- การเก็บข้อมูลดั้งเดิมทั้งหมดเอาไว้ระหว่างการบีบอัดทำให้ไฟล์ PNG มีขนาดใหญ่กว่าไฟล์ GIF หรือ JPEG ซึ่งหมายถึงการใช้พื้นที่มากขึ้นในฮาร์ดไดรฟ์ในคอมพิวเตอร์ของคุณ
- PNG นั้นถูกออกแบบมาโดยคำนึงถึงเว็บไซต์ตั้งแต่ต้น ไฟล์ประเภทนี้จึงไม่รองรับโหมดสี CMYK ดังนั้นการเปลี่ยนไฟล์เป็นสิ่งพิมพ์อาจทำได้ยาก
- แม้ว่าไฟล์ PNG ที่ผ่านการบีบอัดจะมีรูปภาพที่คุณภาพและรายละเอียดสูง แต่ขนาดไฟล์ที่ใหญ่ก็ทำให้การโหลดหน้าเพจและการตอบสนองช้าลงเช่นกัน
ไฟล์ SVG (Scalable Vector Graphics)
รูปแบบไฟล์ SVG เป็นเครื่องมือที่ได้รับความนิยมสำหรับการแสดงกราฟิกแบบสองมิติ แผนภูมิ และภาพประกอบบนเว็บไซต์
นอกจากนี้ SVG ยังเป็นไฟล์รูปภาพที่สามารถปรับขนาดให้ใหญ่ขึ้นหรือเล็กลงได้โดยไม่สูญเสียรายละเอียดใดๆ ด้วย เนื่องจากเป็นไฟล์เวกเตอร์ เหมาะสำหรับโลโก้และกราฟิกออนไลน์
ข้อดีของไฟล์ SVG
- กราฟิกเวกเตอร์เช่น SVG นั้นสามารถคงระดับคุณภาพเอาไว้ได้ไม่ว่าคุณจะปรับขนาดให้เล็กหรือใหญ่เพียงใดก็ตาม คุณไม่จำเป็นต้องกังวลว่าไฟล์ภาพ SVG จะสูญเสียคุณภาพเมื่อแสดงบนเบราวเซอร์บางชนิดหรือเมื่อคุณปรับขนาดไฟล์เพื่อนำไปแสดงในตำแหน่งต่างๆ
- ไฟล์ SVG แบบพื้นฐานมักมีขนาดเล็กกว่ารูปภาพราสเตอร์ ซึ่งถูกสร้างขึ้นจากพิกเซลสีจำนวนมากแทนที่จะเป็นอัลกอริธึมคณิตศาสตร์
- เนื่องจากไฟล์ SVG จะแสดงข้อความในฐานะของข้อความตัวอักษรจริงๆ (แทนที่จะเป็นงานออกแบบ) โปรแกรมอ่านข้อมูลจากจอจึงสามารถสแกนข้อความที่อยู่ในรูปภาพ SVG ได้ คุณสมบัตินี้มีประโยชน์มากสำหรับผู้คนที่ต้องการอ่านเว็บเพจ นอกจากนี้ โปรแกรมค้นหายังสามารถอ่านและจัดทำดัชนีจากข้อความในรูปภาพ SVG ได้อีกด้วย
ข้อเสียของไฟล์ SVG
- ไฟล์ SVG นั้นเหมาะกับกราฟิกสำหรับเว็บไซต์ เช่น โลโก้ ภาพประกอบ และแผนภูมิ แต่ไฟล์สามารถแสดงภาพถ่ายคุณภาพสูงได้อย่างยากลำบากเนื่องจากไม่ได้ใช้พิกเซล ทั้งนี้ ไฟล์ JPEG นั้นมักเหมาะกับภาพถ่ายที่มีรายละเอียดสูงมากกว่า
- มีเพียงเบราว์เซอร์รุ่นใหม่ๆ เท่านั้นที่สามารถรองรับรูปภาพ SVG ได้ คุณอาจพบปัญหาในการใช้ไฟล์ SVG กับ Internet Explorer 8 และเบราว์เซอร์รุ่นเก่ากว่า
- การทำความเข้าใจโค้ดภายในภาพ SVG เป็นเรื่องยากหากคุณเพิ่งเริ่มใช้รูปแบบไฟล์นี้
ไฟล์ WEBP
Google สร้างรูปแบบไฟล์ WebP ขึ้นเพื่อทำให้รูปภาพออนไลน์มีขนาดเล็กลง ด้วยขนาดของภาพถ่ายและกราฟิกที่ลดลงอย่างมาก
เว็บไซต์ต่างๆ จึงโหลดได้อย่างรวดเร็วและให้ประสบการณ์ที่ดีขึ้นแก่ผู้ใช้
ข้อดีของไฟล์ WebP
- เว็บเพจที่โหลดได้รวดเร็วยิ่งขึ้นจะให้ประสบการณ์ที่ดีกว่าแก่ผู้ใช้ ทั้งยังช่วยเพิ่มอันดับของเว็บไซต์ในโปรแกรมค้นหาอีกด้วย ในทางกลับกัน เว็บไซต์ที่โหลดรูปภาพต่างๆ อย่างเชื่องช้าอาจกระตุ้นให้ผู้คนมองหาผลิตภัณฑ์และบริการบนเว็บไซต์อื่น
- รูปแบบ WebP นั้นสามารถใช้งานได้กับเบราวเซอร์ต่างๆ มากมาย ซึ่งรวมถึง Google Chrome, Microsoft Edge และ Mozilla Firefox
- WebP จะช่วยประหยัดพื้นที่เก็บข้อมูลให้กับธุรกิจได้ด้วยการบีบอัดรูปภาพบนเว็บไซต์ให้อยู่ในขนาดที่จัดการได้ง่ายขึ้น
ข้อเสียของไฟล์ WebP
- ไฟล์ WebP นั้นถูกออกแบบมาเพื่อการใช้งานบนอินเทอร์เน็ตเป็นหลัก ดังนั้นจึงไม่ค่อยมีประโยชน์เท่าไรนักหากคุณใช้งานไฟล์รูปภาพนี้แบบออฟไลน์
- เบราวเซอร์รุ่นเก่าบางส่วน เช่น Internet Explorer อาจไม่สามารถรองรับรูปภาพ WebP ได้อย่างเต็มประสิทธิภาพ แม้ว่ารูปแบบนี้มีความเข้ากันได้กับซอฟต์แวร์และอุปกรณ์ต่างๆ อย่างแพร่หลายก็ตาม
- การบีบอัดข้อมูลแม้เพียงในปริมาณเล็กน้อยก็อาจลดทอนคุณภาพของรูปภาพได้ ซึ่งเป็นข้อเสียที่คุณควรตระหนักหากคุณกำลังทำงานกับช่างภาพมืออาชีพและใช้งานรูปภาพคุณภาพสูง
การเลือกใช้รูปภาพในงานเว็บไซต์
-
ภาพโลโก้
เป็นจุดแรกและจุดสำคัญของเว็บไซต์ เพราจะทำให้ผู้ชมและผู้อ่านจดจำเว็บไซต์และแบรนด์ของเราได้ เมื่อผู้ชมและผู้อ่านนำชื่อแบรนด์หรือบล็อกของเราไป search ใน Google ก็จะพบกับภาพโลโก้ และเว็บไซต์ของเรา ไฟล์รูปภาพโลโก้ที่เหมาะจะนำมาใช้เน้นมีความคมชัด ไม่ถูกบีบอัดมากจนสูญเสียคุณภาพ จึงเหมาะที่จะใช้ไฟล์อย่าง PNG หรือ SVG ถ้าหากโลโก้ของคุณถูกวาดด้วย vector แนะนำให้ใช้ SVG นะคะ จะทำให้ได้ไฟล์ขนาดเล็กพร้อมกับคุณภาพที่คมชัด ส่วนขนาดความกว้างของโลโก้นั้น อาจแตกต่างกันไปตามธีมที่เลือกใช้ โดยส่วนมากไม่เกิน 512 px
-
รูปประจำเรื่อง Featured Image
คือรูปภาพที่แสดงโพสต์หรือหน้าบนเว็บไซต์ WordPress ของคุณ โดยทั่วไปจะปรากฏที่ด้านบนสุดของโพสต์ หน้าบทความ และส่วนโพสต์ที่เกี่ยวข้อง รูปภาพประจำเรื่อง จะปรากฏขึ้นเมื่อคุณแชร์โพสต์บนโซเชียลมีเดียด้วย เราขอแนะนำให้ใช้ขนาดรูปภาพ 1200 x 628 พิกเซล เพราะเป็นขนาดของภาพที่ Facebook แนะนำสำหรับการแสดงผลบนโพสต์แบบแชร์ลิงก์ (Shared Link)
-
รูปภาพประกอบบทความ
ภาพประกอบบทความเป็นส่วนหนึ่งที่สร้างความเชื่อมต่อระหว่างเนื้อหากับลูกค้าหรือผู้ใช้บริการได้ จึงมีความสำคัญอย่างมากเมื่อผู้ใช้ได้อยู่ในหน้าเว็บนั้นแล้ว รูปภาพประกอบจะเป็นส่วนที่ผู้ชมจะต้องใช้เวลาโหลดมากที่สุดบนเว็บไซต์ ดังนั้นเพื่อให้ผู้ชมใช้เวลาในการรอให้น้อยที่สุด และรูปภาพประกอบบทความมีประสิทธิการแสดงผลที่ดี ควรปรับรูปภาพดังนี้
- ควรจะใช้ไฟล์ JPG หรือ WebP เท่านั้น
- ขนาดความกว้างควรจะอยู่ที่ 800px – 1,000px เพราะเป็นขนาดความกว้างของหน้าเว็บในการอ่าน
- ขนาดของไฟล์ภาพไม่ควรเกิน 400kb ขึ้นอยู่กับรายละเอียดของภาพด้วย
- ความละเอียดของภาพ (Resolution) ควรอยู่ที่ 75 Pixel/Inch เหมาะสำหรับการแสดงบนจอแสดงผล
รูปภาพเป็นส่วนที่สำคัญ ช่วยตกแต่งเพิ่มสีสัน ความน่าสนใจให้กับเว็บไซต์ของคุณได้ สามารถช่วยปรับปรุงรูปลักษณ์ของหน้าเว็บของคุณและเพิ่ม UX สำหรับผู้เยี่ยมชมของเว็บคุณ อย่างไรก็ตามหากไม่ได้รับการปรับขนาดให้เหมาะสม รูปภาพที่มีคุณภาพอาจหนักและทำให้เวลาในการโหลดเว็บไซต์ช้าลงได้ ซึ่งจะส่งผลเสียต่อความเร็วและประสิทธิภาพของเว็บไซต์ของคุณ หรือหากการปรับขนาดถูกบีบอัดไฟล์ให้เล็กเพื่อหวังผลให้โหลดเว็บไซต์เร็ว โดยไม่ได้คำนึงถึงคุณภาพของรูปที่จะส่งผลให้รูปภาพแตก เบลอแล้ว ก็จะส่งผลให้เว็บไซต์ของคุณไม่ได้รับความสนใจจากผู้ใช้งานเช่นกัน
ดังนั้นหากคุณกำลังมองหาทีมงานที่จะมาช่วยดูแล ปรับปรุงประสิทธิภาพ ให้คำปรึกษาเว็บไซต์ของคุณ โปรดติดต่อ Vijismith
