🗂️ Công Cụ Tạo Sprite Sheet
Đóng gói nhiều ảnh thành một PNG sprite sheet được tối ưu hóa và nhận ngay các quy tắc CSS background-position dùng được liền — miễn phí, trên trình duyệt, không cần tải lên.
🗂️
Drop images here, or click to select several
Packed into one PNG + CSS — in your browser, no upload
Giới thiệu
Công cụ này dùng Canvas API của trình duyệt để đóng gói ảnh thành một PNG sprite sheet gọn nhẹ hoàn toàn trên thiết bị của bạn — không có gì được tải lên máy chủ. Thả vào bao nhiêu ảnh tùy ý, đặt độ rộng hàng tối đa và padding cho mỗi sprite, trình đóng gói sẽ sắp xếp chúng theo từng hàng để giảm thiểu không gian lãng phí. Sau khi tạo xong, bạn có thể tải về PNG kết hợp và sao chép đoạn CSS, bao gồm một class cho mỗi sprite với các giá trị background-image, background-position, width và height chính xác, sẵn sàng dán vào stylesheet của bạn.
Cách sử dụng
- Kéo thả ảnh vào vùng tải lên, hoặc nhấp để duyệt và chọn nhiều file cùng lúc.
- Đặt độ rộng hàng tối đa (tính bằng pixel) và padding xung quanh mỗi sprite để kiểm soát mức độ đóng gói chặt.
- Nhấp Tạo Sprite Sheet để đóng gói tất cả ảnh thành một PNG kết hợp, hiển thị xem trước ngay lập tức trên canvas.
- Sao chép CSS được tạo ra — mỗi sprite có class riêng với các giá trị background-position, width và height chính xác.
- Tải về PNG sprite sheet và dán CSS vào stylesheet dự án của bạn — xong.
Câu hỏi thường gặp
- Ảnh của tôi có được tải lên máy chủ không?
- Không. Mọi thứ đều chạy trong trình duyệt của bạn thông qua Canvas API. File không bao giờ rời khỏi thiết bị.
- Tôi có thể thêm bao nhiêu ảnh vào một sprite sheet?
- Không có giới hạn cứng — công cụ đóng gói nhiều ảnh tùy bộ nhớ trình duyệt cho phép. Để hiệu suất tốt nhất, hãy giữ kích thước mỗi sprite ở mức hợp lý.
- Cài đặt độ rộng hàng tối đa có tác dụng gì?
- Nó giới hạn độ rộng tối đa mỗi hàng sprite có thể mở rộng trước khi trình đóng gói bắt đầu hàng mới. Giá trị lớn hơn tạo ra sheet rộng hơn; giá trị nhỏ hơn tạo ra sheet cao hơn và hẹp hơn.
- Tôi có thể dùng trực tiếp CSS được tạo ra trong dự án của mình không?
- Có. Mỗi class sprite bao gồm URL background-image (trỏ đến PNG đã tải về), background-position, width và height — dán vào bất kỳ stylesheet nào và áp dụng class cho các phần tử HTML của bạn.
- Tôi có thể dùng định dạng ảnh nào làm sprite đầu vào?
- Mọi định dạng mà trình duyệt của bạn có thể giải mã — PNG, JPEG, WebP, GIF, SVG, AVIF và nhiều hơn nữa. Sprite sheet đầu ra luôn là một PNG duy nhất để tương thích tối đa.