เกี่ยวกับการเพิ่มประสิทธิภาพของเทคโนโลยี CSS Sprites เราสามารถทำได้มากเพียงใด และลดจำนวนคำขอได้มากเพียงใด สิ่งนี้ไม่สามารถทำได้ฝ่ายเดียว ทุกอย่างขึ้นอยู่กับความร่วมมือระหว่างอิมเมจ XHTML, CSS และ CSS Sprites จนถึงตอนนี้ ยังไม่มีวิธีการเพิ่มประสิทธิภาพแบบสัมบูรณ์ นี่คือเหตุผลที่ฉันมักจะวัดความสัมพันธ์ระหว่างรูปภาพ CSS Sprites และ XHTML ในโครงการต่างๆ เช่น: "A Background Implements Adaptive Nine-Grid Grid" ต่อไปนี้จะสรุปวิธีการตัดรูปภาพและ การเพิ่มประสิทธิภาพของภาพ
การเพิ่มประสิทธิภาพรูปภาพ
สำหรับ GIF ที่ไม่ใช่ภาพเคลื่อนไหว ขอแนะนำให้ใช้ PNG8 เนื่องจากสามารถให้เอฟเฟกต์แบบเดียวกันและช่วยให้คุณประหยัดขนาดไฟล์ได้ 10%-30%
เมื่อเปรียบเทียบกับดอกไม้ไฟ Photoshop จะส่งออกภาพ PNG ที่มีคุณภาพเท่ากัน แต่ขนาดจะใหญ่กว่าเล็กน้อย แม้ว่า Fireworks ได้ทำการเพิ่มประสิทธิภาพการบีบอัดข้อมูลให้เหมาะสม แต่ก็ยังไม่ได้รับการบีบอัดที่ดีที่สุด
ซอฟต์แวร์ออกแบบที่ฉันรู้จักไม่มีการบีบอัดที่ดีที่สุดสำหรับการประมวลผลภาพ PNG และขนาดภาพยังคงมีพื้นที่ในการบีบอัดจำนวนหนึ่ง คุณสามารถลองใช้ "เครื่องมือเพิ่มประสิทธิภาพรูปภาพ" ที่แนะนำด้านล่างเพื่อให้ได้ประสิทธิภาพการบีบอัดที่ปราศจากความผิดเพี้ยน
ในแง่ของปริมาณและขนาดของภาพ ขอแนะนำให้รักษาขนาดไว้ไม่เกิน 100K (ซึ่งสอดคล้องกับข้อกำหนดขนาดที่ดีที่สุดตามเงื่อนไขของประเทศ) และขนาดคือ 800px (ขนาดที่ดีที่สุด) (เรียนรู้จากแหล่งบุคลากรที่เชื่อถือได้ไม่มีวิธีการตรวจสอบรายละเอียด)
เทคนิคการตัดภาพ CSS Sprites
ลำดับภาพ CSS Sprites และภาพที่รวมจะถูกเพิ่มจากบนลงล่างจากซ้ายไปขวา โดยทั่วไปตำแหน่งพื้นหลังจะถูกจัดตำแหน่งโดยใช้ตัวเลขผสมกัน ซึ่งสามารถลดปัญหาที่ไม่จำเป็นที่เกิดจากการบำรุงรักษาได้
ไม่แนะนำให้รักษาระยะห่างในอิมเมจ CSS Sprites เนื่องจากขนาดไฟล์เพิ่มขึ้นและขนาดไฟล์เพิ่มขึ้น
ใน CSS Sprites การรวมสีที่ใกล้เคียงกันหรือเหมือนกันสามารถลดจำนวนสีได้ เนื่องจากขนาดไฟล์ของรูปภาพที่มีจำนวนสีน้อยจะค่อนข้างเล็ก
มีช่องว่างขนาดใหญ่ในรูปภาพ CSS Sprites ที่มีขนาดเท่ากัน ซึ่งโดยส่วนใหญ่แล้วจะเพิ่มขนาดขึ้นในระดับหนึ่ง ดังนั้นรูปภาพ CSS Sprites จึงไม่ควรมีช่องว่าง
ในบรรดารูปภาพ CSS Sprites ที่มีขนาดเท่ากัน รูปภาพที่จัดเรียงในแนวตั้งจะมีขนาดไฟล์ใหญ่กว่ารูปภาพที่จัดเรียงในแนวนอน สาธิต
ในภาพ CSS Sprites รูปภาพที่จัดเรียงในแนวนอนจะมีขนาดไฟล์ใหญ่กว่ารูปภาพที่จัดเรียงในแนวตั้ง สาธิต
การรวมรูปภาพที่เท่าเทียมกัน: เมื่อใช้รูปภาพ CSS Sprites ให้รวมรูปภาพที่เหมือนกันอย่างเหมาะสมเพื่อประหยัดพื้นที่และลดระดับเสียง สาธิต
แยกแยะภาพที่ไม่จำเป็นต้องรวมเข้าด้วยกัน: หากผู้ใช้ปัจจุบันตัดสินใจว่าจะแสดงเพียงสถานะหรือระดับเดียว ก็ไม่จำเป็นต้องรวมภาพของระดับหรือสถานะอื่น สาธิต
ตำแหน่งการตัดสีทอง: ตำแหน่งที่ยืดหยุ่นที่สุดทางด้านขวาหรือด้านซ้ายของรูปภาพ CSS Sprites เป็นตำแหน่งที่เหมาะสมที่สุดสำหรับการวางไอคอนไว้ด้านหน้าข้อความ ดังนั้น รูปภาพ CSS Sprites อื่นๆ จะไม่ถูกรบกวน และนั่นเอง ไม่จำเป็นต้องจองความกว้างของบรรทัดไว้