วิธีการลดขนาดไฟล์ GIF สำหรับประสิทธิภาพของเว็บไซต์ที่ดีขึ้น

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

ภาพ GIF และเว็บ

ภาพ GIF ไม่ได้รับการพิจารณาว่าเป็นหนึ่งขนาดเหมาะกับโซลูชันทั้งหมด ภาพ GIF มีสีได้สูงสุด 256 สีซึ่งหมายความว่าคุณสามารถคาดหวังภาพที่ร้ายแรงและความเสื่อมโทรมของสีได้หากไม่ระวัง รูปแบบไฟล์ GIF ในหลาย ๆ ด้านเป็นรูปแบบเดิมที่ย้อนกลับไปถึงวันแรกของเว็บ ก่อนที่จะมีการแนะนำรูปแบบ GIF ภาพบนเว็บเป็นภาพขาวดำและถูกบีบอัดโดยใช้รูปแบบ RLE พวกเขาได้ปรากฏตัวครั้งแรกในฉากเมื่อปีพ. ศ. 2530 เมื่อ Compuserve เผยแพร่รูปแบบเป็นโซลูชันการถ่ายภาพบนเว็บ ในเวลานั้นสีเพิ่งเกิดขึ้นใหม่บนเดสก์ท็อปและเว็บได้รับการเข้าถึงโดยโมเด็มที่เชื่อมต่อกับสายโทรศัพท์ สิ่งนี้สร้างความจำเป็นในรูปแบบภาพที่เก็บภาพขนาดเล็กพอที่จะจัดส่งผ่านสายโทรศัพท์ไปยังเว็บเบราเซอร์ในระยะเวลาอันสั้น

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

วิธีการลดขนาดไฟล์ GIF สำหรับประสิทธิภาพของเว็บไซต์ที่ดีขึ้น

เคล็ดลับเหล่านี้จะช่วยให้ GIFs ของคุณมีขนาดเล็กที่สุด

1. ครอบตัดเนื้อที่ว่างรอบ ๆ ภาพ การลดขนาดพิกเซลของภาพของคุณเป็นวิธีเดียวที่มีประสิทธิภาพมากที่สุดในการลดขนาดไฟล์ ถ้าคุณใช้ Photoshop คำสั่ง Trim จะทำงานได้ดีสำหรับสิ่งนี้
2. เมื่อคุณเตรียมภาพ gif คุณอาจต้องการลดมิติข้อมูลออก
3. ลดจำนวนสีในภาพ
4. สำหรับภาพเคลื่อนไหว GIFs ให้ลดจำนวนเฟรมในภาพ
5. ถ้าคุณใช้ Photoshop CC 2017 คุณสามารถสร้างไฟล์ GIF ได้โดยใช้รายการเมนู Export As เลือก ไฟล์> ส่งออกเป็น ... และเมื่อเมนูเปิดขึ้นให้เลือก GIF เป็นรูปแบบไฟล์และลดมิติข้อมูล (ความกว้างและความสูง) ของภาพ
6. ถ้าคุณใช้ Adobe Photoshop Elements 14 ให้เลือก File> Save For web ซึ่งจะเปิดกล่องโต้ตอบบันทึกสำหรับเว็บที่พบใน Adobe Photoshop CC 2017 ไฟล์> ส่งออก> บันทึกสำหรับเว็บ (Legacy) เมื่อเปิดขึ้นคุณสามารถใช้ Dithering ลดสีและขนาดทางกายภาพของภาพ
7. หลีกเลี่ยงการหดตัว Dithering อาจทำให้ภาพดูดีขึ้น แต่จะเพิ่มขนาดไฟล์ หากซอฟต์แวร์ของคุณอนุญาตให้ใช้ระดับลดลงเพื่อลดไบต์พิเศษ

1. ซอฟต์แวร์บางตัวมีตัวเลือก "lossy" สำหรับบันทึก GIFs ตัวเลือกนี้สามารถลดขนาดไฟล์ได้อย่างมาก แต่ยังช่วยลดคุณภาพของภาพ
2. อย่าใช้การเลียนแบบ การแทนที่มักจะเป็นการเพิ่มขนาดไฟล์
3. ทั้ง Photoshop และ Photoshop Elements จะแสดงเวลาในการดาวน์โหลด ไม่ใส่ใจกับมัน มันขึ้นอยู่กับการใช้โมเด็ม 56k หมายเลขที่ใช้ได้จะปรากฏขึ้นหากคุณเลือกเคเบิลโมเด็มจากเมนูป็อปอัพ

เคล็ดลับ:

1. หลีกเลี่ยงภาพเคลื่อนไหวไร้ประโยชน์ ภาพเคลื่อนไหวที่มากเกินไปไม่เพียง แต่เพิ่มเวลาในการดาวน์โหลดเว็บเพจของคุณเท่านั้น แต่ผู้ใช้หลายคนพบว่ามันทำให้เสียสมาธิ
2. ภาพ GIF ที่มีส่วนของสีทึบและแนวนอนที่ใหญ่จะบีบอัดได้ดีกว่าภาพที่มีการไล่โทนสีเงาอ่อนและแนวตั้ง
3. เมื่อลดสีลงใน GIFs คุณจะได้รับการบีบอัดที่ดีที่สุดเมื่อตั้งสีตัวเลขไว้ที่เล็กที่สุดของตัวเลือกเหล่านี้: 2, 4, 8, 16, 32, 64, 128 หรือ 256

อัปเดตโดย Tom Green