ข้อความต้นฉบับ: CSS Sprite: ต้องทำหรือไม่ต้องทำ?
แปลจาก: เป็นสไปรท์หรือไม่เป็นสไปรท์
ข้อจำกัดความรับผิดชอบ: CSS Sprites ที่อ้างถึงในบทความนี้คือ CSS Sprites วลีนี้ไม่เคยมีการแปลแบบตายตัวหรือแบบทั่วไป บางคนเริ่มเรียกมันว่า CSS Sprites แล้ว เราจะดำเนินการดังกล่าวต่อไปในอนาคต และจะยังคงเรียกว่า CSS Sprites ——เสิ่นเฟย ( ร้อง )
CSS Sprite มีมาระยะหนึ่งแล้วและได้เพิ่มขึ้นเพื่อทำให้เว็บไซต์ของคุณเร็วขึ้น Steve Souders เพิ่ง นำเสนอ SpriteMe! ที่ Velocity '09 (การสนทนา - เหตุใดจึงต้องใช้ CSS Sprite Generator หรือเครื่องมือบนเซิร์ฟเวอร์อื่น ๆ ในเมื่อคุณสามารถใช้ canvas และ toDataURL และสร้างสไปรท์ได้ทันที) อย่างไรก็ตาม มีความเข้าใจผิดบางประการเกี่ยวกับสไปรต์ CSS สาเหตุหลักคือไม่มีข้อเสีย
หลักการพื้นฐานของ CSS Sprite คือการรวมภาพบางภาพที่ใช้ในเว็บไซต์ของคุณให้เป็นภาพเดียว ซึ่งจะช่วยลดจำนวนคำขอ HTTP สำหรับเว็บไซต์ของคุณ รูปภาพถูกเรนเดอร์โดยใช้พื้นหลัง CSS และคุณสมบัติตำแหน่งพื้นหลัง (เป็นมูลค่าการกล่าวขวัญว่านี่หมายความว่าแท็กของคุณมีความซับซ้อนมากขึ้น รูปภาพถูกกำหนดใน CSS ไม่ใช่แท็ก )
ปัญหาที่ใหญ่ที่สุดของ CSS Sprite คือการใช้หน่วยความจำ เว้นแต่ว่าภาพต่อเรียงจะได้รับการจัดระเบียบอย่างระมัดระวัง คุณจะพบกับ พื้นที่สีขาว ที่ไร้ประโยชน์มากมาย ตัวอย่างที่ฉันชอบคือจากเว็บไซต์ของ WHIT TV ซึ่ง ภาพนี้ ใช้เป็นสไปรท์ โปรดทราบว่านี่คือรูปภาพ PNG ขนาด 1299×15,000 พิกเซล มันยังถูกบีบอัดได้ดีมาก ขนาดการดาวน์โหลดจริงอยู่ที่ประมาณ 26K เท่านั้น แต่เบราว์เซอร์ไม่แสดงข้อมูลภาพที่บีบอัด เมื่อรูปภาพนี้ถูกดาวน์โหลดและแตกไฟล์ รูปภาพนั้นจะใช้หน่วยความจำประมาณ 75MB (1299 * 15000 * 4) หากรูปภาพนี้ไม่ใช้ความโปร่งใสแบบอัลฟา รูปภาพจะถูกปรับให้เหมาะสมเป็น 1299 * 15000 * 3 แต่ต้องเสียความเร็วในการเรนเดอร์ ถึงอย่างนั้น เรากำลังพูดถึง 55MB จริงๆ แล้วรูปภาพนี้ส่วนใหญ่ ว่าง เปล่า ไม่มีอะไรเลย ไม่มีเนื้อหาที่เป็นประโยชน์ เพียงโหลด หน้าแรกของ WHIT จะทำให้การใช้หน่วยความจำของเบราว์เซอร์ของคุณเพิ่มขึ้นเป็นอย่างน้อย 75+MB เพียงเพราะรูปภาพนั้นเพียงรูปเดียว ( ปล. ขออภัย เว็บไซต์เพิ่งได้รับการปรับปรุง และรูปภาพที่กล่าวถึงในบทความไม่มีอยู่อีกต่อไป )
ไม่มีการแลกเปลี่ยนที่ถูกต้องเพื่อประโยชน์ของเว็บไซต์
ข้อเสียอีกประการ (แม้ว่าจะไม่สำคัญ) ก็คือ หากเพจที่ใช้ CSS Sprite ถูกปรับขนาดโดยใช้ฟังก์ชันการซูมแบบเต็มหน้าที่มีให้ในเบราว์เซอร์บางตัว เบราว์เซอร์จะต้องทำงานพิเศษบางอย่างเพื่อแก้ไขพฤติกรรมของขอบรูปภาพเหล่านี้ โดยพื้นฐานแล้ว เป็นการป้องกันไม่ให้รูปภาพที่อยู่ติดกันในสไปรท์ถูก "เปิดเผย" นี่ไม่ใช่ปัญหาสำหรับภาพขนาดเล็ก แต่จะส่งผลต่อประสิทธิภาพสำหรับภาพขนาดใหญ่
มีตัวอย่างบางส่วนที่แสดงให้เห็นประโยชน์ที่ชัดเจนของสไปรท์ CSS โดยตัวอย่างหลักคือการรวมชุดรูปภาพที่มีขนาดเท่ากันเป็นไฟล์เดียว ตัวอย่างเช่น ชุดไอคอน 16×16 ที่ใช้ระบุสิ่งต่างๆ บนไซต์ของคุณ หรือไอคอน 32×32 บางส่วนที่ใช้เป็นส่วนหัวของหมวดหมู่หรืออะไรทำนองนั้น แต่ไม่ควรรวมรูปภาพที่มีขนาดแตกต่างกันมาก โดยเฉพาะอย่างยิ่งรูปภาพสูงและบางถัดจากรูปภาพที่มีความกว้างและสั้น
อย่างไรก็ตาม CSS Sprite จะปรับปรุงเวลาในการโหลดหน้าเว็บ (อย่างน้อยในการโหลดหน้าเว็บครั้งแรก - ในการโหลดหน้าเว็บครั้งต่อไป เบราว์เซอร์จะแคชรูปภาพ) มีอะไรทดแทนกันได้มั้ยคะ? น่าเสียดายที่ยังไม่มีทางเลือกอื่น เบราว์เซอร์จำนวนมากเริ่มรองรับไฟล์ Manifest แบบออฟไลน์ และอาจเป็นไปได้ที่จะขยายเวลานี้เพื่อให้สามารถดาวน์โหลดไฟล์ (เช่น ไฟล์ jar/zip) ที่มีรายการทรัพยากรและ URL ที่เกี่ยวข้อง แต่แนวทางดังกล่าวจะไม่ได้เห็นอีกสักระยะหนึ่ง...
ดังนั้น เมื่อตัดสินใจว่าจะใช้ CSS Sprite หรือไม่ โปรดทราบว่ามีหลายปัจจัยนอกเหนือจากประสิทธิภาพการโหลดหน้าแรก ตามกฎทั่วไปแล้ว หากส่วนใหญ่ของสไปรท์ CSS ของคุณไม่มีเนื้อหารูปภาพจริง คุณควรหลีกเลี่ยงการใช้เนื้อหาดังกล่าว ในทำนองเดียวกัน ให้จับตาดูปัญหาที่อาจเกิดขึ้นในอนาคตในขณะที่รักษาความเร็วในการโหลดหน้าเว็บ ในขณะเดียวกันก็ดูแลเพื่อหลีกเลี่ยงข้อบกพร่องของหน่วยความจำและผลกระทบต่อประสิทธิภาพของสไปรท์
ข้อบกพร่อง CSS Sprite อื่น ๆ
ต่อไปนี้เป็นข้อบกพร่องบางประการของ CSS Sprite ที่ชาวเน็ตบางคนกล่าวถึงในความคิดเห็นของบทความนี้:
หากคุณพบข้อบกพร่องใดๆ ใน CSS Sprites อื่นๆ ในระหว่างการใช้งาน โปรดแจ้งถึงข้อบกพร่องเหล่านั้นได้