แนวคิดของสไปรต์มีมาระยะหนึ่งแล้ว เป็นหนึ่งในเทคนิคที่ใช้กันมากที่สุดในอุตสาหกรรมเกมเพื่อเร่งกระบวนการแสดงภาพเคลื่อนไหวบนหน้าจอ ในบทความนี้เราจะพิจารณาเป็นพิเศษว่าเทคนิคนี้สามารถช่วยเราปรับปรุงประสบการณ์ของผู้ใช้บนหน้าเว็บได้อย่างไรด้วยความช่วยเหลือของ CSS Sprites ตามลำดับต่อไปนี้:
- Sprite คืออะไร?
- CSS Sprite คืออะไร - ภาพรวมคร่าวๆ
- ตัวอย่างวิธีช่วยในการพัฒนาเว็บ?
- ข้อดีของการใช้ CSS Sprites
- นักพัฒนาต้องทำอะไรเมื่อทำงานกับ CSS Sprites
- จะสร้าง CSS Sprite Sheet ได้อย่างไร?
- จะทำงานกับ CSS Sprites ได้อย่างไร?
- บริษัท ที่ใช้ CSS Sprites
Sprite คืออะไร?
สไปรต์คือภาพเดียวที่เป็นส่วนหนึ่งของฉากที่ใหญ่กว่าในเกม จากนั้นสไปรต์หลาย ๆ ภาพจะรวมกันเป็นภาพขนาดใหญ่เรียกว่าสไปรต์ชีต เมื่อโหลดสไปรต์ชีตลงในหน่วยความจำสไปรต์ที่แตกต่างกันจะถูกแสดงผลต่อเนื่องกันอย่างรวดเร็วเพื่อให้ภาพเคลื่อนไหวเป็นภาพลวงตา สิ่งนี้ทำพร้อมกันสำหรับสไปรต์ที่แตกต่างกันนับสิบถึงหลายร้อยเพื่อสร้างฉากในเกม
แนวคิดพื้นฐานคือการโหลดภาพและแสดงส่วนหนึ่งของภาพนั้นเร็วกว่ามากในทุกที่ที่ต้องการเมื่อเทียบกับการโหลดภาพหลายภาพและแสดง
CSS Sprite คืออะไร: ภาพรวมคร่าวๆ
CSS Sprite เป็นเทคนิคที่นักพัฒนาเว็บมักใช้เพื่อเพิ่มประสิทธิภาพของหน้าเว็บ ในเทคนิคนี้ภาพขนาดเล็กหลาย ๆ ภาพที่มีขนาดเท่ากันจะรวมกันเป็นภาพขนาดใหญ่ภาพเดียวที่เรียกว่าไฟล์ สไปรท์แผ่น หรือ ชุดกระเบื้อง . จากนั้นใช้สไปรต์ชีตนี้เพื่อแสดงองค์ประกอบแต่ละรายการในทุกที่ที่เราต้องการ
โดยปกติองค์ประกอบเช่นโลโก้ลูกศรนำทางปุ่มต่างๆจะรวมอยู่ในสไปรต์ชีตเนื่องจากเกือบจะมีขนาดเดียวกันและมักใช้ในหน้าเว็บ
ตัวอย่างวิธีช่วยในการพัฒนาเว็บ?
โดยทั่วไปในขณะที่ออกแบบภาพหน้าเว็บจะถูกจัดเก็บและใช้เป็นไฟล์แต่ละไฟล์ ดังนั้นเมื่อผู้ใช้เปิดหน้าเว็บเบราว์เซอร์จะต้องทำการร้องขอ HTTP สำหรับแต่ละไฟล์เหล่านี้ดาวน์โหลดแยกต่างหากและแสดง สิ่งนี้ทำให้เวลาในการโหลดหน้าสูงขึ้นเนื่องจากหน้าเว็บหนึ่ง ๆ สามารถมีรูปภาพขนาดเล็กจำนวนมากเช่นปุ่มไอคอนโลโก้
CSS Sprite ช่วยให้นักพัฒนาสามารถรวมภาพขนาดเล็กที่ใช้บ่อยเหล่านี้เป็นภาพขนาดใหญ่ภาพเดียว จากนั้นเบราว์เซอร์จะต้องดาวน์โหลดไฟล์เดียวเท่านั้นที่จะใช้ในการแสดงส่วนที่ต้องการโดยการหักล้างรูปภาพ
ข้อดีของการใช้ CSS Sprites
ข้อดีหลัก ๆ สองประการของการใช้ CSS Sprite บนรูปภาพปกติ:
โหลดหน้าได้เร็วขึ้น: ช่วยเพิ่มเวลาในการโหลดหน้าเนื่องจากภาพที่ใช้ในเว็บเพจจะปรากฏขึ้นทันทีที่ดาวน์โหลดแผ่นงาน
ปริมาณงานที่มากขึ้นและการใช้ทรัพยากรที่ลดลง: ไม่เพียง แต่เทคนิคนี้จะช่วยปรับปรุงประสบการณ์ของผู้ใช้ปลายทางด้วยการทำให้หน้าเว็บโหลดเร็วขึ้นแต่ยังช่วยลดความแออัดของเครือข่ายเนื่องจากมีการร้องขอ HTTP น้อยลง
นักพัฒนาต้องทำอะไรเมื่อทำงานกับ CSS Sprites
เมื่อทำงานกับภาพแต่ละภาพนักพัฒนาสามารถทำงานร่วมกับแท็ก HTML ได้ และจัดรูปแบบใน CSS หากจำเป็น แต่เมื่อทำงานกับ CSS Sprites นักพัฒนาจำเป็นต้องทำสองสิ่งที่เฉพาะเจาะจง:
- การสร้างภาพต่อเรียง
ในขณะที่พัฒนาหน้าเว็บหากนักพัฒนาตัดสินใจที่จะใช้ CSS สไปรต์เขา / เธอจะต้องสร้างสไปรต์ชีตก่อนโดยการรวมองค์ประกอบที่ต้องการทั้งหมดเช่นปุ่มโลโก้ ฯลฯ ในรูปแบบคล้ายตาราง สามารถทำได้โดยใช้โปรแกรมตกแต่งภาพเช่น Photoshop หรือ Gimp นอกจากนี้ยังมีเครื่องมือออนไลน์มากมายที่ช่วยคุณสร้างสไปรท์ชีต เครื่องมือเหล่านี้จะกล่าวถึงต่อไปในบทความนี้
- เข้าถึงองค์ประกอบเฉพาะของสไปรต์โดยใช้ไฟล์ ตำแหน่งพื้นหลัง CSS ทรัพย์สิน
เมื่อสไปรท์ชีตพร้อมแล้วผู้พัฒนาจะต้องใช้แอตทริบิวต์ CSS เพื่อเข้าถึงส่วนต่างๆของชีต
- ความกว้าง: ความกว้างของสไปรท์
- ความสูง: ความสูงของสไปรท์
- พื้นหลัง: อ้างอิงถึงสไปรต์ชีต
- ตำแหน่งพื้นหลัง: ค่าชดเชย (เป็นพิกเซล) เพื่อเข้าถึงเฉพาะส่วนที่ต้องการของสไปรต์ชีต
จะสร้าง CSS Sprite Sheet ได้อย่างไร?
คุณสามารถใช้ซอฟต์แวร์แก้ไขภาพใด ๆ เพื่อจัดเรียงภาพที่มีขนาดเล็กลงในตารางได้ แต่จะมีการกล่าวถึงสองวิธีที่ง่ายกว่านี้:
1. เครื่องมือสร้างภาพต่อเรียงออนไลน์
ลิงค์: toptal.com/developers/css/sprite-generator/
เครื่องมือนี้ไม่เพียง แต่ใช้งานได้ฟรี แต่ยังมีโค้ด CSS ที่จำเป็นซึ่งสามารถใช้ในขณะอ้างอิงสไปรต์ชีตได้อีกด้วย นอกจากนี้คุณยังสามารถใช้คุณสมบัติต่างๆเช่นช่องว่างระหว่างองค์ประกอบและเปลี่ยนการจัดตำแหน่ง
2. การสร้าง Sprite Sheet ด้วย Sprity
หากคุณใช้ Grunt, Node หรือ Gulp คุณสามารถติดตั้งแพ็คเกจที่เรียกว่า Sprity ซึ่งจะช่วยให้คุณสร้างสไปรต์ชีตในรูปแบบต่างๆเช่น PNG, JPG เป็นต้น
ประการแรกคุณจะต้องติดตั้ง Sprity โดยใช้:
npm ติดตั้ง sprity -g
จากนั้นในการสร้างภาพต่อเรียงให้ใช้คำสั่งต่อไปนี้:
sprity ./output-directory/ ./input-directory/*.png
จะทำงานกับ CSS Sprites ได้อย่างไร?
ในตัวอย่างนี้เราจะใช้สไปรต์ชีทต่อไปนี้:
ดังที่คุณเห็นในภาพด้านบนไอคอนหกไอคอน (Instagram, Twitter และ Facebook) ได้รับการจัดเรียงในรูปแบบคล้ายตาราง ในแถวแรกเรามีสถานะปกติและในแถวที่สองเรามีสถานะโฮเวอร์ (ภาพที่ปรากฏขึ้นเมื่อเราวางเคอร์เซอร์ของเมาส์ไว้)
หากคุณสร้างสไปรต์ชีตโดยใช้เครื่องมือที่เรากล่าวไว้ข้างต้นแสดงว่าคุณทราบค่าออฟเซ็ตที่จำเป็นใน CSS แล้ว แต่ถ้าคุณใช้เครื่องมืออื่นหรือได้รับสไปรต์ชีทบางส่วนก็ไม่ต้องกังวลเราจะพูดถึงวิธีการที่ จะช่วยให้คุณได้รับการชดเชยสำหรับองค์ประกอบที่ต้องการ
ตอนนี้มาดูวิธีง่ายๆในการรับออฟเซ็ตที่จำเป็นสำหรับแต่ละไอคอนทั้งหกโดยใช้ MS Paint อาจไม่ใช่ทางออกที่ดีในการทำงานกับสไปรต์ แต่เนื่องจากมีคุณสมบัติที่ให้พิกัดของเคอร์เซอร์ของเมาส์จึงสามารถใช้เพื่อรับพิกัด X และ Y ที่ต้องการได้
ขั้นแรกให้เปิดภาพสไปรต์ชีทของคุณ (เส้นตารางที่มีภาพขนาดเล็กทั้งหมด) และนำเคอร์เซอร์ของเมาส์ไปวางที่มุมบนซ้ายของสไปรต์ที่คุณต้องการจับ
เมื่อคุณมีพิกัดของจุดบนซ้ายของสไปรต์ของคุณแล้ว (ภาพ Instagram ด้านซ้ายบน) คุณสามารถแสดงสไปรต์เฉพาะนี้ได้ทุกที่ที่ต้องการโดยใช้โค้ด CSS:
พื้นหลัง: url ('img_sprites.png')
ตำแหน่งพื้นหลัง: 0 0
ความกว้าง: 125px
ความสูง: 125px
เราใช้ความกว้างและความสูง 125 พิกเซลเนื่องจากไอคอนของเรามีขนาดดังกล่าว ในการดึงภาพถัดไป (Twitter) ในแถวเดียวกันเราใช้รหัสต่อไปนี้:
พื้นหลัง: url ('img_sprites.png')
ตำแหน่งพื้นหลัง: -128px 0px
ความกว้าง: 125px
ความสูง: 125px
สังเกตแอตทริบิวต์ตำแหน่งพื้นหลังในตัวอย่างด้านบน (-128px, 0) หมายความว่าเรากำลังหักล้างสไปรต์ชีทของเราไปทางซ้าย 128 พิกเซล (โดยคำนึงถึงช่องว่างระหว่างองค์ประกอบ) และ 0 พิกเซลบนแกน Y หากเราต้องการเข้าถึงไอคอนโฮเวอร์ของ twitter แอตทริบิวต์ตำแหน่งพื้นหลังของเราจะเป็น:
พื้นหลังตำแหน่ง: -128px -128px
ด้วยวิธีนี้ตอนนี้เราสามารถเข้าถึงแต่ละองค์ประกอบของสไปรต์ชีตโดยใช้ CSS มาดูวิธีการทำโค้ด HTML และ CSS กัน
ขั้นตอนที่ 1: การเขียนโค้ด HTML ที่จำเป็น
ในโค้ดด้านล่างนี้เราเพียงแค่เพิ่มลิงก์สามลิงก์ นอกจากนี้เราจะเชื่อมโยง HTML ของเรากับสไตล์ชีท (screen.css)
ขั้นตอนที่ 2: การเขียน CSS ที่จำเป็น ขั้นแรกเราจะจัดสไตล์คลาสไอคอนที่แชร์ของเรา ที่นี่คุณจะเห็นว่าเรากำลังอ้างอิงถึงสไปรต์ชีตที่เราสร้างขึ้น
/ * ไอคอนที่ใช้ร่วมกันคลาส * /
span.icon a: ลิงค์,
span.icon a: เยี่ยมชม{
แสดง:บล็อก
เยื้องข้อความ:-9999px
ภาพพื้นหลัง: url (./ img_sprites.png)
พื้นหลังซ้ำ:ไม่ทำซ้ำ
}
coupling ใน java คืออะไร
ขั้นตอนที่ 3: รับไอคอนแต่ละรายการจากสไปรต์ชีตโดยใช้ออฟเซ็ต
/ * ไอคอน Instagram * /
span.instagram a: ลิงค์,
span.instagram a: เยี่ยมชม{
ความกว้าง:125px
ความสูง:125px
พื้นหลังตำแหน่ง:0 0
}
/ * ไอคอน Twitter * /
สแปน a: ลิงค์,
สแปน a: เยี่ยมชม{
ความกว้าง:125px
ความสูง:125px
พื้นหลังตำแหน่ง:-128px 0
}
/ * ไอคอน Facebook * /
span.facebook a: ลิงค์,
span.facebook a: เยี่ยมชม{
ความกว้าง:125px
ความสูง:125px
พื้นหลังตำแหน่ง:-257px 0
}
ขั้นตอนที่ 4: รับไอคอนโฮเวอร์จากสไปรต์ชีตโดยใช้ออฟเซ็ต
span.instagram a: โฮเวอร์{พื้นหลังตำแหน่ง:0 -128px}
สแปน a: โฮเวอร์{พื้นหลังตำแหน่ง:-128px -128px}
span.facebook a: โฮเวอร์{พื้นหลังตำแหน่ง:-255px -128px}
บริษัท ที่ใช้ CSS Sprites
ชื่อใหญ่หลายแห่งในอุตสาหกรรมใช้ CSS Sprites เพื่อปรับปรุงการตอบสนองของเว็บไซต์ของตน บริษัท ต่างๆเช่น Google, Facebook, Amazon ใช้วิธีนี้อย่างกว้างขวางเนื่องจากช่วยลดจำนวนคำขอ HTTP ต่อเซสชันสำหรับผู้ใช้เฉพาะราย นี่เป็นประโยชน์อย่างมากเมื่อเราพิจารณาว่า บริษัท เหล่านี้ให้บริการลูกค้านับล้านในช่วงเวลาใดเวลาหนึ่ง
ตอนนี้คุณได้เข้าใจแล้วว่า CSS Sprite คืออะไรและจะทำงานร่วมกับมันได้อย่างไรคุณก็ใกล้เข้ามาอีกขั้นในการเรียนรู้ CSS แนวคิดเช่นสไปรท์เป็นตัวเปลี่ยนเกมในปัจจุบันเนื่องจากเป็นสิ่งสำคัญอย่างยิ่งสำหรับนักพัฒนาในการดึงประสิทธิภาพทุกส่วนออกจากหน้าเว็บ
ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อก 'รูปภาพ HTML' แล้วเราจะติดต่อกลับไป