Trình tạo ảnh Sprite

Nhấp để tải lên hình ảnh

Định dạng được hỗ trợ: PNG, JPG, WebP

Bố cục

Khoảng cách Hình ảnh: 10px

050

Tải lên hình ảnh để xem trước sprite

Gộp nhiều biểu tượng nhỏ thành trang sprite CSS trực tuyến. Xử lý tại trình duyệt cục bộ, không cần gửi lên máy chủ, mã CSS với background-position tự động tạo cho bố cục ngang, dọc và lưới.

Đề xuất Liên quan

Trinh tao ICO

Nén ảnh

Chuyển đổi ảnh

Thay đổi kích thước ảnh

Cắt ảnh

Xoay và Lật Ảnh

Ảnh sprite (CSS Sprite) là gì?

Ảnh sprite (CSS Sprite) là kỹ thuật gộp nhiều ảnh nhỏ vào một ảnh lớn, sau đó dùng background-position để hiển thị từng icon. Từ «sprite» xuất phát từ các máy chơi game đời đầu, khi nhiều khung hình được gói vào một ảnh lớn rồi chuyển nhanh. Frontend web mượn ý tưởng này, tải nhiều icon nhỏ trong một yêu cầu.

**Vì sao cần sprite?** Ở thời HTTP/1.1, mỗi tệp ảnh tạo một yêu cầu HTTP kèm bắt tay TCP, bắt tay TLS và chi phí header. 100 icon tương ứng 100 yêu cầu. Sprite đặt toàn bộ icon vào một ảnh, hoàn tất tải bằng một yêu cầu, tăng tốc đáng kể lần hiển thị đầu. Đa luồng HTTP/2 giảm một phần lợi thế này, nhưng sprite vẫn có giá trị ở cache CDN, nén gzip và tương thích HTTP/1.1.

**Nguyên lý cơ bản:** Giả sử sprite 200×60 có ba icon 60×60 xếp ngang. Để hiển thị icon đầu, đặt cho phần tử 60×60: `background: url(sprite.png); background-position: 0 0;`. Icon thứ hai dùng -60px 0, icon thứ ba dùng -120px 0. Công cụ của chúng tôi tự động sinh các tọa độ này.

**Lựa chọn thay thế hiện đại:** SVG + use/symbol (khuyến nghị, vector, đổi màu được, hoạt ảnh được), Icon Font (tương thích rộng, đa nền tảng), HTTP/2 Server Push, icon web font. Mỗi cách có tình huống riêng, hãy chọn theo nhu cầu thực tế của dự án.

Trường hợp sử dụng

Dự án web có nhiều icon nhỏ cần gộp thành sprite để giảm yêu cầu HTTP và tăng tốc lần tải đầu tiên
Lập trình viên frontend muốn quản lý tập trung icon dự án và tự động tạo mã CSS background-position
Sau khi chuẩn bị xong icon, tạo hàng loạt sprite + mã CSS để bàn giao ngay cho đội ngũ tích hợp
Sau khi gộp, đưa ảnh qua [công cụ nén](/image/compress/) để giảm tổng dung lượng và cải thiện chỉ số LCP
Ứng dụng, Electron hoặc client desktop cần đóng gói tài nguyên icon tĩnh vào một tệp trong bản build
Mẫu HTML email hoặc blog tĩnh cần nhiều icon nhưng bị giới hạn tương thích của trình đọc email
Designer bàn giao icon dưới dạng sprite để lập trình viên frontend tích hợp nhanh
Xuất sprite 2x riêng cho màn hình Retina, tận dụng background-size để thích ứng cả 1x và 2x

Cách Sử dụng

Nhấp vào vùng tải lên hoặc kéo thả nhiều ảnh (hỗ trợ JPG / PNG / WebP / GIF, v.v.)
Trong danh sách bên trái, dùng tay cầm kéo hoặc nút lên/xuống để chỉnh thứ tự icon
Chọn một trong ba bố cục «Ngang», «Dọc», «Lưới» ở khu vực bên trái
Dùng thanh trượt khoảng cách để chỉnh pixel giữa các icon (khuyến nghị 1-5 px)
Xem trước sprite theo thời gian thực bên phải, sau đó nhấn «Tải về» để lưu PNG và «Sao chép» để đưa mã CSS vào dự án

Tính năng

Ghép nhiều ảnh một cú nhấp: tải vài icon hoặc ảnh nhỏ lên, tự động có sprite hoàn chỉnh
Ba chế độ bố cục: ngang, dọc, lưới chuyển đổi tùy ý theo từng tình huống
Điều chỉnh khoảng cách linh hoạt: thanh trượt 0-50 px kiểm soát khoảng cách giữa các icon
Sắp xếp bằng kéo thả: kéo icon trong danh sách để đổi thứ tự ghép, tọa độ CSS tự cập nhật
Sắp xếp trên di động: nút lên/xuống đổi thứ tự, thao tác dễ trên trình duyệt di động
Tự động tạo CSS: sinh mã background-position, chiều rộng và chiều cao cho từng ảnh con
Xem trước theo thời gian thực: thay ảnh hoặc tham số, sprite dựng lại ngay lập tức
Sao chép CSS một cú nhấp: nút sao chép đưa toàn bộ bảng định kiểu vào bộ nhớ tạm
Tải PNG một cú nhấp: ảnh đã ghép lưu về máy với tên tệp sprite.png cố định
Xử lý tại trình duyệt cục bộ: ghép bằng Canvas API, ảnh không gửi lên máy chủ
Hỗ trợ nhiều định dạng: JPG, PNG, WebP, GIF và nhiều định dạng ảnh phổ biến
Giữ nền trong suốt: PNG xuất ra giữ kênh alpha gốc của icon, thuận tiện ghép ảnh

Best Practices

Tương thích Retina 2x: tạo sprite từ nguồn 2x

Nếu người dùng mục tiêu dùng màn hình Retina (Mac, iPhone, HiDPI Windows), hãy dùng nguồn độ phân giải 2x (ví dụ icon 32×32) để tạo sprite, rồi khai báo background-size: 32px auto trong CSS để thu nhỏ về 16×16. Như vậy chỉ cần một lần tạo, màn hình 1x và 2x đều hiển thị sắc nét và tương thích mọi thiết bị.

Sprite vẫn có giá trị trong dự án HTTP/2

Dù đa luồng HTTP/2 làm giảm bớt nghẽn số lượng yêu cầu, sprite vẫn nổi trội ở bốn tình huống: tái sử dụng cache CDN, tỉ lệ nén gzip/Brotli cao, đi qua proxy mạng nội bộ và tương thích fallback HTTP/1.1. Mạng doanh nghiệp, hệ thống chính phủ - ngân hàng, mẫu email HTML vẫn chủ yếu dựa vào HTTP/1.1, nơi sprite không thể thay thế.

Chọn PNG-8 vs PNG-24: icon dùng PNG-8, gradient dùng PNG-24

Công cụ luôn xuất PNG, nhưng độ sâu bit của nguồn do bạn chọn. Icon phẳng hoặc đơn sắc nên dùng PNG-8 (trong suốt không mất dữ liệu, nhỏ hơn PNG-24 từ 60-80%). Icon có gradient, bóng và vùng sáng cần PNG-24. Công cụ chấp nhận mọi định dạng, vì vậy hãy tối ưu nguồn bằng trình nén PNG trước khi ghép.

Chiến lược cache CDN: thêm hash vào tên tệp

Đừng giữ tên tĩnh sprite.png sau khi tạo. Hãy đổi tên theo hash nội dung (ví dụ sprite.a3f2b1.png) và cấu hình Cache-Control: max-age=31536000 để cache vĩnh viễn. Trình duyệt chỉ tải tệp một lần, các yêu cầu sau lấy từ cache cục bộ, tiết kiệm nhiều băng thông hơn cả HTTP/2. Công cụ của chúng tôi xuất tệp với tên sprite.png, vì vậy hãy đổi tên thủ công sau khi tải về.

Nén gzip / Brotli giúp sprite còn gọn hơn nữa

Ảnh ghép có tính liên tục pixel cao nên gzip/Brotli nén hiệu quả hơn nhiều so với nhiều ảnh nhỏ rời rạc. Nginx + gzip cấp 1 giảm sprite 60-80%, Brotli giảm hơn 85%. Khi bật Content-Encoding, 1 MB sprite thực tế chỉ truyền 200-300 KB, đây là lợi thế bị đánh giá thấp nhất của sprite.

Tương thích CSS Modules / Vue scoped: bọc bằng :global()

Nếu dự án dùng CSS Modules hoặc Vue scoped CSS, tên lớp .icon-home và .sprite do công cụ tạo ra sẽ bị băm cục bộ và không hoạt động. Hãy bọc các lớp chung bằng :global(.sprite) { ... } trong .module.css và gọi chúng ngoài khối scoped. Hoặc không dùng CSS Modules mà quản lý theo quy ước đặt tên BEM.

Kết hợp với Icon Font: icon cốt lõi vào font, icon phức tạp vào sprite

Cách ổn định nhất trong sản xuất là kết hợp cả hai. Icon UI đa dụng (cài đặt, đóng, tìm kiếm, người dùng) làm bằng Icon Font (đổi màu được, vector, đa nền tảng). Icon màu phức tạp (logo sản phẩm, icon banner vận hành) để trong sprite. Hai cách bổ trợ nhau, tránh chi phí bảo trì toàn diện một hướng.

Dự án kỹ thuật dùng spritesmith, prototype dùng công cụ của chúng tôi

Với dự án bảo trì dài hạn, hãy tích hợp spritesmith (Webpack) hoặc gulp.spritesmith vào quy trình build: thay đổi mã nguồn tự động dựng lại, xuất tên tệp có hash, sinh biến SCSS/LESS. Công cụ của chúng tôi phù hợp với prototype nhanh và giao hàng dự án nhỏ không phụ thuộc, còn pipeline CI/CD thì plugin build phù hợp hơn.

Dự án hiện đại có thể chuyển từ sprite sang SVG symbol

Nếu dự án hỗ trợ trình duyệt hiện đại (Chrome / Safari / Firefox / Edge đầy đủ, cùng IE 11+), nên cân nhắc chuyển từ sprite sang SVG symbol: một tệp quản lý mọi icon, CSS điều khiển màu sắc và hoạt ảnh, không phải duy trì tọa độ background-position. Sprite từ công cụ của chúng tôi là tài sản dùng một lần, phù hợp làm giải pháp chuyển tiếp trước khi di cư.

Câu hỏi Thường gặp

Ảnh sprite là gì và vì sao nên gộp nhiều ảnh vào một?

Ảnh sprite (CSS Sprite) là kỹ thuật gộp nhiều ảnh nhỏ vào một ảnh lớn và hiển thị từng icon bằng background-position. Sau khi gộp, mọi icon được tải bằng một yêu cầu HTTP, giảm đáng kể số lượng yêu cầu và tăng tốc độ hiển thị lần đầu so với tải từng tệp riêng. Đây là kỹ thuật cổ điển của tối ưu frontend.

Làm sao gộp nhiều icon thành sprite trực tuyến?

Tải ảnh lên, công cụ sẽ tự động ghép theo bố cục bạn chọn với xem trước theo thời gian thực. Đồng thời phía bên phải sinh tự động mã CSS background-position (kèm chiều rộng và chiều cao) cho từng ảnh con, sẵn sàng để dán vào bảng định kiểu. Sprite xuất ra có định dạng PNG và tải về bằng một cú nhấp.

Mã CSS được tạo dùng như thế nào?

Đặt tệp sprite.png đã tải về vào thư mục dự án (ví dụ /img/sprite.png) và dán mã CSS do công cụ tạo vào bảng định kiểu. Thêm lớp .sprite và lớp .icon-xxx tương ứng vào phần tử cần hiển thị icon, ví dụ: <i class="sprite icon-home"></i>. Tên lớp được công cụ tự động tạo từ tên tệp gốc.

Công cụ hỗ trợ những bố cục nào?

Hỗ trợ ba chế độ: ngang (icon xếp một hàng từ trái sang phải), dọc (icon xếp một cột từ trên xuống dưới) và lưới (icon tự động xếp ma trận vuông theo số lượng, số cột là căn bậc hai làm tròn lên). Bạn chuyển chế độ ở bảng bên trái để xem trước.

Có thể điều chỉnh khoảng cách giữa các icon không?

Được. Bên trái có thanh trượt khoảng cách 0-50 px, khuyến nghị 1-5 px. Khoảng cách hợp lý giúp tránh nhiễu pixel mép khi định vị CSS, nhưng không ảnh hưởng tới cách sử dụng cuối cùng: khoảng cách nằm bên trong sprite, còn khi gọi CSS chỉ dùng tọa độ chính xác của background-position.

Có thể thay đổi thứ tự icon không?

Được. Mỗi mục trong danh sách bên trái có thể kéo bằng tay cầm, trên thiết bị di động dùng nút lên/xuống để đổi thứ tự. Sau khi điều chỉnh, sprite được dựng lại theo thứ tự mới và tọa độ CSS được cập nhật đồng bộ.

Công cụ hỗ trợ những định dạng ảnh nào?

Hỗ trợ tất cả định dạng phổ biến: JPG, PNG, WebP, GIF và nhiều định dạng khác. Đầu ra luôn là PNG (giữ nền trong suốt). Với icon, khuyến nghị đầu vào PNG: kênh trong suốt của PNG được bảo toàn chính xác sau khi gộp vào sprite.

Dự án hiện đại còn cần sprite không?

Sau khi HTTP/2 phổ biến, đa luồng đã giảm bớt một phần lợi thế của sprite, nhưng sprite vẫn có giá trị ở cache CDN, nén gzip và việc tải nhanh các icon trọng yếu trên màn hình đầu. Nếu bạn có ít icon (dưới 10) hoặc cần đổi màu, hoạt ảnh, nên chuyển sang SVG symbol hoặc Icon Font. Với nhiều icon PNG tĩnh, sprite vẫn là lựa chọn ổn định và đáng tin cậy.

Sprite có bị mờ trên màn hình Retina không? Cách khắc phục?

Có thể bị mờ. Màn hình Retina (Mac, iPhone, HiDPI Windows) có số pixel vật lý gấp 2-3 lần pixel CSS, nên sprite 1x thường bị kéo giãn lên 2x, mép trở nên mờ. Cách khắc phục: dùng nguồn độ phân giải 2x (32×32 thay vì 16×16) để tạo sprite và khai báo background-size: 32px auto trong CSS để thu nhỏ về 16×16.

Ghép icon có làm giảm chất lượng ảnh không?

Chất lượng không bị giảm. Quá trình ghép chỉ đặt các ảnh vào vị trí xác định trên canvas lớn, không tái lấy mẫu, nén hay chỉnh màu. PNG xuất ra giữ nguyên chất lượng gốc. Nếu muốn giảm thêm dung lượng, sau khi tải về bạn có thể dùng [công cụ nén ảnh](/image/compress/).

Ảnh sprite có được gửi lên máy chủ không? Có an toàn không?

Không được gửi lên. Mọi thao tác ghép được thực hiện trong trình duyệt cục bộ của bạn qua Canvas API, tệp không rời khỏi thiết bị và bị xóa sau khi xử lý. Bạn có thể yên tâm xử lý icon nội bộ và thiết kế logo chưa công bố.

Làm sao tải sprite đã tạo về?

Sau khi tải ảnh lên, công cụ tự động tạo xem trước. Nhấn nút «Tải về» bên trái để lưu sprite.png về máy. Nếu cần mã CSS, công cụ tự động xuất toàn bộ CSS, nút «Sao chép» sẽ chuyển vào bộ nhớ tạm.

Có thể tự đặt tên lớp không?

Ở phiên bản hiện tại, tên lớp được công cụ tự động tạo từ tên tệp gốc với tiền tố .icon-. Ví dụ home.png tạo thành .icon-home. Dùng chữ cái Latin, số và dấu gạch ngang trong tên tệp sẽ giúp bạn có tên lớp CSS gọn gàng hơn.

Nên chọn sprite, Icon Font hay SVG Symbol?

Tùy vào tình huống. Nhiều icon PNG tĩnh hoặc cần tương thích IE cũ thì dùng sprite; icon UI đa dụng cần đổi màu và đa nền tảng thì dùng Icon Font; dự án hiện đại cần đổi màu, hoạt ảnh và quản lý một tệp thì SVG Symbol là lựa chọn đầu tiên. Thực tế thường kết hợp: icon UI cốt lõi dùng Icon Font, icon màu phức tạp dùng sprite.

Có thể giảm thêm sprite đã gộp bằng [công cụ nén ảnh](/image/compress/) không?

Được. Công cụ của chúng tôi xuất PNG không mất dữ liệu nên tệp có thể lớn. Quy trình khuyến nghị: tạo sprite tại đây, sau đó dùng [công cụ nén](/image/compress/) để giảm dung lượng PNG hoặc chuyển sang JPG (nếu không cần trong suốt), nếu cần chuyển sang WebP qua [công cụ chuyển đổi](/image/convert/). Kết hợp các công cụ để tối đa hiệu năng tải.

Thuật ngữ

Ảnh sprite (CSS Sprite): Kỹ thuật gộp nhiều ảnh nhỏ vào một ảnh lớn và hiển thị từng icon bằng background-position. Phương pháp tối ưu hiệu năng kinh điển của frontend web.
background-position: Thuộc tính CSS chỉ định tọa độ bắt đầu của ảnh nền. Sprite dùng giá trị âm để dịch chuyển nền sang trái hoặc lên trên tới vị trí icon mong muốn. Ví dụ: background-position: -60px 0 hiển thị icon ở vị trí lệch 60 px.
background-size: Thuộc tính CSS chỉ định kích thước hiển thị của ảnh nền. Chìa khóa cho tương thích Retina: sau khi tạo sprite từ nguồn 2x, dùng background-size: 32px auto trong CSS để thu về kích thước 1x; màn hình 1x và 2x đều giữ độ nét.
Bố cục lưới (Grid Layout): Chế độ lưới của công cụ tự động tính số cột là căn bậc hai của số icon (làm tròn lên) và sắp xếp icon theo hàng vào ma trận vuông. Ví dụ 9 icon sẽ thành lưới 3×3.
Khoảng cách icon (Padding): Khoảng cách pixel giữa các ảnh con trong sprite. Khuyến nghị 1-5 px để tránh nhiễu pixel mép khi định vị CSS. Khoảng cách nằm bên trong sprite, còn khi gọi CSS chỉ dùng tọa độ chính xác.
Kênh trong suốt PNG: Định dạng PNG hỗ trợ kênh alpha, cho phép nền icon trong suốt. Sprite giữ định dạng PNG, nên icon trong suốt hiển thị chính xác sau khi gộp.
Đa luồng HTTP/2: Giao thức HTTP/2 xử lý nhiều yêu cầu song song trên một kết nối, giảm một phần lợi thế của sprite. Tuy nhiên HTTP/2 vẫn thua ảnh lớn đã gộp ở cấu hình CDN, tương thích trình duyệt cũ và mức nén gzip.
SVG Symbol: Phần tử <symbol> của SVG kết hợp tham chiếu <use> gom toàn bộ icon vào một tệp SVG, CSS kiểm soát fill, stroke và hoạt ảnh. Lựa chọn thay thế đầu tiên cho sprite trong dự án hiện đại.
DPR (tỉ lệ pixel thiết bị): Device Pixel Ratio, tỉ lệ giữa pixel vật lý và pixel CSS. Màn hình Retina có DPR = 2, icon 16×16 trong CSS thực tế cần 32×32 pixel vật lý. DPR là tham số cốt lõi để sprite tương thích Retina.

So sánh ba chế độ bố cục của ảnh sprite

Chế độ bố cục	Quy tắc sắp xếp	Ứng dụng điển hình
Ngang	Icon xếp một hàng từ trái sang phải	Điều hướng, nút Tab, thanh công cụ ngang
Dọc	Icon xếp một cột từ trên xuống dưới	Menu dọc, tiền tố danh sách, cấu trúc trên-dưới
Lưới	Tự động xếp ma trận vuông theo số lượng icon	Đa dụng, lựa chọn tốt nhất khi chưa biết số lượng

Giá trị Padding khuyến nghị cho sprite

Khoảng cách (px)	Tình huống	Khuyến nghị
`0px`	Cạnh icon sạch, có padding trong suốt riêng	Tối đa gọn, có thể nhiễu pixel ở mép
`1-2px`	Icon chất lượng cao, biên an toàn tối thiểu	Giá trị khuyến nghị, cân bằng gọn và ổn định
`3-5px`	Icon thường có bóng hoặc viền	Khoảng cách an toàn, lựa chọn phổ biến
`6-10px`	Icon chênh lệch kích thước lớn, có viền	Icon lớn không che icon nhỏ
`10-50px`	Gỡ lỗi, nhóm trực quan	Chỉ dùng xem trước, không dùng cho sản xuất

Tham số tương thích sprite 2x cho màn Retina

DPR màn hình	Kích thước CSS	Kích thước nguồn	background-size
`1x`	`16×16`	`16×16`	`auto`
`2x`	`16×16`	`32×32`	`32px auto`
`3x`	`16×16`	`48×48`	`48px auto`
`2x`	`24×24`	`48×48`	`48px auto`

Authoritative References

ReferenceMDN - CSS background-position
ReferenceMDN - Triển khai sprite ảnh trong CSS
ReferenceMDN - background-size
ReferenceMDN - SVG <symbol> và <use>
ReferenceWeb.dev - Thay ảnh bằng sprite CSS
ReferenceWikipedia - Sprite (đồ họa máy tính)