มีรูปแบบภาพจำนวนหนึ่งที่สามารถใช้บนเว็บเพจได้ ตัวอย่างทั่วไป ได้แก่ GIF, JPG และ PNG ไฟล์ SVG มักใช้กับเว็บไซต์ในปัจจุบันทำให้นักออกแบบเว็บสามารถเลือกใช้ภาพออนไลน์ได้
ภาพ GIF
ใช้ไฟล์ GIF สำหรับภาพที่มีขนาดเล็กจำนวนสีคงที่ ไฟล์ GIF จะลดลงเหลือไม่เกิน 256 สีเท่านั้น อัลกอริทึมการบีบอัดไฟล์ GIF มีความซับซ้อนน้อยกว่าไฟล์ JPG แต่เมื่อใช้กับภาพสีและข้อความแบบแบนจะทำให้ไฟล์มีขนาดเล็กมาก
รูปแบบ GIF ไม่เหมาะสำหรับภาพหรือภาพที่มีสีไล่ระดับสี เนื่องจากรูปแบบ GIF มีสีจำนวน จำกัด การไล่ระดับสีและรูปถ่ายจะสิ้นสุดลงด้วยแถบและพิกเซลเมื่อบันทึกเป็นไฟล์ GIF
สรุปคุณจะใช้ GIF เฉพาะรูปภาพธรรมดาที่มีเพียงไม่กี่สี แต่คุณสามารถใช้ PNG สำหรับสิ่งนั้นได้เช่นกัน (ในไม่ช้านี้)
ภาพ JPG
ใช้ภาพ JPG สำหรับภาพและภาพอื่นที่มีสีนับล้าน ใช้อัลกอริธึมการบีบอัดที่ซับซ้อนซึ่งจะช่วยให้คุณสามารถสร้างกราฟิกขนาดเล็กลงโดยการลดคุณภาพของภาพ นี่เรียกว่าการบีบอัด "lossy" เนื่องจากข้อมูลรูปภาพบางส่วนสูญหายไปเมื่อบีบอัดภาพ
รูปแบบ JPG ไม่เหมาะกับภาพที่มีข้อความบล็อกขนาดใหญ่สีทึบและรูปร่างที่เรียบง่ายพร้อมขอบคมชัด เนื่องจากเมื่อภาพถูกบีบอัดข้อความสีหรือเส้นอาจเบลอทำให้ภาพไม่คมชัดเท่าที่จะบันทึกในรูปแบบอื่น
ภาพ JPG เหมาะสำหรับภาพและภาพที่มีสีสันเป็นจำนวนมากและมีสีสันเป็นธรรมชาติ
ภาพ PNG
รูปแบบ PNG ได้รับการพัฒนาขึ้นเพื่อทดแทนรูปแบบ GIF เมื่อปรากฏว่าภาพ GIF จะต้องเสียค่าลิขสิทธิ์ กราฟิก PNG มีอัตราการบีบอัดที่ดีกว่าภาพ GIF ซึ่งส่งผลให้ภาพขนาดเล็กกว่าไฟล์เดียวกันที่บันทึกเป็น GIF ไฟล์ PNG มีความโปร่งใสอัลฟาซึ่งหมายความว่าคุณสามารถมีพื้นที่ของรูปภาพที่มีความโปร่งใสหรือใช้ช่วงโปร่งใสอัลฟาได้ ตัวอย่างเช่นเงาหล่นใช้ช่วงของผลโปร่งใสและจะเหมาะสำหรับ PNG (หรือคุณเพิ่งจะจบเราโดยใช้เงา CSS แทน)
ภาพ PNG เช่น GIFs ไม่เหมาะสมกับรูปถ่าย เป็นไปได้ที่จะได้รับรอบปัญหาแถบที่มีผลต่อภาพที่บันทึกไว้เป็นไฟล์ GIF โดยใช้สีจริง แต่อาจทำให้ภาพขนาดใหญ่มาก ภาพ PNG ยังไม่ได้รับการสนับสนุนอย่างดีจากโทรศัพท์มือถือรุ่นเก่าและโทรศัพท์ที่มีคุณสมบัติ
เราใช้ PNG สำหรับไฟล์ที่ต้องการความโปร่งใส นอกจากนี้เรายังใช้ PNG-8 สำหรับไฟล์ใด ๆ ที่เหมาะสมกับ GIF โดยใช้รูปแบบ PNG นี้แทน
รูปภาพ SVG
SVG ย่อมาจาก Scalable Vector Graphic ไฟล์เหล่านี้ใช้เวกเตอร์เพื่อสร้างไฟล์ขนาดเล็กที่สามารถแสดงผลได้ทุกขนาดโดยไม่สูญเสียคุณภาพในการเพิ่มขนาดไฟล์ขึ้นอยู่กับรูปแบบแรสเตอร์ที่พบใน JPG, GIF และ PNG พวกเขาถูกสร้างขึ้นสำหรับภาพประกอบเช่นไอคอนและแม้กระทั่งโลโก้
การจัดเตรียมรูปภาพสำหรับการจัดส่งทางเว็บ
ไม่ว่ารูปแบบภาพที่คุณใช้และเว็บไซต์ของคุณจะต้องใช้รูปแบบต่างๆในทุกหน้าเว็บของคุณคุณต้องมั่นใจว่ารูปภาพทั้งหมดในไซต์นั้นพร้อมสำหรับการจัดส่งทางเว็บแล้ว รูปภาพขนาดใหญ่เกินไปอาจทำให้ไซต์ทำงานช้าและส่งผลกระทบต่อประสิทธิภาพโดยรวม ในการต่อสู้กับภาพเหล่านี้ภาพเหล่านี้ต้องได้รับการปรับให้เหมาะสมเพื่อให้ได้ความสมดุลระหว่างคุณภาพและขนาดไฟล์ต่ำที่สุดเท่าที่จะเป็นไปได้ในระดับคุณภาพ
การเลือกรูปแบบภาพที่เหมาะสมเป็นส่วนหนึ่งของการสู้รบ แต่ยังทำให้แน่ใจว่าคุณได้จัดเตรียมไฟล์เหล่านั้นไว้ในขั้นตอนต่อไปในขั้นตอนการจัดส่งเว็บที่สำคัญนี้
บทความต้นฉบับโดย Jennifer Kyrnin แก้ไขโดย Jeremy Girard
