รูป แบบ ของภาพกราฟิกที่เหมาะสมสำหรับการสร้าง เว็บเพจ คือไฟล์ที่มี นามสกุล อะไร

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

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

1. ไฟล์รูปภาพ JPEG (.jpg/.jpeg)

เป็นไฟล์ภาพที่ใช้กันมาตั้งแต่ปี ค.ศ. 1992 เหตุที่ใช้ชื่อว่า JPEG ก็เพราะว่าถูกพัฒนาขึ้นโดย Joint Photographic Experts Group ซึ่ง JPEG ก็คือชื่อย่อของกลุ่มดังกล่าว JPEG เป็นไฟล์ภาพที่มีขนาดเล็กมาก โดยสามารถบีบอัดแบบ Lossy Compression สามารถบีบอัดไฟล์ได้ในอัตรา 1: 10 ด้วยความที่มีขนาดเล็กนี่เองจึงทำให้ได้รับความนิยมสูงมาก ไฟล์ JPEG เป็นภาพแบบ Raster แสดงผลได้ถึง 16 ล้านสี เหมาะกับภาพที่มีจำนวนสีมากๆเช่นภาพถ่าย หรือภาพกราฟิกที่มีความซับซ้อน

ทั้งนี้ไฟล์ JPEG ไม่เหมาะที่จะนำมาใช้กับงานพิมพ์ (CMYK) เพราะเป็นการบีบอัดไฟล์แบบสูญเสียคุณภาพ และคำถามที่น่าจะมีคนสงสัยว่าทำไมไฟล์ JPEG ถึงมีทั้ง .jpeg และ .jpg ตรงนี้เป็นเรื่องของข้อจำกัดของระบบไฟล์แบบ FAT-16 ที่ใช้ในระบบปฏิบัติการ MS-DOS มาจนถึง Windows 3.11 ที่อนุญาตให้ไฟล์มีนามสกุลได้แค่ 3 ตัวอักษรเท่านั้น ซึ่งต่างจากระบบปฏิบัติการที่เป็น UNIX อย่าง Mac หรือ Linux ที่จะไม่มีข้อจำกัดนี้ ทำให้ไฟล์ jpeg ที่ใช้ใน Mac หรือ Linux จะเป็น .jpeg แต่เมื่อนำมาใช้ใน Windows ตั้งแต่ 3.11 ลงไป ก็จะเหลือแค่ .jpg ซึ่งปัจจุบัน Windows ไม่มีข้อจำกัดนี้แล้ว

การ Export ไฟล์ประเภทนี้จากโปรแกรมสร้าง, ปรับแต่งภาพเช่น Photoshop ให้ตั้งค่า Quality ที่ 90% จะได้ไฟล์ที่มีขนาดไม่ใหญ๋เกินไปและความคมชัดเพียงพอต่อการใช้งานบนเว็บไซต์

2. ไฟล์รูปภาพ PNG

PNG ย่อมาจากคำว่า Portable Network Graphic เป็นไฟล์ภาพ Raster เหมือน jpg แต่จะเป็นไฟล์ที่มีคุณภาพสูงกว่าและสามารถทำเป็นภาพแบบพื้นหลังโปร่งใสได้ ไฟล์ PNG ใช้วีธีการบีบอัดแบบ Lossless Compression ไม่สูญเสียคุณภาพ ทำให้มีคุณภาพที่สูงกว่า JPEG แต่ก็ต้องแลกมาด้วยขนาดไฟล์ที่ใหญ่ จึงไม่ค่อยนิยมนำไฟล์ PNG มาใช้เป็นภาพถ่าย เนื่องจากไฟล์ PNG รองรับการทำพื้นหลังแบบโปร่งใสนี่เอง จึงนิยมนำไฟล์ PNG ไปใช้เฉพาะภาพที่ต้องการให้มีพื้นหลังโปร่งใส เช่น Logo เป็นต้น

3. ไฟล์รูปภาพ GIF

ไฟล์ GIF (Graphics Interchange Format) ใช้วีธีการบีบอัดแบบ Lossless Compression แบบเดียวกับ PNG แต่จะต่างกันตรงที่ไฟล์ GIF แสดงผลได้แค่ 256 สี ทำให้ไม่นิยมนำไฟล์ GIF มาใช้เป็นไฟล์ภาพถ่าย ข้อดีของไฟล์ GIF คือรองรับการทำภาพเคลื่อนไหว รวมถึงภาพแบบพื้นหลังโปรงใส จึงมักจะเห็นการนำไฟล์ GIF มาใช้ในแบบภาพเคลื่อนไหวมากที่สุด

4. ไฟล์รูปภาพ SVG

SVG ย่อมาจากคำว่า Scalable Vector Graphics เป็นไฟล์ภาพแบบ Vector รองรับภาพแบบพื้นหลังโปร่งใส และสามารถย่อ ขยาย ได้โดยไม่เสียคุณภาพ จึงเหมาะสำหรับนำมาใช้ในงาน Logo, Icon เป็นต้น ปัจจุบันไฟล์ SVG ได้รับความนิยมมากขึ้น เนื่องจากขนาดไฟล์ที่เล็กและเส้นต่างๆที่ทำให้เกิดภาพนั้นเกิดจากภาษา XML ทำให้ตกแต่งสไตล์ด้วย CSS ได้

5. ไฟล์รูปภาพ WebP

WebP เป็นมาตรฐานไฟล์ภาพใหม่จาก Google เริ่มใช้มาตั้งแต่ปี 2010 ซึ่งในระยะหลังเริ่มมีการใช้กันบ้างแล้วโดยเฉพาะในต่างประเทศ WebP มีขนาดไฟล์ที่เล็กกว่า JPEG ประมาณ 25-34% จากการบีบอัดไฟล์ที่มากกว่าแต่สูญเสียคุณภาพไปน้อยมาก แถมมีข้อดีกว่า JPEG คือรองรับภาพแบบพื้นหลังโปร่งใส และยังรองรับการทำภาพแบบเคลื่อนไหวอีกด้วยเรียกได้ว่ารวมข้อดีของทั้ง JPEG PNG GIF ไว้ในตัวเดียวกัน

ไฟล์ Raster และ Vector ต่างกันอย่างไร

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

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

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

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

• การปรับขนาด ปรับสี ปรับแสง
• เพิ่มกรอบรูป เพิ่มข้อความ เพิ่มรูปภาพตัวการ์ตูนต่างๆ ลบตาแดง
• การนำภาพนิ่งมาเรียงต่อกันเป็นภาพเคลือนไหว
• การจัดหน้าโดยการแสดงภาพหลายภาพในภาพเดียวเป็นกรอบแบบต่างๆ,
• การแปลงไฟล์ Raw จากกล้องมาเป็น JPEG

และยังมีฟีเจอร์อื่นๆอีกมากมาย

ฟีเจอร์ที่น่าสนใจอีก 1 อย่างก็คือ เมื่อเราจะทำการบันทึกภาพด้วยโปรแกรม PhotoScape จะมีการตัวเลือกการปรับลดเพิ่มคุณภาพของ JPEG ก็สามารถปรับลดคุณภาพลงสักเล็กน้อยเช่นให้เหลือ 80-90% เพื่อให้ไฟล์มีขนาดลดลงโดยยังมีคณภาพอยู่ เช่นมีภาพที่ได้มาจากทีม Design เป็นไฟล์ JPEG แต่คุณภาพของภาพสูงมากถึง 100% ทำให้ไฟล์มีขนาดใหญ่มากเกินความจำเป็นในการใช้งานบนเว็บ เราก็มาปรับลดจากโปรแกรมนี้ได้

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

*ฟีเจอร์นี้ใช้ได้ทั้งการแก้ไขภาพแบบภาพเดียวและการแก้ไขภาพเป็นกลุ่ม

ดาวน์โหลดโปรแกรม PhotoScape ได้จากที่นี่ https://photoscape.me/