ตัวสร้างภาพ Sprite

คลิกเพื่ออัปโหลดรูปภาพ

รูปแบบที่รองรับ: PNG, JPG, WebP

050

อัปโหลดรูปภาพเพื่อดูตัวอย่าง sprite

รวมไอคอนเล็กหลายตัวเป็นแผ่น sprite CSS ออนไลน์ ประมวลผลในเบราว์เซอร์ท้องถิ่นโดยไม่อัปโหลดเซิร์ฟเวอร์ โค้ด CSS พร้อม background-position ถูกสร้างอัตโนมัติสำหรับเลย์เอาต์แนวนอน แนวตั้ง และตาราง

คำแนะนำที่เกี่ยวข้อง

สร้าง ICO

บีบอัดรูปภาพ

แปลงรูปภาพ

ปรับขนาดรูปภาพ

ครอปตัดรูปภาพ

หมุนและพลิกภาพ

ภาพ sprite (CSS Sprite) คืออะไร?

ภาพ sprite (CSS Sprite) คือเทคนิคการรวมภาพเล็กหลายภาพเข้าเป็นภาพใหญ่ภาพเดียว แล้วใช้ background-position แสดงไอคอนแต่ละตัว คำว่า «sprite» มาจากเครื่องเกมยุคแรกที่จัดหลายเฟรมแอนิเมชันไว้ในภาพใหญ่และสลับอย่างรวดเร็ว frontend เว็บยืมแนวคิดนี้มาใช้เพื่อโหลดไอคอนเล็กจำนวนมากในคำขอเดียว

**ทำไมต้องใช้ sprite?** ในยุค HTTP/1.1 ทุกไฟล์ภาพทำให้เกิดคำขอ HTTP พร้อมการจับมือ TCP การจับมือ TLS และโอเวอร์เฮดของเฮดเดอร์ 100 ไอคอน = 100 คำขอ sprite วางไอคอนทั้งหมดในภาพเดียวและโหลดเสร็จในคำขอเดียว ทำให้การเรนเดอร์ครั้งแรกเร็วขึ้นอย่างมาก มัลติเพล็กซ์ HTTP/2 ลดข้อได้เปรียบบางส่วน แต่ sprite ยังมีคุณค่าสำหรับแคช CDN การบีบอัด gzip และความเข้ากันได้กับ HTTP/1.1

**หลักการพื้นฐาน:** สมมติ sprite 200×60 มีไอคอน 60×60 สามตัวเรียงกัน หากต้องการแสดงตัวแรก ตั้งค่าให้องค์ประกอบ 60×60: `background: url(sprite.png); background-position: 0 0;` ตัวที่สองใช้ -60px 0 ตัวที่สามใช้ -120px 0 ตัวของเราสร้างพิกัดเหล่านี้ให้อัตโนมัติ

**ทางเลือกสมัยใหม่:** SVG + use/symbol (แนะนำ เวกเตอร์ เปลี่ยนสีได้ แอนิเมชันได้) Icon Font (เข้ากันได้กว้าง ข้ามแพลตฟอร์ม) HTTP/2 Server Push ไอคอนเว็บฟอนต์ แต่ละวิธีมีสถานการณ์เหมาะสมต่างกัน เลือกตามความต้องการจริงของโปรเจกต์

กรณีการใช้งาน

  • โปรเจกต์เว็บที่มีไอคอนเล็กจำนวนมากที่ต้องรวมเป็น sprite เพื่อลดคำขอ HTTP และเร่งการโหลดครั้งแรก
  • นักพัฒนา frontend ต้องการจัดการทรัพยากรไอคอนของโปรเจกต์แบบรวมศูนย์ และสร้างโค้ด CSS background-position อัตโนมัติ
  • เมื่อเตรียมไอคอนเสร็จแล้ว สร้าง sprite + โค้ด CSS เป็นชุดเพื่อส่งมอบให้ทีมนำไปใช้ทันที
  • หลังรวมแล้ว นำภาพผ่าน [ตัวบีบอัด](/image/compress/) เพื่อลดขนาดรวมและปรับปรุงตัวชี้วัด LCP
  • แอป, Electron หรือไคลเอนต์เดสก์ท็อปที่ต้องรวมทรัพยากรไอคอนคงที่เป็นไฟล์เดียวใน build
  • เทมเพลต HTML ในอีเมลหรือบล็อกคงที่ที่ต้องการไอคอนหลายตัว แต่มีข้อจำกัดด้านความเข้ากันได้ของไคลเอนต์อีเมล
  • นักออกแบบส่งมอบไอคอนในรูปแบบ sprite เพื่อให้วิศวกร frontend ผสานเข้ากับโปรเจกต์ได้อย่างรวดเร็ว
  • sprite ความละเอียด 2x เฉพาะสำหรับจอ Retina ปรับให้เข้ากับทั้งจอ 1x และ 2x ผ่าน background-size

วิธีการใช้งาน

  1. คลิกพื้นที่อัปโหลดหรือลากและวางหลายภาพ (รองรับ JPG / PNG / WebP / GIF ฯลฯ)
  2. ในลิสต์ด้านซ้าย ใช้ที่จับลากหรือปุ่มขึ้น/ลงเพื่อปรับลำดับไอคอน
  3. เลือกเลย์เอาต์ «แนวนอน», «แนวตั้ง» หรือ «ตาราง» จากพื้นที่ด้านซ้าย
  4. ปรับระยะห่างพิกเซลระหว่างไอคอนด้วยแถบเลื่อน (แนะนำ 1-5 px)
  5. ดูตัวอย่าง sprite แบบสดทางขวา แล้วคลิก «ดาวน์โหลด» เพื่อบันทึก PNG และ «คัดลอก» เพื่อนำโค้ด CSS ไปยังโปรเจกต์

คุณสมบัติ

  • รวมหลายภาพในคลิกเดียว: อัปโหลดไอคอนหรือภาพเล็กหลายตัว รับ sprite เดียวอัตโนมัติ
  • 3 โหมดเลย์เอาต์: แนวนอน แนวตั้ง ตาราง สลับได้อย่างอิสระตามสถานการณ์
  • ปรับระยะห่างได้: แถบเลื่อน 0-50 px ควบคุมช่องว่างระหว่างไอคอนอย่างยืดหยุ่น
  • เรียงลำดับด้วยการลาก: ลากไอคอนในลิสต์เพื่อเปลี่ยนลำดับการรวม พิกัด CSS อัปเดตอัตโนมัติ
  • เรียงลำดับบนมือถือ: ปุ่มขึ้น/ลงเปลี่ยนลำดับ ใช้งานสะดวกบนเบราว์เซอร์มือถือ
  • สร้าง CSS อัตโนมัติ: background-position ความกว้างและความสูงครบถ้วนสำหรับภาพย่อยทุกตัว
  • ตัวอย่างสด: sprite ถูกสร้างใหม่ทันทีเมื่อภาพหรือพารามิเตอร์เปลี่ยน WYSIWYG
  • คัดลอก CSS ด้วยคลิกเดียว: ปุ่มคัดลอกในตัวย้ายสไตล์ชีตฉบับเต็มไปยังคลิปบอร์ด
  • ดาวน์โหลด PNG คลิกเดียว: ภาพที่รวมแล้วถูกบันทึกลงเครื่อง ชื่อไฟล์ sprite.png คงที่
  • ประมวลผลในเบราว์เซอร์ท้องถิ่น: รวมผ่าน Canvas API โดยไม่อัปโหลดภาพไปยังเซิร์ฟเวอร์
  • รองรับหลายรูปแบบ: JPG, PNG, WebP, GIF และรูปแบบภาพยอดนิยมอื่นๆ
  • รักษาพื้นหลังโปร่งใส: PNG ที่ส่งออกรักษาช่องอัลฟ่าของไอคอนต้นฉบับ เหมาะสำหรับการรวม

Best Practices

ความเข้ากันได้กับ Retina 2x: สร้าง sprite จากไฟล์ต้นฉบับ 2x

หากผู้ใช้เป้าหมายใช้จอแสดงผล Retina (Mac, iPhone, HiDPI Windows) ให้ใช้ไฟล์ต้นฉบับความละเอียด 2x (เช่น ไอคอน 32×32) สร้าง sprite แล้วระบุ background-size: 32px auto ใน CSS เพื่อย่อเป็น 16×16 การสร้างเพียงครั้งเดียวจะทำให้ทั้งจอ 1x และ 2x แสดงผลคมชัดและรองรับทุกอุปกรณ์

Sprite ยังมีคุณค่าในโปรเจกต์ HTTP/2

แม้มัลติเพล็กซ์ของ HTTP/2 จะลดปัญหาคอขวดของจำนวนคำขอ แต่ sprite ยังโดดเด่นใน 4 สถานการณ์: การใช้แคช CDN ซ้ำ อัตราการบีบอัด gzip/Brotli สูง การทะลุผ่าน proxy ภายในองค์กร และการรองรับ HTTP/1.1 แบบย้อนกลับ เครือข่ายองค์กร ระบบรัฐบาลและธนาคาร และเทมเพลต HTML ในอีเมลยังคงพึ่ง HTTP/1.1 ซึ่ง sprite ทดแทนไม่ได้

การเลือก PNG-8 กับ PNG-24: ไอคอนใช้ PNG-8 การไล่สีใช้ PNG-24

ตัวสร้างจะส่งออกเป็น PNG เสมอ แต่ความลึกบิตของไฟล์ต้นฉบับขึ้นอยู่กับคุณ ไอคอนแบบเรียบหรือสีเดียวควรเก็บใน PNG-8 (โปร่งใสแบบไม่สูญเสีย เล็กกว่า PNG-24 ถึง 60-80%) ส่วนไอคอนที่มีการไล่สี เงา และไฮไลต์ต้องใช้ PNG-24 ตัวสร้างรับทุกรูปแบบ จึงควรเพิ่มประสิทธิภาพไฟล์ต้นฉบับด้วยตัวบีบอัด PNG ก่อนนำมารวม

กลยุทธ์แคช CDN: เพิ่มแฮชในชื่อไฟล์

อย่าปล่อยให้ sprite.png ใช้ชื่อคงที่หลังการสร้าง เปลี่ยนชื่อด้วยแฮชเนื้อหา (เช่น sprite.a3f2b1.png) และตั้ง Cache-Control: max-age=31536000 เพื่อแคชถาวร เบราว์เซอร์จะดาวน์โหลดไฟล์เพียงครั้งเดียว คำขอถัดไปจะถูกส่งจากแคชท้องถิ่น ซึ่งประหยัดทราฟฟิกมากกว่าการพึ่ง HTTP/2 เพียงอย่างเดียว ตัวของเราส่งออกไฟล์ด้วยชื่อ sprite.png ดังนั้นโปรดเปลี่ยนชื่อด้วยตนเองหลังดาวน์โหลด

การบีบอัด gzip / Brotli ช่วยให้ sprite เล็กลงอีก

ภาพที่รวมแล้วมีความต่อเนื่องของพิกเซลสูงกว่า ทำให้ gzip/Brotli บีบอัดได้มีประสิทธิภาพมากกว่าไฟล์เล็กที่กระจัดกระจาย Nginx + gzip ระดับ 1 ย่อ sprite ได้ 60-80% ส่วน Brotli ย่อได้มากกว่า 85% เมื่อเปิด Content-Encoding แล้ว sprite 1 MB จะถูกส่งจริงเพียง 200-300 KB ซึ่งเป็นข้อได้เปรียบของ sprite ที่ถูกประเมินต่ำที่สุด

ความเข้ากันได้กับ CSS Modules / Vue scoped: ห่อด้วย :global()

หากโปรเจกต์ใช้ CSS Modules หรือ Vue scoped CSS ชื่อคลาส .icon-home และ .sprite ที่ตัวสร้างผลิตจะถูกแฮชในระดับท้องถิ่นและใช้ไม่ได้ ห่อคลาสร่วมด้วย :global(.sprite) { ... } ใน .module.css และเรียกใช้นอกบล็อก scoped หรือเลิกใช้ CSS Modules แล้วจัดการด้วยข้อกำหนดการตั้งชื่อแบบ BEM

ใช้ร่วมกับ Icon Font: ไอคอนหลักในฟอนต์ ไอคอนซับซ้อนใน sprite

แนวทางที่เสถียรที่สุดในงานจริงคือใช้ร่วมกัน ไอคอน UI ทั่วไป (ตั้งค่า ปิด ค้นหา ผู้ใช้) ทำด้วย Icon Font (เปลี่ยนสีได้ เวกเตอร์ ข้ามแพลตฟอร์ม) ไอคอนสีที่ซับซ้อน (โลโก้ผลิตภัณฑ์ ไอคอนแบนเนอร์) เก็บไว้ใน sprite จุดแข็งของทั้งสองช่วยเสริมกันและหลีกเลี่ยงค่าบำรุงรักษาจากการเลือกทางเดียว

โปรเจกต์ทางวิศวกรรมใช้ spritesmith ต้นแบบใช้ของเรา

สำหรับโปรเจกต์ที่ต้องบำรุงรักษาระยะยาว ให้ผสาน spritesmith (Webpack) หรือ gulp.spritesmith เข้ากับสายการ build: การเปลี่ยนแปลงซอร์สโค้ดจะสร้าง sprite ใหม่อัตโนมัติ ส่งออกชื่อไฟล์ที่มีแฮช และสร้างตัวแปร SCSS/LESS ให้อัตโนมัติ ตัวของเราเหมาะกับต้นแบบที่ไม่ต้องพึ่งพาและการส่งมอบโปรเจกต์ขนาดเล็ก ส่วนไปป์ไลน์ CI/CD ปลั๊กอิน build เหมาะสมกว่า

โปรเจกต์สมัยใหม่ย้ายจาก sprite ไป SVG symbol ได้

หากโปรเจกต์รองรับเบราว์เซอร์สมัยใหม่ (Chrome / Safari / Firefox / Edge ครบถ้วน รวมถึง IE 11+) ควรพิจารณาย้ายจาก sprite ไป SVG symbol: ไฟล์เดียวจัดการไอคอนทั้งหมด CSS ควบคุมสีและแอนิเมชัน ไม่ต้องดูแลพิกัด background-position sprite จากตัวของเราเป็นทรัพย์สินใช้ครั้งเดียว เหมาะเป็นทางออกช่วงเปลี่ยนผ่านก่อนย้ายระบบ

คำถามที่พบบ่อย

ภาพ sprite คืออะไร และทำไมต้องรวมหลายภาพเป็นภาพเดียว?

ภาพ sprite (CSS Sprite) คือเทคนิคการรวมภาพเล็กหลายภาพเข้าเป็นภาพใหญ่ภาพเดียว แล้วแสดงไอคอนแต่ละตัวด้วย background-position เมื่อรวมแล้ว ไอคอนทั้งหมดจะถูกโหลดด้วยคำขอ HTTP เพียงครั้งเดียว ทำให้จำนวนคำขอลดลงอย่างมากและการเรนเดอร์ครั้งแรกเร็วขึ้นเมื่อเทียบกับการโหลดแยกทีละไฟล์ เป็นเทคนิคคลาสสิกของการปรับแต่ง frontend

จะรวมหลายไอคอนเป็น sprite ออนไลน์ได้อย่างไร?

อัปโหลดภาพ ตัวสร้างจะรวมภาพอัตโนมัติตามเลย์เอาต์ที่เลือกพร้อมตัวอย่างสด ขณะเดียวกันทางขวาจะสร้างโค้ด CSS background-position (พร้อมความกว้างและความสูง) สำหรับภาพย่อยแต่ละภาพโดยอัตโนมัติ พร้อมคัดลอกไปยังสไตล์ชีตได้เลย sprite ที่ได้อยู่ในรูปแบบ PNG และดาวน์โหลดได้ในคลิกเดียว

ใช้โค้ด CSS ที่สร้างขึ้นอย่างไร?

วางไฟล์ sprite.png ที่ดาวน์โหลดมาไว้ในไดเรกทอรีของโปรเจกต์ (เช่น /img/sprite.png) แล้ววาง CSS ที่ตัวสร้างส่งออกลงในสไตล์ชีต เพิ่มคลาส .sprite และคลาส .icon-xxx ที่ตรงกันในองค์ประกอบที่ต้องการแสดงไอคอน เช่น: <i class="sprite icon-home"></i> ชื่อคลาสถูกสร้างอัตโนมัติจากชื่อไฟล์ต้นฉบับ

รองรับเลย์เอาต์แบบใดบ้าง?

รองรับ 3 โหมด: แนวนอน (ไอคอนเรียงเป็นแถวเดียวจากซ้ายไปขวา) แนวตั้ง (ไอคอนเรียงเป็นคอลัมน์เดียวจากบนลงล่าง) และตาราง (ไอคอนจัดเป็นเมทริกซ์สี่เหลี่ยมจัตุรัสอัตโนมัติ จำนวนคอลัมน์คือรากที่สองปัดเศษขึ้น) สลับโหมดได้ที่แผงด้านซ้ายเพื่อดูตัวอย่าง

ปรับระยะห่างระหว่างไอคอนได้หรือไม่?

ได้ ทางแผงซ้ายมีแถบเลื่อนระยะห่าง 0-50 px แนะนำ 1-5 px ระยะห่างที่เหมาะสมช่วยป้องกันพิกเซลขอบรบกวนเวลาจัดตำแหน่ง CSS แต่ไม่กระทบการใช้งานจริง: ระยะห่างอยู่ภายใน sprite และเมื่อเรียก CSS จะใช้เพียงพิกัดที่แน่นอนของ background-position

เปลี่ยนลำดับไอคอนได้หรือไม่?

ได้ รายการแต่ละตัวในลิสต์ด้านซ้ายลากด้วยที่จับได้ และบนอุปกรณ์มือถือใช้ปุ่มขึ้น/ลงเพื่อเปลี่ยนลำดับ หลังปรับ sprite จะถูกสร้างใหม่ตามลำดับใหม่ และพิกัด CSS ก็อัปเดตพร้อมกัน

รองรับรูปแบบภาพใดบ้าง?

รองรับรูปแบบทั่วไปทั้งหมด เช่น JPG, PNG, WebP, GIF และอื่นๆ เป็นอินพุต เอาต์พุตจะเป็น PNG (พร้อมพื้นหลังโปร่งใส) เสมอ แนะนำให้ใช้ PNG สำหรับไอคอน: ช่องโปร่งใสของ PNG ถูกเก็บรักษาไว้อย่างถูกต้องหลังรวมเข้าเป็น sprite

โปรเจกต์สมัยใหม่ยังจำเป็นต้องใช้ sprite หรือไม่?

หลัง HTTP/2 แพร่หลาย มัลติเพล็กซ์ลดข้อได้เปรียบบางส่วนของ sprite แต่ sprite ยังมีคุณค่าในแง่แคช CDN การบีบอัด gzip และการโหลดไอคอนสำคัญบนหน้าจอแรกอย่างรวดเร็ว หากจำนวนไอคอนน้อย (น้อยกว่า 10) หรือต้องการเปลี่ยนสีและแอนิเมชัน แนะนำให้ย้ายไปใช้ SVG symbol หรือ Icon Font สำหรับชุดไอคอน PNG คงที่ขนาดใหญ่ sprite ยังเป็นตัวเลือกที่เสถียรและน่าเชื่อถือ

sprite เบลอบนจอ Retina หรือไม่ แก้ไขอย่างไร?

อาจเบลอได้ จอ Retina (Mac, iPhone, HiDPI Windows) มีพิกเซลทางกายภาพเป็น 2-3 เท่าของพิกเซล CSS ดังนั้น sprite 1x ปกติจะถูกยืดเป็น 2x ทำให้ขอบเบลอ วิธีแก้: สร้าง sprite จากไฟล์ต้นฉบับความละเอียด 2x (32×32 แทน 16×16) แล้วระบุ background-size: 32px auto ใน CSS เพื่อย่อกลับเป็น 16×16

การรวมไอคอนลดคุณภาพของภาพหรือไม่?

คุณภาพไม่ลด การรวมเพียงวางภาพในตำแหน่งที่กำหนดบนผืนผ้าใบขนาดใหญ่ ไม่มีการสุ่มตัวอย่างใหม่ การบีบอัด หรือการปรับสี เอาต์พุต PNG รักษาคุณภาพดั้งเดิม หากต้องการลดขนาดเพิ่มเติม หลังดาวน์โหลดสามารถใช้ [ตัวบีบอัดภาพ](/image/compress/) ของเราได้

ภาพ sprite ถูกส่งไปยังเซิร์ฟเวอร์หรือไม่ ปลอดภัยหรือเปล่า?

ไม่ถูกส่ง การรวมทั้งหมดเกิดขึ้นในเบราว์เซอร์ท้องถิ่นของคุณผ่าน Canvas API ไฟล์ไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ใดๆ และถูกลบหลังประมวลผล สามารถประมวลผลไอคอนภายในองค์กรและโลโก้ที่ยังไม่เผยแพร่ได้อย่างสบายใจ

ดาวน์โหลด sprite ที่สร้างเสร็จอย่างไร?

หลังอัปโหลดภาพ ตัวสร้างจะสร้างตัวอย่างอัตโนมัติ คลิกปุ่ม «ดาวน์โหลด» ทางซ้ายเพื่อบันทึก sprite.png ลงเครื่อง หากต้องการโค้ด CSS ตัวสร้างจะส่งออก CSS ครบถ้วนโดยอัตโนมัติ ปุ่ม «คัดลอก» จะย้ายไปยังคลิปบอร์ด

ตั้งชื่อคลาสเองได้หรือไม่?

ในเวอร์ชันปัจจุบัน ชื่อคลาสถูกสร้างอัตโนมัติจากชื่อไฟล์ต้นฉบับโดยมีคำนำหน้า .icon- เช่น อัปโหลด home.png จะได้ .icon-home ใช้ตัวอักษรละติน ตัวเลข และขีดกลางในชื่อไฟล์เพื่อให้ได้ชื่อคลาส CSS ที่สะอาด

ควรเลือก sprite, Icon Font หรือ SVG Symbol?

ขึ้นอยู่กับสถานการณ์ หากมีไอคอน PNG คงที่จำนวนมากหรือต้องเข้ากันได้กับ IE เก่า ใช้ sprite ไอคอน UI ทั่วไปที่ต้องเปลี่ยนสีและข้ามแพลตฟอร์ม ใช้ Icon Font โปรเจกต์สมัยใหม่ที่ต้องการเปลี่ยนสี แอนิเมชัน และการจัดการไฟล์เดียว SVG Symbol เป็นตัวเลือกแรก ในทางปฏิบัติมักใช้ร่วมกัน: ไอคอน UI หลักใช้ Icon Font ไอคอนสีซับซ้อนใช้ sprite

ย่อ sprite ที่รวมแล้วด้วย [ตัวบีบอัดภาพ](/image/compress/) ได้อีกหรือไม่?

ได้ ตัวของเราส่งออก PNG แบบไม่สูญเสีย ทำให้ไฟล์อาจมีขนาดใหญ่ ขั้นตอนที่แนะนำ: สร้าง sprite ที่นี่ แล้วใช้ [ตัวบีบอัด](/image/compress/) ย่อขนาด PNG หรือแปลงเป็น JPG (หากไม่ต้องการความโปร่งใส) และหากจำเป็นแปลงเป็น WebP ผ่าน [ตัวแปลงไฟล์](/image/convert/) การผสานหลายตัวเข้าด้วยกันจะเพิ่มประสิทธิภาพการโหลดสูงสุด

อภิธานศัพท์

ภาพ sprite (CSS Sprite)
เทคนิคการรวมภาพเล็กหลายภาพเข้าเป็นภาพใหญ่ภาพเดียว แล้วแสดงไอคอนแต่ละตัวด้วย background-position เป็นเทคนิคคลาสสิกของการปรับแต่งประสิทธิภาพ frontend เว็บ
background-position
คุณสมบัติ CSS ที่ระบุพิกัดเริ่มต้นของภาพพื้นหลัง sprite ใช้ค่าลบเพื่อเลื่อนภาพพื้นหลังไปทางซ้ายหรือบนเพื่อไปยังตำแหน่งไอคอนที่ต้องการ เช่น background-position: -60px 0 แสดงไอคอนที่ตำแหน่งออฟเซ็ต 60 px
background-size
คุณสมบัติ CSS ที่ระบุขนาดการแสดงผลของภาพพื้นหลัง กุญแจสำคัญของความเข้ากันได้กับ Retina: หลังสร้าง sprite จากต้นฉบับ 2x ใช้ background-size: 32px auto ใน CSS เพื่อกลับเป็นขนาด 1x ทั้งจอ 1x และ 2x จะคมชัด
เลย์เอาต์ตาราง (Grid Layout)
โหมดตารางของตัวสร้างจะคำนวณจำนวนคอลัมน์อัตโนมัติจากรากที่สองของจำนวนไอคอน (ปัดเศษขึ้น) และจัดวางไอคอนตามแถวเป็นเมทริกซ์สี่เหลี่ยมจัตุรัส เช่น 9 ไอคอนจะกลายเป็นตาราง 3×3
ระยะห่างไอคอน (Padding)
ระยะพิกเซลระหว่างภาพย่อยใน sprite แนะนำ 1-5 px เพื่อป้องกันพิกเซลขอบรบกวนเวลาจัดตำแหน่ง CSS ระยะห่างอยู่ภายใน sprite ขณะที่การเรียก CSS ใช้เพียงพิกัดที่แน่นอน
ช่องโปร่งใส PNG
รูปแบบ PNG รองรับช่องอัลฟ่า ทำให้พื้นหลังของไอคอนเป็นแบบโปร่งใสได้ sprite รักษารูปแบบ PNG ไว้ ดังนั้นไอคอนโปร่งใสจึงแสดงผลถูกต้องหลังการรวม
มัลติเพล็กซ์ HTTP/2
โปรโตคอล HTTP/2 ประมวลผลหลายคำขอพร้อมกันในการเชื่อมต่อเดียว ลดข้อได้เปรียบบางส่วนของ sprite อย่างไรก็ตาม HTTP/2 ยังเสียเปรียบภาพใหญ่ที่รวมแล้วในแง่การตั้งค่า CDN ความเข้ากันได้กับเบราว์เซอร์เก่า และระดับการบีบอัด gzip
SVG Symbol
องค์ประกอบ <symbol> ของ SVG คู่กับการอ้างอิง <use> รวมไอคอนทั้งหมดไว้ในไฟล์ SVG ไฟล์เดียว และ CSS ควบคุม fill, stroke และแอนิเมชัน เป็นทางเลือกแรกที่ใช้แทน sprite ในโปรเจกต์สมัยใหม่
DPR (อัตราส่วนพิกเซลอุปกรณ์)
Device Pixel Ratio อัตราส่วนระหว่างพิกเซลทางกายภาพและพิกเซล CSS จอ Retina มี DPR = 2 ไอคอน 16×16 ใน CSS ต้องการพิกเซลทางกายภาพ 32×32 จริง DPR เป็นพารามิเตอร์หลักสำหรับความเข้ากันได้ของ sprite กับจอ Retina

เปรียบเทียบ 3 โหมดเลย์เอาต์ของภาพ sprite

โหมดเลย์เอาต์กฎการจัดวางการใช้งานทั่วไป
แนวนอนไอคอนเรียงเป็นแถวเดียวจากซ้ายไปขวาเมนูนำทาง ปุ่ม Tab แถบเครื่องมือแนวนอน
แนวตั้งไอคอนเรียงเป็นคอลัมน์เดียวจากบนลงล่างเมนูแนวตั้ง คำนำหน้ารายการ โครงสร้างบน-ล่าง
ตารางจัดเป็นเมทริกซ์สี่เหลี่ยมจัตุรัสตามจำนวนไอคอนใช้งานทั่วไป เหมาะเมื่อไม่ทราบจำนวนแน่ชัด

ค่า Padding ที่แนะนำสำหรับ sprite

ระยะห่าง (px)สถานการณ์คำแนะนำ
0pxขอบไอคอนสะอาด มี padding โปร่งใสของตัวเองแน่นที่สุด อาจมีพิกเซลรบกวนที่ขอบ
1-2pxไอคอนคุณภาพสูง ขอบปลอดภัยขั้นต่ำค่าที่แนะนำ สมดุลระหว่างความแน่นและเสถียรภาพ
3-5pxไอคอนทั่วไปที่มีเงาหรือเส้นขอบระยะปลอดภัย นิยมใช้กันทั่วไป
6-10pxไอคอนที่ขนาดต่างกันมาก มีเส้นขอบไอคอนใหญ่ไม่บังไอคอนเล็ก
10-50pxการดีบัก การจัดกลุ่มด้วยสายตาใช้สำหรับการดูตัวอย่างเท่านั้น ไม่เหมาะกับงานจริง

พารามิเตอร์ความเข้ากันได้ของ sprite 2x สำหรับจอ Retina

DPR ของจอขนาด CSSขนาดไฟล์ต้นฉบับbackground-size
1x16×1616×16auto
2x16×1632×3232px auto
3x16×1648×4848px auto
2x24×2448×4848px auto

Authoritative References