ข้อความต้นฉบับ: 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 ไม่ใช่แท็ก <img>)
ปัญหาที่ใหญ่ที่สุดของ CSS Sprite คือการใช้หน่วยความจำ เว้นแต่ว่าภาพต่อเรียงจะได้รับการจัดระเบียบอย่างระมัดระวัง คุณจะพบกับ พื้นที่สีขาว ที่ไร้ประโยชน์มากมาย ตัวอย่างที่ฉันชอบคือจากเว็บไซต์ของ WHIT TV ซึ่งภาพนี้ใช้เป็นสไปรท์ โปรดทราบว่านี่คือรูปภาพ PNG ขนาด 129915,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 Sprite ไม่สามารถพิมพ์ได้ เว้นแต่ RichB จะเพิ่มคำสั่งการพิมพ์ลงใน @media โดยเฉพาะ
หากคุณต้องการแก้ไขรูปภาพใน Sprite คุณต้องแก้ไขรูปภาพทั้งหมด ซึ่ง Tom B. จะเพิ่มภาระงานอย่างไม่ต้องสงสัย
หากคุณพบข้อบกพร่องใดๆ ใน CSS Sprites อื่นๆ ในระหว่างการใช้งาน โปรดแจ้งถึงข้อบกพร่องเหล่านั้นได้